reshaped 2.11.12 → 3.0.0

package/components/Badge/tests/Badge.stories.js

@@ -1,242 +0,0 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import Avatar from "../../Avatar/index.js";
-import View from "../../View/index.js";
-import Badge from "../index.js";
-import Icon from "../../Icon/index.js";
-import Button from "../../Button/index.js";
-import IconCheckmark from "../../../icons/Checkmark.js";
-import IconChevronRight from "../../../icons/ChevronRight.js";
-export default {
-    title: "Components/Badge",
-    component: Badge,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/badge",
-        },
-    },
-};
-export const variant = () => (<Example>
-		<Example.Item title="variant: default">
-			<Badge>Badge</Badge>
-		</Example.Item>
-		<Example.Item title="variant: faded">
-			<Badge variant="faded">Badge</Badge>
-		</Example.Item>
-		<Example.Item title="variant: outline">
-			<Badge variant="outline">Badge</Badge>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: primary, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="primary">Badge</Badge>
-				<Badge variant="faded" color="primary">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="primary">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: positive, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="positive">Badge</Badge>
-				<Badge variant="faded" color="positive">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="positive">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: critical, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="critical">Badge</Badge>
-				<Badge variant="faded" color="critical">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="critical">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: warning, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="warning">Badge</Badge>
-				<Badge variant="faded" color="warning">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="warning">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const sizes = () => (<Example>
-		<Example.Item title="size: small, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="small">Badge</Badge>
-				<Badge rounded size="small">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge>Badge</Badge>
-				<Badge rounded>Badge</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="large">Badge</Badge>
-				<Badge rounded size="large">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const icon = () => (<Example>
-		<Example.Item title="size: small, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const actionable = () => (<Example>
-		<Example.Item title="dismissible, close button is actionable">
-			<Badge onDismiss={() => console.log("heyeye")} dismissAriaLabel="Dismiss">
-				Badge
-			</Badge>
-		</Example.Item>
-		<Example.Item title="dismissible + onClick, whole badge is actionable">
-			<Badge onDismiss={() => console.log("heyeye")} dismissAriaLabel="Dismiss" onClick={() => { }}>
-				Badge
-			</Badge>
-		</Example.Item>
-	</Example>);
-export const rounded = () => (<Example>
-		<Example.Item title="rounded, all variants">
-			<View direction="row" gap={3}>
-				<Badge rounded>Badge</Badge>
-				<Badge rounded variant="faded">
-					Badge
-				</Badge>
-				<Badge rounded variant="outline">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
-			<View direction="row" gap={3}>
-				<Badge rounded color="critical" size="small">
-					2
-				</Badge>
-				<Badge rounded color="critical">
-					2
-				</Badge>
-				<Badge rounded color="critical" size="large">
-					2
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const empty = () => (<Example>
-		<Example.Item title="empty, not rounded, all sizes, color: critical">
-			<View direction="row" gap={3}>
-				<Badge size="small" color="critical"/>
-				<Badge color="critical"/>
-				<Badge size="large" color="critical"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="empty, rounded, all sizes, color: critical">
-			<View direction="row" gap={3}>
-				<Badge rounded size="small" color="critical"/>
-				<Badge rounded color="critical"/>
-				<Badge rounded size="large" color="critical"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const container = () => {
-    const [hidden, setHidden] = React.useState(false);
-    return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
-			<Example.Item title="position: top-end">
-				<Badge.Container>
-					<Badge color="primary" hidden={hidden}>
-						5
-					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-end">
-				<Badge.Container position="bottom-end">
-					<Badge color="primary" hidden={hidden}>
-						5
-					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top-end, rounded, multiple digits">
-				<Badge.Container>
-					<Badge size="small" color="primary" rounded hidden={hidden}>
-						123
-					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top-end, rounded, empty">
-				<Badge.Container>
-					<Badge color="primary" rounded hidden={hidden}/>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
-				<Badge.Container overlap>
-					<Badge size="small" color="primary" rounded hidden={hidden}>
-						2
-					</Badge>
-					<Avatar initials="A"/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
-				<Badge.Container overlap position="bottom-end">
-					<Badge size="small" color="primary" rounded hidden={hidden}>
-						2
-					</Badge>
-					<Avatar initials="A"/>
-				</Badge.Container>
-			</Example.Item>
-
-			<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
-				<Badge.Container overlap position="top-end">
-					<Badge size="small" color="primary" rounded hidden={hidden}/>
-					<Icon svg={IconCheckmark} size={5}/>
-				</Badge.Container>
-			</Example.Item>
-		</Example>);
-};

package/components/Breadcrumbs/Breadcrumbs.js

@@ -1,42 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import View from "../View/index.js";
-import Icon from "../Icon/index.js";
-import Text from "../Text/index.js";
-import Button from "../Button/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
-const Breadcrumbs = (props) => {
-    const { children, separator, color, defaultVisibleItems, disableExpand, ariaLabel, className, attributes, } = props;
-    const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
-    const [expanded, setExpanded] = React.useState(false);
-    const rootClassNames = classNames(className);
-    const childrenLength = React.Children.count(children);
-    let renderIndex = 0;
-    const handleExpand = () => {
-        setExpanded(true);
-    };
-    return (_jsx("nav", Object.assign({}, attributes, { "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"]), className: rootClassNames, children: _jsx(View, { as: "ol", direction: "row", gap: 2, align: "center", children: React.Children.map(children, (child, index) => {
-                if (!child)
-                    return null;
-                const lastCollapsedIndex = childrenLength - (visibleItems || 0);
-                const isBeforeCollapse = renderIndex === 0;
-                const isAfterCollapse = renderIndex > lastCollapsedIndex;
-                const isDisplayed = !visibleItems || isBeforeCollapse || isAfterCollapse || expanded;
-                const isCollapseButton = renderIndex === lastCollapsedIndex;
-                renderIndex += 1;
-                let itemNode = null;
-                if (isDisplayed) {
-                    itemNode = child;
-                }
-                else if (isCollapseButton) {
-                    itemNode = disableExpand ? (_jsx(Icon, { svg: IconDotsHorizontal, size: 4 })) : (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
-                }
-                if (itemNode === null)
-                    return null;
-                return (_jsxs(View, { as: "li", gap: 2, direction: "row", align: "center", children: [index > 0 && (isDisplayed || isCollapseButton) && (_jsx(Text, { color: "neutral-faded", children: separator || _jsx(Icon, { svg: IconChevronRight, size: 3 }) })), _jsx(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded", children: itemNode })] }, index));
-            }) }) })));
-};
-export default Breadcrumbs;

package/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -1,14 +0,0 @@
-import type React from "react";
-import type { LinkProps } from "../Link";
-import type * as G from "../../types/global";
-export type Props = {
-    children: React.ReactElement | React.ReactElement[];
-    separator?: React.ReactNode;
-    color?: "neutral" | "primary";
-    defaultVisibleItems?: number;
-    disableExpand?: boolean;
-    ariaLabel?: string;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"nav", Props>;
-};
-export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

package/components/Button/Button.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
-import Icon from "../Icon/index.js";
-import Loader from "../Loader/index.js";
-import Actionable from "../Actionable/index.js";
-import ButtonGroup from "./ButtonGroup.js";
-import ButtonAligner from "./ButtonAligner.js";
-import s from "./Button.module.css";
-const Button = forwardRef((props, ref) => {
-    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, as, className, attributes, } = props;
-    const iconOnly = (icon || endIcon) && !children;
-    const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
-    const renderIcon = (position) => {
-        const isStartValid = position === "start" && icon;
-        const isEndValid = position === "end" && endIcon;
-        const isInvalid = !(isStartValid || isEndValid);
-        if (isInvalid)
-            return null;
-        const iconClassName = classNames(s.icon, position === "end" && s["--icon-position-end"]);
-        const iconSize = responsivePropDependency(size, (size) => {
-            if (size === "large")
-                return 5;
-            if (size === "xlarge")
-                return 6;
-            return 4;
-        });
-        return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
-    };
-    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), type: type, onClick: onClick, href: href, ref: ref, as: as, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
-});
-Button.Group = ButtonGroup;
-Button.Aligner = ButtonAligner;
-export default Button;

package/components/Button/Button.module.css

@@ -1 +0,0 @@
-.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{--rs-button-border-width:1px;background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.06}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{--rs-button-border-width:0px;--rs-p-h:max(calc(var(--rs-button-p-h) - var(--rs-unit-x1)),var(--rs-unit-x2))}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-radius:var(--rs-unit-radius-small)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-radius:var(--rs-unit-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}

package/components/Button/Button.types.d.ts

@@ -1,33 +0,0 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
-import type { ActionableProps } from "../Actionable";
-import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
-import type * as G from "../../types/global";
-export type Size = "xlarge" | "large" | "medium" | "small";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as"> & {
-    color?: "black" | "white" | "primary" | "critical" | "positive" | "neutral" | "inherit";
-    variant?: "solid" | "outline" | "ghost" | "faded";
-    icon?: IconProps["svg"];
-    endIcon?: IconProps["svg"];
-    size?: G.Responsive<Size>;
-    rounded?: boolean;
-    loading?: boolean;
-    elevated?: boolean;
-    fullWidth?: G.Responsive<boolean>;
-    highlighted?: boolean;
-};
-export type GroupProps = {
-    children: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};
-export type AlignerProps = BaseAlignerProps & {
-    /**
-     * @deprecated The method should not be used
-     */
-    position?: BaseAlignerProps["side"];
-};
-export type Export = React.ForwardRefExoticComponent<Props> & {
-    Aligner: React.ComponentType<AlignerProps>;
-    Group: React.ComponentType<GroupProps>;
-};

package/components/Button/ButtonAligner.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Aligner from "../_private/Aligner/index.js";
-import s from "./Button.module.css";
-const ButtonAligner = (props) => {
-    return (_jsx(Aligner, Object.assign({}, props, { side: props.side || props.position, className: [s.aligner, props.className] })));
-};
-export default ButtonAligner;

package/components/Button/ButtonGroup.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
-import s from "./Button.module.css";
-const ButtonGroup = (props) => {
-    const { children, className, attributes } = props;
-    const groupClassNames = classNames(s.group, className);
-    return (_jsx("div", Object.assign({}, attributes, { className: groupClassNames, role: "group", children: children })));
-};
-export default ButtonGroup;