@1doc/1ds-react 0.0.2 → 2.7.1

package/dist/components/Icon/Icon.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './Icon.css';
-import { library, findIconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { fas } from "@fortawesome/pro-solid-svg-icons";
-import { far } from "@fortawesome/pro-regular-svg-icons";
-import { fal } from "@fortawesome/pro-light-svg-icons";
-import { fat } from "@fortawesome/pro-thin-svg-icons";
-import { fad } from "@fortawesome/pro-duotone-svg-icons";
-library.add(fas, far, fal, fat, fad);
-function Icon(props) {
-    function iconDefinition() {
-        if (!props.name)
-            return null;
-        const prefix = props.prefix ?? "fas";
-        return findIconDefinition({ prefix, iconName: props.name }) ?? null;
-    }
-    function classes() {
-        return [
-            "umds-icon",
-            // Only apply size class if customSize is not provided
-            props.customSize ? "" : `umds-icon--${props.size || "md"}`,
-            `umds-icon--${props.variant || "inherit"}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function style() {
-        // If customSize is provided, use it for width and height
-        if (props.customSize) {
-            return {
-                width: props.customSize,
-                height: props.customSize,
-                fontSize: props.customSize,
-            };
-        }
-        return undefined;
-    }
-    return (_jsxs("span", { style: style(), "data-icon": props.name, ...props, className: classes(), children: [iconDefinition() ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-inline--fa", viewBox: `0 0 ${iconDefinition().icon[0]} ${iconDefinition().icon[1]}`, children: Array.isArray(iconDefinition().icon[4]) ? (_jsxs(_Fragment, { children: [_jsx("path", { fill: "currentColor", className: "fa-secondary", opacity: 0.4, d: iconDefinition().icon[4][0] }), _jsx("path", { fill: "currentColor", className: "fa-primary", d: iconDefinition().icon[4][1] })] })) : (_jsx(_Fragment, { children: _jsx("path", { fill: "currentColor", d: iconDefinition().icon[4] }) })) })) : null, props.component ? _jsx(props.component, {}) : null] }));
-}
-export default Icon;

package/dist/components/Input/Input.css

@@ -1,190 +0,0 @@
-/* Base Wrapper */
-.umds-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--umds-primitive-spacing-nano);
-  /* 1.5 spacing unit fallback */
-  font-family: var(--umds-semantic-font-family-base);
-  width: 320px;
-  /* Default width */
-}
-
-.umds-input--full-width {
-  width: 100%;
-}
-
-/* Label */
-.umds-input__label {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  /* Font styles handled by Text component */
-}
-
-.umds-input__required {
-  color: var(--umds-semantic-color-feedback-negative-pure);
-  font-weight: bold;
-}
-
-/* Input Container (Box) */
-.umds-input__container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-color: var(--umds-semantic-color-background-white);
-  border: 1px solid var(--umds-semantic-color-neutral-dark-up);
-  border-radius: var(--umds-primitive-border-radius-sm);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* Sizes */
-.umds-input--md .umds-input__container {
-  height: var(--umds-primitive-spacing-sm);
-  padding: 0 var(--umds-primitive-spacing-xxxs);
-}
-
-.umds-input--lg .umds-input__container {
-  height: var(--umds-primitive-spacing-md);
-  padding: 0 var(--umds-primitive-spacing-xxs);
-}
-
-.umds-input--sm .umds-input__container {
-  height: var(--umds-primitive-spacing-xs);
-  padding: 0 var(--umds-primitive-spacing-nano);
-}
-
-.umds-input--xs .umds-input__container {
-  height: var(--umds-primitive-spacing-xxs);
-  padding: 0 var(--umds-primitive-spacing-nano);
-}
-
-/* Control (Input element) */
-.umds-input__control {
-  flex: 1;
-  border: none;
-  background: transparent;
-  outline: none;
-  color: var(--umds-semantic-color-neutral-pure);
-  font-size: var(--umds-primitive-font-size-xs);
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-.umds-input__control::placeholder {
-  color: var(--umds-semantic-color-neutral-light-down);
-}
-
-.umds-input--lg .umds-input__control {
-  font-size: var(--umds-primitive-font-size-sm);
-}
-
-.umds-input--sm .umds-input__control {
-  font-size: var(--umds-primitive-font-size-xxs);
-}
-
-.umds-input--xs .umds-input__control {
-  font-size: var(--umds-primitive-font-size-xxxs);
-}
-
-/* States */
-.umds-input__container:hover {
-  border-color: var(--umds-semantic-color-neutral-dark-up);
-}
-
-.umds-input__container:focus-within {
-  /* Match Button Focus Style */
-  outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
-  outline-offset: 2px;
-  border-color: var(--umds-semantic-color-neutral-light-medium);
-  /* Keep original border */
-}
-
-/* Error State */
-.umds-input--error .umds-input__container {
-  border-color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-.umds-input--error .umds-input__container:focus-within {
-  outline: 2px solid var(--umds-semantic-color-feedback-negative-pure);
-  border-color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-/* Disabled State */
-.umds-input--disabled .umds-input__label,
-.umds-input--disabled .umds-input__message {
-  color: var(--umds-semantic-color-neutral-light-down);
-}
-
-.umds-input--disabled .umds-input__container {
-  background-color: var(--umds-semantic-color-neutral-light-medium);
-  border-color: var(--umds-semantic-color-neutral-light-down);
-  pointer-events: none;
-  /* Prevent interaction */
-}
-
-.umds-input--disabled .umds-input__control {
-  color: var(--umds-semantic-color-neutral-light-down);
-  -webkit-text-fill-color: var(--umds-semantic-color-neutral-light-down);
-  /* Fix for Safari/Chrome disabled text color */
-}
-
-.umds-input--disabled .umds-input__icon-left,
-.umds-input--disabled .umds-input__actions-right {
-  color: var(--umds-semantic-color-neutral-light-down);
-  opacity: 1;
-}
-
-.umds-input--disabled .umds-input__required {
-  opacity: 0.3;
-}
-
-/* Ensure cursor is applied effectively */
-.umds-input--disabled,
-.umds-input--disabled input,
-.umds-input--disabled button {
-  cursor: not-allowed;
-}
-
-/* Read Only State */
-.umds-input--readonly .umds-input__container {
-  background-color: var(--umds-semantic-color-background-light);
-  border-color: var(--umds-semantic-color-neutral-light-medium);
-}
-
-/* Icons */
-.umds-input__icon-left {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: var(--umds-primitive-spacing-nano);
-  color: var(--umds-semantic-color-neutral-dark-up);
-}
-
-.umds-input__actions-right {
-  display: flex;
-  align-items: center;
-  gap: var(--umds-primitive-spacing-nano);
-  margin-left: var(--umds-primitive-spacing-nano);
-}
-
-.umds-input__action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--umds-semantic-color-neutral-dark-up);
-  transition: color 0.15s ease;
-}
-
-.umds-input__action-btn:hover {
-  color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-input__action-btn:focus {
-  outline: none;
-  color: var(--umds-semantic-color-primary-dark);
-}

package/dist/components/Input/Input.d.ts

@@ -1,32 +0,0 @@
-import './Input.css';
-export interface InputAction {
-    icon: any;
-    onClick?: (event: any) => void;
-    label?: string;
-    tooltip?: string;
-}
-export interface InputProps {
-    label?: any;
-    type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    helperText?: any;
-    errorMessage?: any;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-    fullWidth?: boolean;
-    className?: string;
-    iconLeft?: any;
-    iconsRight?: InputAction[];
-    onChange?: (event: any) => void;
-    onFocus?: (event: any) => void;
-    onBlur?: (event: any) => void;
-    mask?: string;
-    [key: string]: any;
-}
-declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
-export default Input;

package/dist/components/Input/Input.js

@@ -1,58 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './Input.css';
-"use client";
-import { useState } from "react";
-import Icon from "../Icon/Icon";
-import Text from "../Text/Text";
-function Input(props) {
-    const [isPasswordVisible, setIsPasswordVisible] = useState(() => false);
-    function togglePassword() {
-        setIsPasswordVisible(!isPasswordVisible);
-    }
-    const [internalValue, setInternalValue] = useState(() => props.defaultValue);
-    function inputType() {
-        if (props.type === "password" && isPasswordVisible) {
-            return "text";
-        }
-        return props.type || "text";
-    }
-    function wrapperClasses() {
-        const hasError = props.errorMessage && props.errorMessage.length > 0;
-        return [
-            "umds-input",
-            props.fullWidth ? "umds-input--full-width" : "",
-            hasError ? "umds-input--error" : "",
-            props.disabled ? "umds-input--disabled" : "",
-            props.readOnly ? "umds-input--readonly" : "",
-            `umds-input--${props.size || "md"}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function inputContainerClasses() {
-        const hasError = props.errorMessage && props.errorMessage.length > 0;
-        return [
-            "umds-input__container",
-            hasError ? "umds-input__container--error" : "",
-            props.disabled ? "umds-input__container--disabled" : "",
-            props.readOnly ? "umds-input__container--readonly" : "",
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function iconSize() {
-        return props.size === "sm" || props.size === "xs" ? "sm" : "md";
-    }
-    function handleChange(event) {
-        setInternalValue(event.target.value);
-        if (props.onChange) {
-            props.onChange(event);
-        }
-    }
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", children: [_jsx(_Fragment, { children: props.label || "{props.label}" }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: typeof props.iconLeft === "string" ? (_jsx(Icon, { name: props.iconLeft, size: iconSize() })) : (_jsx(_Fragment, { children: props.iconLeft || "{props.iconLeft}" })) })) : null, _jsx("input", { className: "umds-input__control", type: inputType(), name: props.name, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, defaultValue: props.defaultValue, onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-invalid": !!(props.errorMessage && props.errorMessage.length > 0), required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", onClick: (event) => togglePassword(), "aria-label": isPasswordVisible ? "Ocultar senha" : "Mostrar senha", children: _jsx(Icon, { name: isPasswordVisible ? "eye-closed" : "eye-solid", size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsxs("button", { type: "button", className: "umds-input__action-btn", onClick: (e) => {
-                                        e.stopPropagation();
-                                        action.onClick?.(e);
-                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: [typeof action.icon === "string" ? (_jsx(Icon, { name: action.icon, size: iconSize() })) : null, typeof action.icon !== "string" ? _jsx(_Fragment, { children: action.icon }) : null] }))) })) : null] })] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "error", children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: _jsx(_Fragment, { children: props.helperText || "{props.helperText}" }) })) : null] }));
-}
-export default Input;

package/dist/components/Link/Link.css

@@ -1,76 +0,0 @@
-.umds-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    /* Espaçamento entre texto e ícone */
-    text-decoration: none;
-    font-family: var(--umds-semantic-font-family-base, inherit);
-    font-weight: 600;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid transparent;
-    /* Base para outlined */
-    padding: 0;
-    transition: color 0.2s ease, border-bottom-color 0.2s ease;
-    box-sizing: border-box;
-}
-
-/* Sizes */
-.umds-link--default {
-    font-size: 14px;
-    line-height: 16px;
-}
-
-.umds-link--small {
-    font-size: 12px;
-    line-height: 14px;
-}
-
-/* Variants - Neutral */
-.umds-link--neutral {
-    color: var(--umds-semantic-color-neutral-dark-down);
-}
-
-.umds-link--neutral:hover:not(.umds-link--disabled) {
-    color: var(--umds-semantic-color-neutral-pure);
-}
-
-.umds-link--neutral.umds-link--outlined {
-    border-bottom-color: var(--umds-semantic-color-neutral-dark-down);
-}
-
-.umds-link--neutral.umds-link--outlined:hover:not(.umds-link--disabled) {
-    border-bottom-color: var(--umds-semantic-color-neutral-pure);
-}
-
-/* Variants - Primary */
-.umds-link--primary {
-    color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-link--primary:hover:not(.umds-link--disabled) {
-    color: var(--umds-semantic-color-primary-dark);
-}
-
-.umds-link--primary.umds-link--outlined {
-    border-bottom-color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-link--primary.umds-link--outlined:hover:not(.umds-link--disabled) {
-    border-bottom-color: var(--umds-semantic-color-primary-dark);
-}
-
-/* Disabled */
-.umds-link--disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-/* Focus */
-.umds-link:focus-visible {
-    outline: 2px solid var(--umds-semantic-color-primary-pure);
-    outline-offset: 2px;
-    border-radius: 2px;
-}

package/dist/components/Link/Link.d.ts

@@ -1,15 +0,0 @@
-import './Link.css';
-export interface LinkProps {
-    href?: string;
-    target?: string;
-    size?: "default" | "small";
-    variant?: "neutral" | "primary";
-    outlined?: boolean;
-    disabled?: boolean;
-    className?: string;
-    children?: any;
-    onClick?: (event: any) => void;
-    [key: string]: any;
-}
-declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;
-export default Link;

package/dist/components/Link/Link.js

@@ -1,19 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './Link.css';
-"use client";
-function Link(props) {
-    function classes() {
-        return [
-            "umds-link",
-            `umds-link--${props.size || "default"}`,
-            `umds-link--${props.variant || "neutral"}`,
-            props.outlined ? "umds-link--outlined" : "",
-            props.disabled ? "umds-link--disabled" : "",
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    return props.href && !props.disabled ? (_jsxs("a", { href: props.href, target: props.target, onClick: (event) => props.onClick?.(event), ...props, className: classes(), children: [_jsx(_Fragment, { children: props.iconLeft }), _jsx(_Fragment, { children: props.children || "{props.children}" }), _jsx(_Fragment, { children: props.iconRight })] })) : (_jsx(_Fragment, { children: _jsxs("button", { type: "button", disabled: props.disabled, onClick: (event) => props.onClick?.(event), ...props, className: classes(), children: [_jsx(_Fragment, { children: props.iconLeft }), _jsx(_Fragment, { children: props.children || "{props.children}" }), _jsx(_Fragment, { children: props.iconRight })] }) }));
-}
-export default Link;

package/dist/components/Logo/Logo.css

@@ -1,32 +0,0 @@
-.umds-logo {
-    display: inline-block;
-    line-height: 0;
-    vertical-align: middle;
-}
-
-/* Sizes (Baseado nas dimensões intrínsecas dos SVGs extraídos) */
-/* Regular SVG: 40x13.6 */
-.umds-logo--regular {
-    width: 58px;
-    /* Ajustado para visualmente agradável se necessário, ou usar 40px base. User pediu Regular e Small. Vou usar rem relativos ou px fixos. O SVG tem viewbox 0 0 40 13.6. */
-    /* Se eu definir width, height é auto. */
-    width: 40px;
-}
-
-/* Small SVG: 15x13.4 */
-.umds-logo--small {
-    width: 15px;
-}
-
-/* Variants */
-.umds-logo--default {
-    color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-logo--dark {
-    color: var(--umds-semantic-color-neutral-pure);
-}
-
-.umds-logo--light {
-    color: var(--umds-semantic-color-neutral-light-pure);
-}

package/dist/components/Logo/Logo.d.ts

@@ -1,10 +0,0 @@
-import './Logo.css';
-export interface LogoProps {
-    size?: "regular" | "small";
-    variant?: "default" | "dark" | "light";
-    className?: string;
-    style?: any;
-    [key: string]: any;
-}
-declare function Logo(props: LogoProps): import("react/jsx-runtime").JSX.Element;
-export default Logo;

package/dist/components/Logo/Logo.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './Logo.css';
-function Logo(props) {
-    function classes() {
-        return [
-            "umds-logo",
-            `umds-logo--${props.size || "regular"}`,
-            `umds-logo--${props.variant || "default"}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    return (_jsx("span", { role: "img", "aria-label": "1Doc Logo", ...props, className: classes(), children: props.size === "small" ? (_jsx("svg", { viewBox: "0 0 15 13.4473", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", children: _jsx("path", { d: "M5.0791 13.4473H5.06738C4.08896 13.0445 3.20078 12.4671 2.44043 11.7539V3.56641H0C0.748609 1.48759 2.73898 6.32788e-05 5.0791 0V13.4473ZM8.52344 0C10.5432 0 12.1269 0.601294 13.2744 1.81934H13.2705C14.4179 3.01981 14.9999 4.69588 15 6.75098C15 8.80618 14.4181 10.445 13.2354 11.6455C12.0722 12.846 10.4692 13.4472 8.41406 13.4473H5.95801V10.8643H8.54102C9.7062 10.8643 10.5987 10.4627 11.2354 9.68066C11.8718 8.89867 12.2002 7.87902 12.2002 6.69629C12.2002 5.51345 11.872 4.54861 11.2354 3.7666C10.5987 2.98458 9.70619 2.58398 8.54102 2.58398H5.95801V0H8.52344Z", fill: "currentColor" }) })) : (_jsx("svg", { viewBox: "0 0 40 13.6035", fill: "none", width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", children: _jsx("path", { d: "M24.373 3.2334C25.9082 3.23349 27.1729 3.73988 28.166 4.75098C29.1592 5.7454 29.6475 6.95544 29.6475 8.41895C29.6474 9.88232 29.1592 11.1113 28.166 12.1045C27.1729 13.0976 25.9081 13.6034 24.373 13.6035C22.8377 13.6035 21.5723 13.0977 20.5791 12.1045C19.5859 11.1101 19.0977 9.86438 19.0977 8.41895C19.0977 6.97343 19.586 5.74419 20.5791 4.75098C21.5723 3.73979 22.8377 3.2334 24.373 3.2334ZM35.5986 3.28613C37.4642 3.28613 39.1248 4.14657 40.002 5.67578L38.1455 7.15234C37.5496 6.15918 36.6997 5.65339 35.6348 5.65332C34.821 5.65332 34.153 5.92471 33.6289 6.4668C33.1048 6.99086 32.8331 7.64174 32.833 8.4541C32.833 9.26647 33.0855 9.93573 33.6094 10.4766C34.1334 11.0006 34.8026 11.2724 35.5791 11.2725L35.5811 11.2715C36.6113 11.2713 37.6584 10.6575 38.0928 9.79004L39.9805 11.293C39.0817 12.7145 37.423 13.6025 35.5264 13.6025C33.9902 13.6024 32.7437 13.1142 31.7686 12.1572C30.7933 11.1999 30.3047 9.95256 30.3047 8.45312C30.3047 6.95385 30.793 5.70728 31.7861 4.75C32.7794 3.77471 34.0442 3.28613 35.5986 3.28613ZM5.04297 13.3516H5.03125C4.05955 12.9507 3.17578 12.3784 2.42188 11.6699V3.54102H0C0.743134 1.47675 2.72045 0 5.04199 0H5.04297V13.3516ZM12.0107 0C14.0164 0 15.5883 0.595607 16.7275 1.80664C17.8655 2.99844 18.4433 4.66084 18.4434 6.70215C18.4434 8.74367 17.8653 10.3706 16.6914 11.5625C15.5342 12.7556 13.9448 13.3516 11.9033 13.3516H6.79004V0H12.0107ZM24.373 5.61816C23.5953 5.61816 22.945 5.88867 22.4209 6.43066C21.8968 6.97276 21.6445 7.6423 21.6445 8.41895C21.6446 9.19535 21.897 9.86391 22.4209 10.4238C22.945 10.9659 23.5964 11.2363 24.373 11.2363C25.1495 11.2362 25.7816 10.9658 26.3057 10.4238C26.8295 9.86395 27.0995 9.19525 27.0996 8.41895C27.0996 7.64233 26.8298 6.97275 26.3057 6.43066C25.7828 5.88866 25.1507 5.61826 24.373 5.61816ZM9.46484 10.7852H12.0303C13.1862 10.7851 14.0713 10.3879 14.7031 9.61133C15.335 8.83469 15.6611 7.82356 15.6611 6.64844C15.6611 5.47343 15.3349 4.51584 14.7031 3.73926C14.0713 2.96291 13.186 2.56546 12.0303 2.56543H9.46484V10.7852Z", fill: "currentColor" }) })) }));
-}
-export default Logo;

package/dist/components/Modal/Modal.css

@@ -1,155 +0,0 @@
-.umds-modal-root {
-  position: fixed;
-  inset: 0;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: var(--umds-primitive-spacing-xxs);
-}
-
-.umds-modal-root--open {
-  display: flex !important;
-}
-
-.umds-modal-root--inline {
-  position: relative;
-  width: 100%;
-  min-height: 450px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.umds-modal-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-  animation: umds-fade-in 0.2s ease-out;
-  z-index: 1;
-}
-
-.umds-modal {
-  position: relative;
-  z-index: 2;
-  background-color: var(--umds-semantic-color-background-white);
-  border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-primitive-shadow-level-3);
-  padding: var(--umds-primitive-spacing-xxs);
-  width: clamp(320px, 90%, 498px);
-  max-width: 498px;
-  height: fit-content;
-  max-height: calc(100% - 40px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: clip;
-  animation: umds-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-sizing: border-box;
-}
-
-@media (max-width: 400px) {
-  .umds-modal {
-    width: 95%;
-    min-width: 280px;
-  }
-}
-
-.umds-modal__close-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: var(--umds-primitive-spacing-nano);
-}
-
-.umds-modal__close-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  padding: 4px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-  color: var(--umds-semantic-color-neutral-dark-up);
-}
-
-.umds-modal__close-button:hover {
-  background-color: var(--umds-semantic-color-neutral-light-medium);
-}
-
-.umds-modal__content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--umds-primitive-spacing-xs);
-  text-align: center;
-}
-
-.umds-modal__header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--umds-primitive-spacing-xxs);
-    width: 100%;
-}
-
-.umds-modal__icon {
-  width: 80px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.umds-modal__icon--success {
-  color: var(--umds-semantic-color-feedback-positive-pure);
-}
-
-.umds-modal__icon--error {
-  color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-.umds-modal__icon--warning {
-  color: var(--umds-semantic-color-feedback-info-pure);
-}
-
-.umds-modal__text-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--umds-primitive-spacing-xxxs);
-    width: 100%;
-}
-
-.umds-modal__footer {
-  display: flex;
-  gap: var(--umds-primitive-spacing-xxxs);
-  margin-top: var(--umds-primitive-spacing-xs);
-  justify-content: center;
-  width: 100%;
-}
-
-@keyframes umds-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes umds-modal-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}