@telia/teddy 0.0.37 → 0.0.38

package/dist/components/card/card-button.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const components_button_button = require("../button/button.cjs");
+function getButtonVariant(variant) {
+  switch (variant) {
+    case "purple-dark":
+      return "primary-negative";
+    default:
+      return "primary";
+  }
+}
+const Button = React.forwardRef(
+  ({ className, iconOnly = false, ...props }, forwardRef) => {
+    const context = React.useContext(components_card_card.RootContext);
+    const classes = clsx(
+      [components_card_card.styles[`${components_card_card.rootClassName}__button`]],
+      components_card_card.styles[components_card_card.actionElementIdentifier],
+      {
+        [components_card_card.styles[`${components_card_card.actionElementIdentifier}--disabled`]]: props.disabled
+      },
+      className
+    );
+    const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
+        ref,
+        variant: getButtonVariant(context == null ? void 0 : context.variant),
+        ...props,
+        className: classes
+      }
+    ) });
+  }
+);
+Button.displayName = "Button";
+exports.Button = Button;

package/dist/components/card/card-button.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Button as PrimitiveButton } from '../button';
+
+export type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
+    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
+};
+/**
+ * The button element is used when you want a trigger in the card
+ * When this card button element is used, the entire card is clickable
+ */
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & {
+    asChild?: boolean | undefined;
+    loading?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+} & {
+    iconOnly: true;
+    "aria-label": string;
+} & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & {
+    asChild?: boolean | undefined;
+    loading?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+} & {
+    iconOnly?: false | undefined;
+    "aria-label"?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
+    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/card/card-button.js

@@ -0,0 +1,42 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { RootContext, s as styles, rootClassName, actionElementIdentifier } from "./card.js";
+import { composeRefs } from "../../utils/composeRefs.js";
+import { Button as Button$1 } from "../button/button.js";
+function getButtonVariant(variant) {
+  switch (variant) {
+    case "purple-dark":
+      return "primary-negative";
+    default:
+      return "primary";
+  }
+}
+const Button = React__default.forwardRef(
+  ({ className, iconOnly = false, ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const classes = clsx(
+      [styles[`${rootClassName}__button`]],
+      styles[actionElementIdentifier],
+      {
+        [styles[`${actionElementIdentifier}--disabled`]]: props.disabled
+      },
+      className
+    );
+    const ref = composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
+        ref,
+        variant: getButtonVariant(context == null ? void 0 : context.variant),
+        ...props,
+        className: classes
+      }
+    ) });
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/components/card/card-content.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_box_box = require("../box/box.cjs");
+const Content = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Content.displayName = "Content";
+exports.Content = Content;

package/dist/components/card/card-content.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Box } from '../box';
+
+export type ContentProps = React.ComponentPropsWithoutRef<typeof Box>;
+/** The content for the card */
+export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-content.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Box } from "../box/box.js";
+const Content = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Content.displayName = "Content";
+export {
+  Content
+};

package/dist/components/card/card-footer.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const Footer = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__footer`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { justify: "end", align: "center", width: "100%", ...props, ref: forwardRef, className: classes });
+  }
+);
+Footer.displayName = "Footer";
+exports.Footer = Footer;

package/dist/components/card/card-footer.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+export type FooterProps = React.ComponentPropsWithoutRef<typeof Flex>;
+/** The Footer for the card */
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-footer.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Flex } from "../flex/flex.js";
+const Footer = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__footer`]], className);
+    return /* @__PURE__ */ jsx(Flex, { justify: "end", align: "center", width: "100%", ...props, ref: forwardRef, className: classes });
+  }
+);
+Footer.displayName = "Footer";
+export {
+  Footer
+};

package/dist/components/card/card-heading.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_heading_heading = require("../heading/heading.cjs");
+const Heading = React.forwardRef(
+  ({ className, as = "h2", ...props }, forwardRef) => {
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__heading`]], className);
+    const variant = props.variant ?? "title-200";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_heading_heading.Heading,
+      {
+        ...props,
+        ...!props.asChild ? { as, asChild: false } : { as: void 0, asChild: true },
+        variant,
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+exports.Heading = Heading;

package/dist/components/card/card-heading.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Heading as PrimitiveHeading } from '../heading';
+
+export type HeadingProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveHeading>>;
+/** The heading for the card */
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/card/card-heading.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Heading as Heading$1 } from "../heading/heading.js";
+const Heading = React__default.forwardRef(
+  ({ className, as = "h2", ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__heading`]], className);
+    const variant = props.variant ?? "title-200";
+    return /* @__PURE__ */ jsx(
+      Heading$1,
+      {
+        ...props,
+        ...!props.asChild ? { as, asChild: false } : { as: void 0, asChild: true },
+        variant,
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+export {
+  Heading
+};

package/dist/components/card/card-illustration.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const Illustration = React.forwardRef(
+  ({ className, children, rounded, inset: insetProps, ...props }, forwardRef) => {
+    const rootContext = React.useContext(components_card_card.RootContext);
+    const inset = insetProps || ((rootContext == null ? void 0 : rootContext.layout) === "rich-card" ? "top-right-left" : void 0);
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__illustration`]], className, [components_card_card.styles[`${components_card_card.rootClassName}__inset`]], {
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--top`]]: (inset == null ? void 0 : inset.includes("top")) || (inset == null ? void 0 : inset.includes("all")),
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--bottom`]]: (inset == null ? void 0 : inset.includes("bottom")) || (inset == null ? void 0 : inset.includes("all")),
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--left`]]: (inset == null ? void 0 : inset.includes("left")) || (inset == null ? void 0 : inset.includes("all")),
+      [components_card_card.styles[`${components_card_card.rootClassName}__inset--right`]]: (inset == null ? void 0 : inset.includes("right")) || (inset == null ? void 0 : inset.includes("all")),
+      [components_card_card.styles[`${components_card_card.rootClassName}__illustration--rounded`]]: rounded
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Illustration.displayName = "Illustration";
+exports.Illustration = Illustration;

package/dist/components/card/card-illustration.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+declare const insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
+export type IllustrationProps = React.ComponentPropsWithoutRef<'div'> & {
+    /** The inset allows make the image bleed out to the edges */
+    inset?: (typeof insetOptions)[number];
+    rounded?: boolean;
+};
+/** The illustration for the card */
+export declare const Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** The inset allows make the image bleed out to the edges */
+    inset?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
+    rounded?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/card/card-illustration.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { RootContext, s as styles, rootClassName } from "./card.js";
+const Illustration = React__default.forwardRef(
+  ({ className, children, rounded, inset: insetProps, ...props }, forwardRef) => {
+    const rootContext = React__default.useContext(RootContext);
+    const inset = insetProps || ((rootContext == null ? void 0 : rootContext.layout) === "rich-card" ? "top-right-left" : void 0);
+    const classes = clsx([styles[`${rootClassName}__illustration`]], className, [styles[`${rootClassName}__inset`]], {
+      [styles[`${rootClassName}__inset--top`]]: (inset == null ? void 0 : inset.includes("top")) || (inset == null ? void 0 : inset.includes("all")),
+      [styles[`${rootClassName}__inset--bottom`]]: (inset == null ? void 0 : inset.includes("bottom")) || (inset == null ? void 0 : inset.includes("all")),
+      [styles[`${rootClassName}__inset--left`]]: (inset == null ? void 0 : inset.includes("left")) || (inset == null ? void 0 : inset.includes("all")),
+      [styles[`${rootClassName}__inset--right`]]: (inset == null ? void 0 : inset.includes("right")) || (inset == null ? void 0 : inset.includes("all")),
+      [styles[`${rootClassName}__illustration--rounded`]]: rounded
+    });
+    return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref: forwardRef, children });
+  }
+);
+Illustration.displayName = "Illustration";
+export {
+  Illustration
+};

package/dist/components/card/card-line.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_box_box = require("../box/box.cjs");
+const tokens_spacing_variables = require("../../tokens/spacing/variables.cjs");
+const Line = React.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__line`]], className);
+  return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { width: "100%", p: "0", m: `${tokens_spacing_variables.teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("hr", {}) });
+});
+exports.Line = Line;

package/dist/components/card/card-line.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { Box } from '../box';
+
+export type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'as' | 'children'>;
+export declare const Line: React.ForwardRefExoticComponent<LineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-line.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Box } from "../box/box.js";
+import { teddySpacing50 } from "../../tokens/spacing/variables.js";
+const Line = React__default.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx([styles[`${rootClassName}__line`]], className);
+  return /* @__PURE__ */ jsx(Box, { width: "100%", p: "0", m: `${teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
+});
+export {
+  Line
+};

package/dist/components/card/card-link.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const components_link_link = require("../link/link.cjs");
+const Link = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React.useContext(components_card_card.RootContext);
+    const classes = clsx([components_card_card.styles[`${components_card_card.rootClassName}__link`]], components_card_card.styles[components_card_card.actionElementIdentifier], className);
+    const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_link_link.Link, { ...props, ref, className: classes });
+  }
+);
+Link.displayName = "Link";
+exports.Link = Link;

package/dist/components/card/card-link.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Link as PrimitiveLink } from '../link';
+
+export type LinkProps = React.ComponentPropsWithoutRef<typeof PrimitiveLink>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean | undefined;
+    disableVisited?: boolean | undefined;
+    ensureTargetArea?: boolean | undefined;
+    silent?: boolean | undefined;
+    variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+} & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/card/card-link.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { RootContext, s as styles, rootClassName, actionElementIdentifier } from "./card.js";
+import { composeRefs } from "../../utils/composeRefs.js";
+import { Link as Link$1 } from "../link/link.js";
+const Link = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const classes = clsx([styles[`${rootClassName}__link`]], styles[actionElementIdentifier], className);
+    const ref = composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
+    return /* @__PURE__ */ jsx(Link$1, { ...props, ref, className: classes });
+  }
+);
+Link.displayName = "Link";
+export {
+  Link
+};

package/dist/components/card/card-slot.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_card_card = require("./card.cjs");
+const components_box_box = require("../box/box.cjs");
+const Slot = React.forwardRef(
+  ({ className, align, ...props }, forwardRef) => {
+    const classes = clsx(
+      [
+        components_card_card.styles[`${components_card_card.rootClassName}__slot`],
+        {
+          [components_card_card.styles[`${components_card_card.rootClassName}__slot--center`]]: align === "top" || align === "bottom",
+          [components_card_card.styles[`${components_card_card.rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
+        }
+      ],
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_box_box.Box,
+      {
+        position: "absolute",
+        top: (align == null ? void 0 : align.includes("top")) ? "0" : void 0,
+        bottom: (align == null ? void 0 : align.includes("bottom")) ? "0" : void 0,
+        left: (align == null ? void 0 : align.includes("left")) ? "200" : (align == null ? void 0 : align.includes("right")) ? void 0 : "50%",
+        right: (align == null ? void 0 : align.includes("right")) ? "200" : void 0,
+        ...props,
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Slot.displayName = "Slot";
+exports.Slot = Slot;

package/dist/components/card/card-slot.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Box } from '../box';
+
+export type SlotProps = React.ComponentPropsWithoutRef<typeof Box> & {
+    align?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/** An element that has absolute position, used to place content on the edge of the card */
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card-slot.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./card.js";
+import { Box } from "../box/box.js";
+const Slot = React__default.forwardRef(
+  ({ className, align, ...props }, forwardRef) => {
+    const classes = clsx(
+      [
+        styles[`${rootClassName}__slot`],
+        {
+          [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
+          [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
+        }
+      ],
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        top: (align == null ? void 0 : align.includes("top")) ? "0" : void 0,
+        bottom: (align == null ? void 0 : align.includes("bottom")) ? "0" : void 0,
+        left: (align == null ? void 0 : align.includes("left")) ? "200" : (align == null ? void 0 : align.includes("right")) ? void 0 : "50%",
+        right: (align == null ? void 0 : align.includes("right")) ? "200" : void 0,
+        ...props,
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Slot.displayName = "Slot";
+export {
+  Slot
+};