reshaped 1.0.1 → 2.1.0

package/components/Button/Button.js

@@ -0,0 +1,37 @@
+import React 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 ButtonAligner from "./ButtonAligner.js";
+import s from "./Button.module.css";
+const ButtonBase = (props, ref) => {
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", className, children, rounded, attributes, onClick, icon, endIcon, } = 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 (React.createElement(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
+    };
+    return (React.createElement(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: attributes, type: type, onClick: onClick, href: href, ref: ref },
+        loading && (React.createElement("div", { className: s.loader },
+            React.createElement(Loader, { size: "small", color: "inherit" }))),
+        renderIcon("start"),
+        children && React.createElement("span", { className: s.text }, children),
+        renderIcon("end")));
+};
+const Button = React.forwardRef(ButtonBase);
+Button.Aligner = ButtonAligner;
+export default Button;

package/components/Button/Button.module.css

@@ -0,0 +1 @@
+.root{--rs-button-border-width:1px;-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-button-padding-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-padding-h) * 2));overflow:hidden;padding:calc(var(--rs-button-padding-v) - var(--rs-button-border-width)) calc(var(--rs-button-padding-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}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{-webkit-margin-end:var(--rs-button-icon-gap);margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{-webkit-margin-end:0;-webkit-margin-start:var(--rs-button-icon-gap);margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{-webkit-margin-end:0;margin-inline-end:0}.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-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium,.--size-small{border-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large,.--size-xlarge{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--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.--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{--rs-button-border-width:0px;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{--rs-button-border-width:0px;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.--color-neutral{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.--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{padding-left:var(--rs-button-padding-h-ghost);padding-right:var(--rs-button-padding-h-ghost)}.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}.aligner{line-height:0}.aligner.--aligner-position-all .root{margin:calc(var(--rs-button-padding-v) * -1) calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-start .root{-webkit-margin-start:calc(var(--rs-button-padding-h) * -1);margin-inline-start:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-end .root{-webkit-margin-end:calc(var(--rs-button-padding-h) * -1);margin-inline-end:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-top .root{margin-top:calc(var(--rs-button-padding-v) * -1)}.aligner.--aligner-position-bottom .root{margin-bottom:calc(var(--rs-button-padding-v) * -1)}@media (min-width:660px){.--size-small--m{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--m,.--size-small--m{border-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--m{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--m,.--size-xlarge--m{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--l,.--size-small--l{border-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--l{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--l,.--size-xlarge--l{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--xl,.--size-small--xl{border-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--xl{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--xl,.--size-xlarge--xl{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-gap:var(--rs-unit-x3);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1)}.--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

@@ -0,0 +1,31 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../Actionable";
+import type * as G from "../../types/global";
+export type Size = "xlarge" | "large" | "medium" | "small";
+type BaseProps = {
+    color?: "black" | "white" | "primary" | "critical" | "positive" | "neutral" | "inherit";
+    variant?: "solid" | "outline" | "ghost" | "faded";
+    elevated?: boolean;
+    icon?: IconProps["svg"];
+    endIcon?: IconProps["svg"];
+    size?: G.Responsive<Size>;
+    rounded?: boolean;
+    loading?: boolean;
+    fullWidth?: G.Responsive<boolean>;
+    highlighted?: boolean;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+};
+export type Props = Omit<ActionableProps, keyof BaseProps> & BaseProps;
+type AlignerPosition = "start" | "end" | "top" | "bottom";
+export type AlignerProps = {
+    children: React.ReactElement;
+    position?: AlignerPosition | AlignerPosition[];
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", AlignerProps>;
+};
+export type Export = React.ForwardRefExoticComponent<Props> & {
+    Aligner: React.ComponentType<AlignerProps>;
+};
+export {};

package/components/Button/Button.types.js

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

package/components/Button/ButtonAligner.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Button.types";
+declare const ButtonAligner: (props: T.AlignerProps) => React.JSX.Element;
+export default ButtonAligner;

package/components/Button/ButtonAligner.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Button.module.css";
+const ButtonAligner = (props) => {
+    const { children, position: passedPosition, className, attributes } = props;
+    const position = typeof passedPosition === "string" ? [passedPosition] : passedPosition;
+    const positionClassNames = position
+        ? position.map((p) => s[`--aligner-position-${p}`])
+        : [s["--aligner-position-all"]];
+    const rootClassNames = classNames(s.aligner, className, ...positionClassNames);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }), children));
+};
+export default ButtonAligner;

package/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export type { Props as ButtonProps, AlignerProps as ButtonAlignerProps } from "./Button.types";

package/components/Button/index.js

@@ -0,0 +1 @@
+export { default } from "./Button.js";

package/components/Button/tests/Button.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const elevated: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const rounded: () => React.JSX.Element;
+export declare const fullWidth: () => React.JSX.Element;
+export declare const loading: () => React.JSX.Element;
+export declare const highlighted: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const aligner: () => React.JSX.Element;