welcome-ui 0.0.0-dev.1761316648080 → 0.0.0-dev.1761576812962

package/dist/types/theme/typography.d.ts

@@ -0,0 +1,133 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeProps, ThemeValues } from '.';
+export type ThemeFontSizes = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getFontSizes: (unit: string, theme: ThemeValues) => ThemeFontSizes;
+export type ThemeLineHeights = {
+    [key: number]: number | string;
+    h0: number | string;
+    h1: number | string;
+    h2: number | string;
+    h3: number | string;
+    h4: number | string;
+    h5: number | string;
+    h6: number | string;
+    html: number | string;
+    lg: number | string;
+    md: number | string;
+    sm: number | string;
+    'subtitle-md': number | string;
+    'subtitle-sm': number | string;
+    xs: number | string;
+};
+export declare const getLineHeights: ({ defaultLineHeight, toRem, }: {
+    defaultLineHeight: number;
+    toRem: (value: number) => string;
+}) => ThemeLineHeights;
+export type ThemeFontWeights = {
+    [key: string]: number;
+    bold: number;
+    medium: number;
+    regular: number;
+};
+export declare const fontWeights: ThemeFontWeights;
+export type ThemeLetterSpacings = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    html: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getLetterSpacings: ({ defaultLetterSpacing, toRem, }: {
+    defaultLetterSpacing: string;
+    toRem: (value: number) => string;
+}) => ThemeLetterSpacings;
+export type ThemeTextsFontWeights = {
+    [key: string]: number;
+    h0: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+    lg: number;
+    md: number;
+    sm: number;
+    'subtitle-md': number;
+    'subtitle-sm': number;
+    xs: number;
+};
+export declare const getTextsFontWeights: (theme: ThemeValues) => ThemeTextsFontWeights;
+export type ThemeTextsFontFamily = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsFontFamily: (theme: ThemeValues) => ThemeTextsFontFamily;
+export type ThemeTextsTextTransform = {
+    [key: string]: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsTextTransform: () => ThemeTextsTextTransform;
+export type ThemeTextsFontColors = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const getTextFontColors: (theme: ThemeValues) => ThemeTextsFontColors;
+export type ThemeTexts = {
+    [key: string]: Partial<{
+        color: CSSObject['color'];
+        fontFamily: CSSObject['fontFamily'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        letterSpacing: CSSObject['letterSpacing'];
+        lineHeight: CSSObject['lineHeight'];
+        textTransform: CSSObject['textTransform'];
+    }>;
+};
+export declare const getTexts: (theme: ThemeValues) => ThemeTexts;
+export type ThemeFonts = {
+    headings: string;
+    icons: string;
+    texts: string;
+};
+export declare const getFonts: (defaultFontFamily: ThemeProps["defaultFontFamily"], headingFontFamily: ThemeProps["headingFontFamily"], iconFontFamily: ThemeProps["iconFontFamily"]) => ThemeFonts;

package/dist/types/theme/underline.d.ts

@@ -0,0 +1,9 @@
+import { css } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeUnderline = {
+    default: ReturnType<typeof css>;
+    hover: ReturnType<typeof css>;
+};
+export declare const getUnderline: ({ colors }: {
+    colors: ThemeColors;
+}) => ThemeUnderline;

package/dist/types/utils/field-styles.d.ts

@@ -0,0 +1,17 @@
+import { css } from '@xstyled/styled-components';
+export type DefaultFieldIconSize = 'xs' | 'sm';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export declare const FIELD_ICON_SIZE: {
+    [key in Size]: DefaultFieldIconSize;
+};
+export type DefaultFieldStylesProps = Partial<{
+    hasIcon?: boolean;
+    iconPlacement?: 'both' | 'left' | 'right';
+    isClearable?: boolean;
+    size: Size;
+    transparent?: boolean;
+    variant: 'danger' | 'success' | 'warning';
+}>;
+type DefaultFieldStyles = (args: DefaultFieldStylesProps) => ReturnType<typeof css>;
+export declare const defaultFieldStyles: DefaultFieldStyles;
+export {};

package/dist/types/utils/format-bytes.d.ts

@@ -0,0 +1 @@
+export declare const formatBytes: (bytes: number, decimals?: number) => string;

package/dist/types/utils/get-max-width-height.d.ts

@@ -0,0 +1 @@
+export declare const getMax: (width: string, height?: string) => string;

package/dist/types/utils/hex-to-rgb.d.ts

@@ -0,0 +1 @@
+export declare const hexToRGB: (hex: string) => string;

package/dist/types/utils/hex-to-rgba.d.ts

@@ -0,0 +1 @@
+export declare const hexToRGBA: (hex: string, transparency?: number) => string;

package/dist/types/utils/hide-focus-rings-root.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
+interface HideFocusRingsRootProps {
+    children?: React.ReactNode;
+    reactRootId: string;
+}
+export declare const HideFocusRingsRoot: React.FC<HideFocusRingsRootProps>;
+export {};

package/dist/types/utils/index.d.ts

@@ -1,4 +1,10 @@
-export * from './classNames';
-export * from './forwardRefWithAs';
+export * from './field-styles';
+export * from './format-bytes';
+export * from './hex-to-rgba';
+export * from './overflow-ellipsis';
+export * from './throttle';
 export * from './ts-utils';
 export * from './use-copy-text';
+export * from './use-fork-ref';
+export * from './use-isomorphic-layout-effect';
+export * from './use-viewport';

package/dist/types/utils/overflow-ellipsis.d.ts

@@ -0,0 +1 @@
+export declare const overflowEllipsis: import('styled-components').RuleSet<object>;

package/dist/types/utils/use-create-portal.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook that mimic the React createPortal function in order to make it SSR friendly
+ */
+export declare function useCreatePortal(disable?: boolean): ((children: React.ReactNode) => any) | ((children: React.ReactNode, container?: DocumentFragment | Element, key?: null | string) => import('react').ReactPortal);

package/dist/types/utils/use-fork-ref.d.ts

@@ -0,0 +1,3 @@
+import { ForwardedRef } from 'react';
+export declare function setRef(ref: ForwardedRef<unknown>, value: unknown): void;
+export declare function useForkRef(refA: ForwardedRef<unknown>, refB: ForwardedRef<unknown>): (instance: unknown) => void;

package/dist/types/utils/wrap-children.d.ts

@@ -0,0 +1 @@
+export declare const wrapChildren: (children?: JSX.Element | string) => unknown;

package/dist/use-fork-ref-CUZErtAC.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { useMemo as e } from "react";
+function o(u, n) {
+  typeof u == "function" ? u(n) : u && (u.current = n);
+}
+function l(u, n) {
+  return e(() => u == null && n == null ? null : (t) => {
+    o(u, t), o(n, t);
+  }, [u, n]);
+}
+export {
+  o as s,
+  l as u
+};

package/dist/use-isomorphic-layout-effect-Izr-e2pi.mjs

@@ -0,0 +1,6 @@
+"use client";
+import { useEffect as e, useLayoutEffect as o } from "react";
+const f = typeof window > "u" ? e : o;
+export {
+  f as u
+};

package/dist/use-viewport-CWpjoHXy.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useState as n } from "react";
+import { u as o } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+function w() {
+  const [t, e] = n({ height: void 0, width: void 0 });
+  return o(() => {
+    e({ height: window.innerHeight, width: window.innerWidth });
+    function i() {
+      e({ height: window.innerHeight, width: window.innerWidth });
+    }
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, []), t;
+}
+export {
+  w as u
+};

package/dist/utils.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { F as y, d } from "./field-styles-CfVLcVQp.mjs";
+import { f as E } from "./format-bytes-gST0dTWd.mjs";
+import { h as T } from "./hex-to-rgba-BIDK-3ab.mjs";
+import { o as h } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+import { t as L } from "./throttle-BDBzFeFj.mjs";
+import { c as p } from "./index-BhcLigYU.mjs";
+import { useState as a, useCallback as i } from "react";
+import { s as g, u as v } from "./use-fork-ref-CUZErtAC.mjs";
+import { u as k } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+import { u as B } from "./use-viewport-CWpjoHXy.mjs";
+function c(e, r) {
+  const [s, t] = a();
+  return [i(() => {
+    let o;
+    typeof e == "number" || typeof e == "string" ? o = e.toString() : e.current instanceof HTMLInputElement ? o = e.current.value : e.current instanceof HTMLElement && (o = e.current.textContent);
+    const f = p(o);
+    t(f), r && setTimeout(t, r);
+  }, [e, r]), s];
+}
+export {
+  y as FIELD_ICON_SIZE,
+  d as defaultFieldStyles,
+  E as formatBytes,
+  T as hexToRGBA,
+  h as overflowEllipsis,
+  g as setRef,
+  L as throttle,
+  c as useCopyText,
+  v as useForkRef,
+  k as useIsomorphicLayoutEffect,
+  B as useViewportSize
+};

package/dist/wrap-children-CRHMWYug.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { j as t } from "./jsx-runtime-Bqq1Hxg9.mjs";
+import n from "react";
+const a = (e) => n.Children.toArray(e).map(
+  (r) => (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */
+    ["number", "string"].includes(typeof r) ? /* @__PURE__ */ t.jsx("span", { children: r }, r) : r
+  )
+);
+export {
+  a as w
+};

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "welcome-ui",
-  "version": "0.0.0-dev.1761316648080",
-  "description": "Customizable design system with react, typescript, tailwindcss and ariakit.",
+  "version": "0.0.0-dev.1761576812962",
+  "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
   ],
-  "type": "module",
   "exports": {
     "./fonts/*": "./dist/fonts/*",
     "./theme": {
       "types": "./dist/types/theme/index.d.ts",
-      "import": "./dist/theme.js"
+      "import": "./dist/theme.mjs",
+      "require": "./dist/theme.mjs"
     },
     "./utils": {
       "types": "./dist/types/utils/index.d.ts",
-      "import": "./dist/utils.js"
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.mjs"
     },
-    "./*.css": "./dist/*.css",
-    "./scss/*": "./dist/scss/*.scss",
     "./*": {
       "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/*.js"
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.mjs"
     },
     "./*.d.ts": {
       "types": "./*.d.ts"
@@ -29,8 +29,6 @@
   "scripts": {
     "start": "vite build --watch",
     "build": "vite build",
-    "build:tokens": "style-dictionary build --config=style-dictionary.json --verbose",
-    "theme:generate": "yarn build:tokens && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
     "test": "vitest"
   },
   "repository": {
@@ -38,17 +36,14 @@
     "url": "git+https://github.com/WTTJ/welcome-ui.git"
   },
   "keywords": [
+    "design-system",
     "react",
-    "typescript",
-    "tailwindcss",
-    "scss",
-    "css",
     "ariakit",
-    "design-system",
+    "styled-components",
+    "styled-system",
     "ui-library",
     "ui",
     "ux",
-    "jungle",
     "welcome",
     "WTTJ"
   ],
@@ -58,8 +53,8 @@
     "url": "https://github.com/WTTJ/welcome-ui/issues"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.19",
-    "@emotion/is-prop-valid": "^1.4.0",
+    "@ariakit/react": "0.4.15",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@juggle/resize-observer": "^3.4.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
@@ -70,36 +65,34 @@
     "lottie-light-react": "^2.4.0",
     "match-sorter": "^8.0.0",
     "react-datepicker": "^8.4.0",
-    "react-dropzone": "^14.3.8",
+    "react-dropzone": "^14.3.5",
     "react-flatten-children": "^1.0.0",
-    "react-hot-toast": "^2.6.0"
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/ramda": "^0.31.1",
+    "@types/ramda": "^0.30.2",
     "@types/react-datepicker": "^7.0.0",
     "jsdom": "^26.0.0",
-    "lodash.merge": "^4.6.2",
-    "ramda": "^0.31.3",
+    "ramda": "^0.30.1",
     "release-it": "^18.1.2",
     "rollup": "^4.39.0",
     "rollup-preserve-directives": "^1.1.3",
-    "style-dictionary": "^5.0.4",
-    "tsx": "^4.20.6",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-static-copy": "^2.3.0",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
-    "react": "^18.3.1 || ^19.0.0",
-    "tailwindcss": "^4.1.11"
+    "@xstyled/styled-components": "^4.0.0",
+    "react": "^18.3.1",
+    "styled-components": "^6.1.15"
   },
   "homepage": "https://welcome-ui.com"
 }

package/dist/2W3RN7C5-bkX-rIa3.js

@@ -1,61 +0,0 @@
-"use client";
-import { c as F, _ as p, O as d, A as I, L as q, u as _, d as x, p as Y, a as T, W as j, X as w, j as L, h as H, Y as V, Z as W, f as X, b as Z } from "./OE2EFRVA-C3721cM3.js";
-import { useRef as C, useState as D, useEffect as z } from "react";
-var G = "button";
-function M(s) {
-  if (!s.isTrusted) return !1;
-  const t = s.currentTarget;
-  return s.key === "Enter" ? d(t) || t.tagName === "SUMMARY" || t.tagName === "A" : s.key === " " ? d(t) || t.tagName === "SUMMARY" || t.tagName === "INPUT" || t.tagName === "SELECT" : !1;
-}
-var J = Symbol("command"), Q = F(
-  function(t) {
-    var i = t, { clickOnEnter: m = !0, clickOnSpace: u = !0 } = i, r = p(i, ["clickOnEnter", "clickOnSpace"]);
-    const c = C(null), [K, R] = D(!1);
-    z(() => {
-      c.current && R(d(c.current));
-    }, []);
-    const [U, k] = D(!1), f = C(!1), y = I(r), [E, A] = q(r, J, !0), P = r.onKeyDown, O = _((e) => {
-      P == null || P(e);
-      const a = e.currentTarget;
-      if (e.defaultPrevented || E || y || !L(e) || H(a) || a.isContentEditable) return;
-      const o = m && e.key === "Enter", n = u && e.key === " ", g = e.key === "Enter" && !m, l = e.key === " " && !u;
-      if (g || l) {
-        e.preventDefault();
-        return;
-      }
-      if (o || n) {
-        const v = M(e);
-        if (o) {
-          if (!v) {
-            e.preventDefault();
-            const S = e, { view: $ } = S, B = p(S, ["view"]), N = () => w(a, B);
-            V() ? W(a, "keyup", N) : queueMicrotask(N);
-          }
-        } else n && (f.current = !0, v || (e.preventDefault(), k(!0)));
-      }
-    }), b = r.onKeyUp, h = _((e) => {
-      if (b == null || b(e), e.defaultPrevented || E || y || e.metaKey) return;
-      const a = u && e.key === " ";
-      if (f.current && a && (f.current = !1, !M(e))) {
-        e.preventDefault(), k(!1);
-        const o = e.currentTarget, n = e, { view: g } = n, l = p(n, ["view"]);
-        queueMicrotask(() => w(o, l));
-      }
-    });
-    return r = x(T(T({
-      "data-active": U || void 0,
-      type: K ? "button" : void 0
-    }, A), r), {
-      ref: Y(c, r.ref),
-      onKeyDown: O,
-      onKeyUp: h
-    }), r = j(r), r;
-  }
-);
-X(function(t) {
-  const i = Q(t);
-  return Z(G, i);
-});
-export {
-  Q as u
-};

package/dist/4I4MLMKD-DgPx2VDC.js

@@ -1,43 +0,0 @@
-"use client";
-import { u as p, P as _ } from "./Y67KZUMI-CtXJ_hZt.js";
-import { c as i, _ as v, d as l, p as h, a as n, f as P, b as m, i as D, u as x, x as E } from "./OE2EFRVA-C3721cM3.js";
-import { u as b } from "./ZTXFEM5L-BEA_1pIo.js";
-import { jsx as g } from "react/jsx-runtime";
-var A = "div", d = i(
-  function(s) {
-    var e = s, { store: r } = e, o = v(e, ["store"]);
-    const c = p();
-    return r = r || c, o = l(n({}, o), {
-      ref: h(r == null ? void 0 : r.setAnchorElement, o.ref)
-    }), o;
-  }
-);
-P(function(s) {
-  const e = d(s);
-  return m(A, e);
-});
-var C = "button", k = i(function(s) {
-  var e = s, { store: r } = e, o = v(e, ["store"]);
-  const c = p();
-  r = r || c, D(
-    r,
-    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
-  );
-  const u = o.onClick, f = x((t) => {
-    r == null || r.setAnchorElement(t.currentTarget), u == null || u(t);
-  });
-  return o = E(
-    o,
-    (t) => /* @__PURE__ */ g(_, { value: r, children: t }),
-    [r]
-  ), o = l(n({}, o), {
-    onClick: f
-  }), o = d(n({ store: r }, o)), o = b(n({ store: r }, o)), o;
-}), w = P(function(s) {
-  const e = k(s);
-  return m(C, e);
-});
-export {
-  w as P,
-  k as u
-};

package/dist/Accordion.css

@@ -1 +0,0 @@
-@layer components{._root_173le_2{background-color:var(--color-neutral-10);border:var(--border-width-sm) solid var(--color-neutral-30);border-radius:var(--radius-md);transition:var(--duration-medium)}._root_173le_2:hover{border-color:var(--color-neutral-50)}._icon_173le_11{flex-shrink:0;transform:rotate3d(0);transition:var(--duration-medium);padding:var(--spacing-sm);display:flex;border-radius:var(--radius-circle);color:var(--color-neutral-90)}._icon_173le_11 *:first-child{margin:auto}._disclosure_173le_23{width:100%;padding:var(--spacing-lg);background-color:transparent;border:0;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg)}._disclosure_173le_23[aria-expanded=true] ._icon_173le_11{transform:rotate3d(0,0,1,90deg)}._disclosure_173le_23:focus,._disclosure_173le_23:hover{cursor:pointer}._disclosure_173le_23:focus ._icon_173le_11,._disclosure_173le_23:hover ._icon_173le_11{background-color:var(--color-neutral-30)}._disclosure_173le_23:focus{outline:0}._disclosure_173le_23:focus ._icon_173le_11{color:inherit}._disclosure-content_173le_48{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-timing-function:linear;transition-duration:.2s;animation-duration:.2s}._disclosure-content_173le_48>*{overflow:hidden;padding:0}._disclosure-content_173le_48[data-enter]{grid-template-rows:1fr}._content-child_173le_63{padding:var(--spacing-lg);padding-top:0;color:var(--color-neutral-70);font-size:var(--font-size-sm)}}

package/dist/Accordion.js

@@ -1,45 +0,0 @@
-"use client";
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { D as d } from "./NMGNQVTG-a9HpYqEe.js";
-import { D as a } from "./T22PY7TE-BxbmImwX.js";
-import { u as k } from "./T22PY7TE-BxbmImwX.js";
-import { forwardRef as _ } from "react";
-import "./Icon-BisRi8B3.js";
-import { R as u } from "./index-Dcq5gh3E.js";
-import { Text as f } from "./Text.js";
-import { c as h } from "./index-PAaZGbyz.js";
-const p = "_root_173le_2", v = "_icon_173le_11", x = "_disclosure_173le_23", N = {
-  root: p,
-  icon: v,
-  disclosure: x,
-  "disclosure-content": "_disclosure-content_173le_48",
-  "content-child": "_content-child_173le_63"
-}, s = h(N), z = _(
-  ({ children: e, className: r, dataTestId: c, store: i, title: n, ...l }, m) => /* @__PURE__ */ t("div", { className: s("root", r), ref: m, ...l, children: [
-    /* @__PURE__ */ t(
-      d,
-      {
-        className: s("disclosure"),
-        "data-testid": c ? `${c}-title` : void 0,
-        store: i,
-        children: [
-          /* @__PURE__ */ o(f, { variant: "h5", children: n }),
-          /* @__PURE__ */ o("div", { className: s("icon"), children: /* @__PURE__ */ o(u, { size: "sm" }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ o(
-      a,
-      {
-        className: s("disclosure-content"),
-        "data-testid": c ? `${c}-content` : void 0,
-        store: i,
-        children: /* @__PURE__ */ o("div", { className: s("content-child"), children: e })
-      }
-    )
-  ] })
-);
-export {
-  z as Accordion,
-  k as useAccordion
-};

package/dist/Alert.css

@@ -1 +0,0 @@
-@layer components{._root_1c0qe_2{position:relative;display:flex;align-items:flex-start;width:100%;border-radius:var(--radius-lg);border:var(--border-width-sm) solid;padding:var(--padding);max-width:var(--maxWidth, max-content);background-color:var(--backgroundColor, var(--color-neutral-10));border-color:var(--borderColor, var(--color-neutral-30));color:var(--color, var(--color-neutral-80))}._size-sm_1c0qe_16{--padding: var(--spacing-lg)}._size-md_1c0qe_19{--padding: var(--spacing-xl)}._variant-ai_1c0qe_22{--backgroundColor: var(--color-violet-10);--borderColor: var(--color-violet-10);--color: var(--color-violet-90)}._variant-beige_1c0qe_27{--backgroundColor: var(--color-beige-20);--borderColor: var(--color-beige-20);--color: var(--color-beige-80)}._variant-danger_1c0qe_32{--backgroundColor: var(--color-red-10);--borderColor: var(--color-red-10);--color: var(--color-red-90)}._variant-info_1c0qe_37{--backgroundColor: var(--color-blue-10);--borderColor: var(--color-blue-10);--color: var(--color-blue-90)}._variant-success_1c0qe_42{--backgroundColor: var(--color-green-10);--borderColor: var(--color-green-10);--color: var(--color-green-90)}._variant-warning_1c0qe_47{--backgroundColor: var(--color-orange-10);--borderColor: var(--color-orange-10);--color: var(--color-orange-90)}._full-width_1c0qe_52{--maxWidth: 100%}._icon_1c0qe_55._size-sm_1c0qe_16 svg{margin-top:1px}._icon_1c0qe_55._size-sm_1c0qe_16 ._content_1c0qe_58{margin-left:var(--spacing-md)}._icon_1c0qe_55._size-md_1c0qe_19 svg{margin-top:-3px}._icon_1c0qe_55._size-md_1c0qe_19 ._content_1c0qe_58{margin-left:var(--spacing-lg)}._content_1c0qe_58{display:flex;gap:var(--spacing-md);flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1}._content-text_1c0qe_76{flex:1}._content-actions_1c0qe_79{display:flex;align-items:center;gap:var(--spacing-sm)}._variant-icon_1c0qe_84{align-self:start}._title_1c0qe_88{font-weight:var(--font-weight-500);margin-bottom:var(--titleMarginBottom)}._title-size-sm_1c0qe_93{--titleMarginBottom: var(--spacing-xs)}._title-size-md_1c0qe_96{--titleMarginBottom: var(--spacing-sm)}._title-close-button_1c0qe_99{margin-right:var(--spacing-xl)}._close-button_1c0qe_103{position:absolute;right:var(--spacing-sm);top:var(--spacing-sm)}}