welcome-ui 8.3.0 → 9.0.0-alpha.0

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

@@ -0,0 +1,81 @@
+import { ComponentProps, default as React } from 'react';
+/**
+ * The following source code is mainly inspired by
+ * https://github.com/pluralsight/classic-design-system/blob/08f0962dec18d99e1799a16c7b7eac86f01cbc27/packages/util/src/primatives.ts
+ */
+export type As<BaseProps = any> = React.ElementType<BaseProps>;
+/**
+ * Omit will not distribute over unions by default, this utility type will
+ * distribute it, allowing to omit keys from each member of the union.
+ *
+ * @example
+ *  type A = { a: string; b: number }
+ *  type B = { a: string; c: boolean }
+ *  type Union = A | B
+ *
+ *  // Without DistributiveOmit
+ *  type Test1 = Omit<Union, 'a'> // never  (because 'a' is in both A and B)
+ *  type Test2 = Omit<Union, 'b'> // B      (because 'b' is not in B)
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+/**
+ * Injects in given props the one of the element
+ */
+export type ForwardRefProps<Props extends EmptyProps, CompType extends React.ElementType<any>> = MergeProps<Props, ComponentProps<CompType>>;
+export interface ForwardRefWithAsRenderFunction<DefaultComponentType extends As, ComponentProps extends PropsType = Record<string, any>> {
+    (props: PropsFromAs<DefaultComponentType, ComponentProps>, ref: React.Ref<React.ElementRef<DefaultComponentType>>): null | React.ReactElement;
+    /**
+     * defaultProps are not supported on render functions
+     */
+    defaultProps?: never;
+    displayName?: string;
+    /**
+     * propTypes are not supported on render functions
+     */
+    propTypes?: never;
+}
+export interface FunctionComponentWithAs<DefaultComponentType extends As, ComponentProps extends PropsType> {
+    /**
+     * Inherited from React.FunctionComponent with modification to support `as`
+     */
+    <CompType extends As = DefaultComponentType>(props: PropsWithAs<CompType, ComponentProps>, context?: any): null | React.ReactElement<any, any>;
+    /**
+     * Inherited from React.FunctionComponent
+     */
+    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
+    displayName?: string;
+}
+/**
+ * This will merge two prop objects, giving P1 priority over P2
+ * In other words, any props in P1 that are also in P2 will override the ones in P2
+ * This is useful when combining the props of the `as` component with your own props
+ */
+export type MergeProps<P1 = EmptyProps, P2 = EmptyProps> = DistributiveOmit<P2, keyof P1> & P1;
+/**
+ * Get the props of a component with `as` support
+ * This will take care of the ref and the merging of the props
+ */
+export type PropsFromAs<CompType extends As, ComponentProps extends PropsType> = React.PropsWithoutRef<PropsWithAs<CompType, ComponentProps>>;
+/**
+ * Props of a component with `as` support
+ */
+export type PropsWithAs<CompType extends As, ComponentProps extends PropsType> = MergeProps<WithAs<CompType, ComponentProps>, React.ComponentProps<CompType>>;
+/**
+ * An empty object type
+ */
+type EmptyProps = Record<never, never>;
+/**
+ * PropsType can either be an object or null/undefined
+ */
+type PropsType = null | Record<string, any>;
+/**
+ * Adds the `as` prop to a component's props
+ */
+type WithAs<DefaultComponentType extends As, ComponentProps extends EmptyProps> = MergeProps<{
+    as?: DefaultComponentType;
+}, ComponentProps>;
+/**
+ * Wraps a component with a forwardRef and adds the `as` prop support
+ */
+export declare function forwardRefWithAs<ComponentProps extends PropsType, DefaultComponentType extends As = 'div'>(render: ForwardRefWithAsRenderFunction<DefaultComponentType, ComponentProps>): FunctionComponentWithAs<DefaultComponentType, ComponentProps>;
+export {};

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

@@ -1,10 +1,3 @@
-export * from './field-styles';
-export * from './format-bytes';
-export * from './hex-to-rgba';
-export * from './overflow-ellipsis';
-export * from './throttle';
+export * from './classNames';
+export * from './forwardRefWithAs';
 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/use-screens.d.ts

@@ -0,0 +1,11 @@
+import { default as tokens } from '../theme/tokens.json';
+type ScreenSize = keyof Omit<typeof tokens.breakpoint, '$type'>;
+type Screens = Record<ScreenSize, number>;
+/**
+ * A custom hook to retrieve the screen sizes defined in the theme tokens.
+ * @returns An object containing the screen sizes defined in the theme tokens,
+ * with keys as screen names and absolute values.
+ * Only supports number values (e.g. no 'rem', '%', etc.).
+ */
+export declare function useScreens(): Screens;
+export {};

package/dist/types/utils/use-screens.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+/**
+ * Merges multiple refs into a single ref callback.
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (element: T) => void;
+/**
+ * Sets the given ref to the provided element.
+ */
+export declare function setRef<T>(ref?: Ref<T>, element?: T): void;
+/**
+ * Forks two refs into a single ref.
+ * @returns A tuple containing the current ref and the merged refs function. The current ref should be used to access the DOM element, while the merged refs function should be passed to the component.
+ */
+export declare function useForkRef<T>(refA?: Ref<T>, refB?: Ref<T>): [React.MutableRefObject<null | T>, (instance: T) => void];

package/dist/use-viewport-CgrficYB.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect as n, useLayoutEffect as o, useState as d } from "react";
+const r = typeof window > "u" ? n : o;
+function w() {
+  const [t, e] = d({ height: void 0, width: void 0 });
+  return r(() => {
+    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 {
+  r as a,
+  w as u
+};

package/dist/utils-DfTXitRb.js

@@ -0,0 +1,117 @@
+"use client";
+import { g as J } from "./_commonjsHelpers-CXJ7dpIk.js";
+const Y = {
+  "custom-header": "_custom-header_191j7_2",
+  "date-picker": "_date-picker_191j7_9",
+  "time-picker": "_time-picker_191j7_12",
+  "date-time-picker": "_date-time-picker_191j7_15"
+};
+var u, m;
+function H() {
+  if (m) return u;
+  m = 1;
+  var o = 1 / 0, i = 9007199254740991, a = 17976931348623157e292, f = NaN, p = "[object Function]", _ = "[object GeneratorFunction]", I = "[object Symbol]", h = /^\s+|\s+$/g, M = /^[-+]0x[0-9a-f]+$/i, T = /^0b[01]+$/i, j = /^0o[0-7]+$/i, D = /^(?:0|[1-9]\d*)$/, N = parseInt, d = Object.prototype, b = d.toString, A = Math.ceil, E = Math.max;
+  function F(e, r, t, n) {
+    for (var G = -1, l = E(A((r - e) / (t || 1)), 0), g = Array(l); l--; )
+      g[++G] = e, e += t;
+    return g;
+  }
+  function k(e) {
+    return function(r, t, n) {
+      return n && typeof n != "number" && S(r, t, n) && (t = n = void 0), r = s(r), t === void 0 ? (t = r, r = 0) : t = s(t), n = n === void 0 ? r < t ? 1 : -1 : s(n), F(r, t, n);
+    };
+  }
+  function O(e, r) {
+    return r = r ?? i, !!r && (typeof e == "number" || D.test(e)) && e > -1 && e % 1 == 0 && e < r;
+  }
+  function S(e, r, t) {
+    if (!c(t))
+      return !1;
+    var n = typeof r;
+    return (n == "number" ? R(t) && O(r, t.length) : n == "string" && r in t) ? x(t[r], e) : !1;
+  }
+  function x(e, r) {
+    return e === r || e !== e && r !== r;
+  }
+  function R(e) {
+    return e != null && L(e.length) && !w(e);
+  }
+  function w(e) {
+    var r = c(e) ? b.call(e) : "";
+    return r == p || r == _;
+  }
+  function L(e) {
+    return typeof e == "number" && e > -1 && e % 1 == 0 && e <= i;
+  }
+  function c(e) {
+    var r = typeof e;
+    return !!e && (r == "object" || r == "function");
+  }
+  function $(e) {
+    return !!e && typeof e == "object";
+  }
+  function q(e) {
+    return typeof e == "symbol" || $(e) && b.call(e) == I;
+  }
+  function s(e) {
+    if (!e)
+      return e === 0 ? e : 0;
+    if (e = B(e), e === o || e === -1 / 0) {
+      var r = e < 0 ? -1 : 1;
+      return r * a;
+    }
+    return e === e ? e : 0;
+  }
+  function B(e) {
+    if (typeof e == "number")
+      return e;
+    if (q(e))
+      return f;
+    if (c(e)) {
+      var r = typeof e.valueOf == "function" ? e.valueOf() : e;
+      e = c(r) ? r + "" : r;
+    }
+    if (typeof e != "string")
+      return e === 0 ? e : +e;
+    e = e.replace(h, "");
+    var t = T.test(e);
+    return t || j.test(e) ? N(e.slice(2), t ? 2 : 8) : M.test(e) ? f : +e;
+  }
+  var C = k();
+  return u = C, u;
+}
+var P = H();
+const U = /* @__PURE__ */ J(P), y = [
+  { label: "January", value: 0 },
+  { label: "February", value: 1 },
+  { label: "March", value: 2 },
+  { label: "April", value: 3 },
+  { label: "May", value: 4 },
+  { label: "June", value: 5 },
+  { label: "July", value: 6 },
+  { label: "August", value: 7 },
+  { label: "September", value: 8 },
+  { label: "October", value: 9 },
+  { label: "November", value: 10 },
+  { label: "December", value: 11 }
+], z = /* @__PURE__ */ new Date(), K = (o, i = 15) => {
+  if (!o)
+    return null;
+  let a = new Date(o);
+  isNaN(a.getTime()) && (a = /* @__PURE__ */ new Date());
+  const f = Math.ceil(a.getMinutes() / i) * i;
+  return new Date(a.setMinutes(f, 0, 0));
+}, Q = (o) => o ? y.map(({ value: i }) => ({
+  label: o.localize.month(i),
+  value: i
+})) : y, V = (o, i) => U(o, i + 1).map((a) => ({
+  label: a.toString(),
+  value: a
+})).reverse();
+export {
+  z as D,
+  Q as a,
+  V as b,
+  K as g,
+  Y as s
+};

package/dist/utils.css

@@ -0,0 +1 @@
+@layer components{._custom-header_191j7_2{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg);text-align:left}._date-picker_191j7_9{text-align:left}._time-picker_191j7_12{text-align:center}._date-time-picker_191j7_15{position:relative;display:inline-flex;flex-wrap:nowrap}._date-time-picker_191j7_15 div:first-child{margin-right:-1px}._date-time-picker_191j7_15 ._date-picker_191j7_9{border-top-right-radius:0;border-bottom-right-radius:0}._date-time-picker_191j7_15 ._time-picker_191j7_12{border-top-left-radius:0;border-bottom-left-radius:0}}

package/dist/utils.js

@@ -0,0 +1,7 @@
+"use client";
+import { c as r } from "./classNames-qiokGROM.js";
+import { f } from "./forwardRefWithAs-8eP3ZN15.js";
+export {
+  r as classNames,
+  f as forwardRefWithAs
+};

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "welcome-ui",
-  "version": "8.3.0",
+  "version": "9.0.0-alpha.0",
   "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.mjs",
-      "require": "./dist/theme.mjs"
+      "import": "./dist/theme.js"
     },
     "./utils": {
       "types": "./dist/types/utils/index.d.ts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.mjs"
+      "import": "./dist/utils.js"
     },
+    "./*.css": "./dist/*.css",
     "./*": {
       "types": "./dist/types/components/*/index.d.ts",
-      "import": "./dist/*.mjs",
-      "require": "./dist/*.mjs"
+      "import": "./dist/*.js"
     },
     "./*.d.ts": {
       "types": "./*.d.ts"
@@ -29,6 +28,8 @@
   "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": {
@@ -54,7 +55,7 @@
   },
   "dependencies": {
     "@ariakit/react": "0.4.15",
-    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@juggle/resize-observer": "^3.4.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
@@ -64,35 +65,39 @@
     "lodash.range": "^3.2.0",
     "lottie-light-react": "^2.4.0",
     "match-sorter": "^8.0.0",
-    "react-datepicker": "^4.16.0",
-    "react-dropzone": "^14.3.5",
+    "react-datepicker": "^8.4.0",
+    "react-dropzone": "^14.3.8",
     "react-flatten-children": "^1.0.0",
-    "react-hot-toast": "^2.4.1"
+    "react-hot-toast": "^2.6.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
     "@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.30.2",
-    "@types/react-datepicker": "^4.15.0",
+    "@types/react-datepicker": "^7.0.0",
     "jsdom": "^26.0.0",
-    "ramda": "^0.30.1",
+    "lodash.merge": "^4.6.2",
+    "ramda": "^0.31.3",
     "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.3",
-    "vite-plugin-static-copy": "^2.3.0",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^4.0.0",
-    "react": "^18.3.1",
-    "styled-components": "^6.1.15"
+    "react": "^18.3.1 || ^19.0.0",
+    "styled-components": "^6.1.15",
+    "tailwindcss": "^4.1.11"
   },
   "homepage": "https://welcome-ui.com"
 }

package/dist/AXB53BZF-XKOjjeWO.mjs

@@ -1,25 +0,0 @@
-"use client";
-import { u } from "./P4IRICAX-CWSZLTGz.mjs";
-import { a as c } from "./VGCJ63VH-C0UPBY-5.mjs";
-import { f as l, c as p, h as D, _ as m, i as g, g as a, s as v } from "./LVA2YJMS-C-kJ1lkr.mjs";
-var f = "button", d = p(
-  function(r) {
-    var s = r, { store: o } = s, e = m(s, ["store"]);
-    const i = c();
-    o = o || i, g(
-      o,
-      process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
-    );
-    const n = o.useState("contentElement");
-    return e = a({
-      "aria-haspopup": v(n, "dialog")
-    }, e), e = u(a({ store: o }, e)), e;
-  }
-), P = l(function(r) {
-  const s = d(r);
-  return D(f, s);
-});
-export {
-  P as D,
-  d as u
-};

package/dist/Accordion.mjs

@@ -1,98 +0,0 @@
-"use client";
-import { j as o } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { cloneElement as m } from "react";
-import "./Icon.mjs";
-import { R as p } from "./index-CYmF7qCH.mjs";
-import { forwardRef as u } from "./System.mjs";
-import t, { th as i } from "@xstyled/styled-components";
-import { D as f } from "./P4IRICAX-CWSZLTGz.mjs";
-import { d as g, e as h } from "./VGCJ63VH-C0UPBY-5.mjs";
-const x = t.divBox`
-  ${i("accordions.wrapper")};
-  transition: medium;
-
-  &:hover {
-    border-color: neutral-50;
-  }
-`, n = t.divBox`
-  flex-shrink: 0;
-  ${i("accordions.icon")};
-  transform: rotate3d(0);
-  transition: medium;
-  width: 32;
-  height: 32;
-  color: inherit;
-  display: flex;
-  border-radius: 16;
-
-  & *:first-child {
-    margin: auto;
-  }
-`, $ = t(f)`
-  ${i("accordions.title")};
-  width: 100%;
-  padding: ${i("accordions.padding")};
-  background-color: transparent;
-  border: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: lg;
-
-  &[aria-expanded='true'] {
-    ${n} {
-      transform: rotate3d(0, 0, 1, 90deg);
-    }
-  }
-
-  &:focus,
-  &:hover {
-    cursor: pointer;
-    ${n} {
-      background-color: neutral-30;
-    }
-  }
-
-  &:focus {
-    outline: 0;
-    ${n} {
-      color: inherit;
-    }
-  }
-`, j = t(g)`
-  display: grid;
-  grid-template-rows: 0fr;
-  transition-property: grid-template-rows;
-  transition-timing-function: linear;
-  transition-duration: 200ms;
-  animation-duration: 200ms;
-
-  > * {
-    overflow: hidden;
-    padding: 0;
-  }
-
-  &[data-enter] {
-    grid-template-rows: 1fr;
-  }
-`, v = t.div`
-  ${i("accordions.content")};
-  padding: ${i("accordions.padding")};
-  padding-top: 0;
-  color: neutral-70;
-`, B = u(
-  ({ children: e, dataTestId: r, icon: d = /* @__PURE__ */ o.jsx(p, {}), store: s, title: c, ...a }, l) => /* @__PURE__ */ o.jsxs(x, { "data-testid": r, ref: l, ...a, children: [
-    /* @__PURE__ */ o.jsxs($, { "data-testid": r ? `${r}-title` : void 0, store: s, children: [
-      c,
-      /* @__PURE__ */ o.jsx(n, { children: m(d, { size: "sm" }) })
-    ] }),
-    /* @__PURE__ */ o.jsx(j, { "data-testid": r ? `${r}-content` : void 0, store: s, children: /* @__PURE__ */ o.jsx("div", { children: /* @__PURE__ */ o.jsx(v, { children: e }) }) })
-  ] })
-);
-function E(e) {
-  return h({ animated: !0, ...e });
-}
-export {
-  B as Accordion,
-  E as useAccordion
-};

package/dist/Alert.mjs

@@ -1,138 +0,0 @@
-"use client";
-import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
-import R, { Children as j, cloneElement as m } from "react";
-import { Box as B } from "./Box.mjs";
-import { Button as w } from "./Button.mjs";
-import { CloseButton as _ } from "./CloseButton.mjs";
-import { forwardRef as d } from "./System.mjs";
-import c, { th as r, css as f, system as D } from "@xstyled/styled-components";
-import { Text as O } from "./Text.mjs";
-import { VariantIcon as q } from "./VariantIcon.mjs";
-const x = c.divBox`
-  display: flex;
-  gap: md;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex: 1;
-`, A = c(q)`
-  position: absolute;
-  align-self: flex-start;
-`, F = c.divBox(({ icon: o, isFullWidth: e, size: n, variant: i }) => f`
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    max-width: ${e ? "100%" : "max-content"};
-    ${r("alerts.default")};
-    ${r(`alerts.${i}`)};
-    ${r(`alerts.sizes.${n}`)};
-
-    ${o !== null && n === "sm" && f`
-      ${x} {
-        margin-left: calc(${r("icons.sm")} + ${r("space.md")});
-      }
-    `}
-
-    ${o !== null && n === "md" && f`
-      ${x} {
-        margin-left: calc(${r("icons.md")} + ${r("space.lg")});
-        gap: ${r("space.lg")};
-        font-size: ${r("fontSizes.md")};
-      }
-
-      ${A} {
-        margin-top: -3;
-      }
-    `}
-  `), G = c(O)(({ hasCloseButton: o, variant: e }) => f`
-    font-weight: medium;
-    ${r("alerts.title.default")};
-    ${r(`alerts.title.sizes.${e}`)};
-    margin-right: ${o ? "xl" : void 0};
-    ${D};
-  `), b = ({
-  children: o,
-  dataTestId: e,
-  hasCloseButton: n,
-  variant: i
-}) => /* @__PURE__ */ s.jsx(G, { "data-testid": e, hasCloseButton: n, variant: i, children: o }), H = d(
-  ({
-    children: o,
-    cta: e,
-    dataTestId: n,
-    handleClose: i,
-    icon: p,
-    isFullWidth: S,
-    size: l = "sm",
-    variant: a = "default",
-    ...C
-  }, I) => {
-    const k = n ? `${n}-close-button` : void 0, E = a === "beige" ? "default" : a, u = a === "ai", T = j.toArray(o).map((t) => t.type === b ? m(t, { hasCloseButton: !!i, variant: l }) : t), $ = (t) => {
-      var y;
-      if (t) {
-        if (t.type === v)
-          return m(t, {
-            ai: u,
-            size: l,
-            variant: u ? "primary" : void 0
-          });
-        if (t.type === h)
-          return m(t, {
-            ai: u,
-            size: l
-          });
-        if ((y = t.props) != null && y.children)
-          return m(t, {
-            ...t.props,
-            children: j.map(
-              t.props.children,
-              (V) => $(V)
-            )
-          });
-      }
-      return t;
-    }, g = R.isValidElement(e) ? $(e) : e;
-    return /* @__PURE__ */ s.jsxs(
-      F,
-      {
-        "data-testid": n,
-        icon: p,
-        isFullWidth: S,
-        ref: I,
-        size: l,
-        variant: a,
-        ...C,
-        children: [
-          !!i && /* @__PURE__ */ s.jsx(
-            _,
-            {
-              dataTestId: k,
-              onClick: i,
-              position: "absolute",
-              right: "sm",
-              size: "xs",
-              top: "sm"
-            }
-          ),
-          p !== null && /* @__PURE__ */ s.jsx(A, { icon: p, size: l, variant: E }),
-          /* @__PURE__ */ s.jsxs(x, { children: [
-            /* @__PURE__ */ s.jsx(B, { flex: 1, children: T }),
-            !!g && /* @__PURE__ */ s.jsx(B, { alignItems: "center", display: "flex", gap: "sm", children: g })
-          ] })
-        ]
-      }
-    );
-  }
-), v = d(
-  ({ variant: o = "secondary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
-), h = d(
-  ({ variant: o = "tertiary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
-), X = Object.assign(H, {
-  Button: v,
-  SecondaryButton: h,
-  Title: b
-});
-export {
-  X as Alert
-};

package/dist/AspectRatio.mjs

@@ -1,41 +0,0 @@
-"use client";
-import { j as i } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { forwardRef as s } from "./System.mjs";
-import r, { css as n } from "@xstyled/styled-components";
-const p = r.divBox(
-  ({ ratio: t }) => n`
-    position: relative;
-
-    & > * {
-      overflow: hidden;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    & > img,
-    & > video {
-      object-fit: cover;
-    }
-
-    &:before {
-      height: 0;
-      content: '';
-      display: block;
-      padding-bottom: ${1 / t * 100}%;
-    }
-  `
-), c = s(
-  ({ ratio: t = 4 / 3, ...o }, e) => /* @__PURE__ */ i.jsx(p, { ratio: t, ref: e, ...o })
-);
-c.displayName = "AspectRatio";
-export {
-  c as AspectRatio
-};