reshaped 1.0.1 → 2.1.0

package/components/Hidden/Hidden.d.ts

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

package/components/Hidden/Hidden.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Hidden.module.css";
+const Hidden = (props) => {
+    const { as: TagName = "div", children, visibility, hide, displayStyle } = props;
+    const rootClassNames = classNames(s.root, ...responsiveClassNames(s, "--hidden", hide), visibility && s["--visibility"], displayStyle && s[`--display-${displayStyle}`]);
+    if (typeof children === "function")
+        return React.createElement(React.Fragment, null, children(rootClassNames));
+    return React.createElement(TagName, { className: rootClassNames }, children);
+};
+export default Hidden;

package/components/Hidden/Hidden.module.css

@@ -0,0 +1 @@
+.root{--rs-hidden-display:block;display:var(--rs-hidden-display)!important}.--display-inline{--rs-hidden-display:inline}.--display-flex{--rs-hidden-display:flex}.--hidden{display:none!important}.--hidden.--visibility{display:var(--rs-hidden-display)!important;visibility:hidden}@media (min-width:660px){.--hidden-true--m{display:none!important}.--hidden-true--m.--visibility{visibility:hidden}.--hidden-false--m,.--hidden-true--m.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--m.--visibility{visibility:visible}}@media (min-width:900px){.--hidden-true--l{display:none!important}.--hidden-true--l.--visibility{visibility:hidden}.--hidden-false--l,.--hidden-true--l.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--l.--visibility{visibility:visible}}@media (min-width:1280px){.--hidden-true--xl{display:none!important}.--hidden-true--xl.--visibility{visibility:hidden}.--hidden-false--xl,.--hidden-true--xl.--visibility{display:var(--rs-hidden-display)!important}.--hidden-false--xl.--visibility{visibility:visible}}

package/components/Hidden/Hidden.types.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    hide?: G.Responsive<boolean>;
+    visibility?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+    displayStyle?: "inline" | "flex";
+    children: ((className: string) => React.ReactNode) | React.ReactNode;
+};

package/components/Hidden/Hidden.types.js

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

package/components/Hidden/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Hidden";
+export type { Props as HiddenProps } from "./Hidden.types";

package/components/Hidden/index.js

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const visibility: () => React.JSX.Element;
+export declare const inline: () => React.JSX.Element;

package/components/Hidden/tests/Hidden.stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Hidden from "../index.js";
+export default { title: "Utilities/Hidden" };
+export const visibility = () => (<Example>
+		<Example.Item title="hide: always">
+			<Hidden hide={true}>Content</Hidden>
+		</Example.Item>
+		<Example.Item title="shown on s">
+			<Hidden hide={{ s: false, m: true }}>Content</Hidden>
+		</Example.Item>
+		<Example.Item title="shown on l/xl">
+			<Hidden hide={{ s: true, l: false }}>Content</Hidden>
+		</Example.Item>
+		<Example.Item title="shown on m/l/xl">
+			<Hidden hide={{ s: true, m: false }}>Content</Hidden>
+		</Example.Item>
+		<Example.Item title="shown on m">
+			<Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>
+		</Example.Item>
+		<Example.Item title="shown on s/xl">
+			<Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>
+		</Example.Item>
+	</Example>);
+export const inline = () => (<Example>
+		<Example.Item title="inline, shown on s">
+			<div>
+				Hello&nbsp;
+				<Hidden hide={{ s: false, m: true }} displayStyle="inline">
+					world
+				</Hidden>
+			</div>
+		</Example.Item>
+		<Example.Item title="flex, shown on s">
+			<Hidden hide={{ s: false, m: true }} displayStyle="flex">
+				world
+			</Hidden>
+		</Example.Item>
+	</Example>);

package/components/HiddenVisually/HiddenVisually.d.ts

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

package/components/HiddenVisually/HiddenVisually.js

@@ -0,0 +1,7 @@
+import React from "react";
+import s from "./HiddenVisually.module.css";
+const HiddenVisually = (props) => {
+    const { children } = props;
+    return React.createElement("div", { className: s.root }, children);
+};
+export default HiddenVisually;

package/components/HiddenVisually/HiddenVisually.module.css

@@ -0,0 +1 @@
+.root{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;white-space:nowrap;width:1px}

package/components/HiddenVisually/HiddenVisually.types.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export type Props = {
+    children?: React.ReactNode;
+};

package/components/HiddenVisually/HiddenVisually.types.js

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

package/components/HiddenVisually/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./HiddenVisually";
+export type { Props as HiddenVisuallyProps } from "./HiddenVisually.types";

package/components/HiddenVisually/index.js

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const visibility: () => React.JSX.Element;

package/components/HiddenVisually/tests/HiddenVisually.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import HiddenVisually from "../index.js";
+export default { title: "Utilities/HiddenVisually" };
+export const visibility = () => (<Example>
+		<Example.Item title="pronounced by screen readers">
+			<HiddenVisually>Screen-reader only</HiddenVisually>
+		</Example.Item>
+	</Example>);

package/components/Hotkey/Hotkey.d.ts

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

package/components/Hotkey/Hotkey.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Text from "../Text/index.js";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Hotkey.module.css";
+const Hotkey = (props) => {
+    const { children, active, className, attributes } = props;
+    const rootClassNames = classNames(s.root, active && s["--active"], className);
+    return (React.createElement(Text, { as: "kbd", variant: "caption-1", weight: "medium", color: "neutral-faded", className: rootClassNames, attributes: attributes }, children));
+};
+export default Hotkey;

package/components/Hotkey/Hotkey.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-background-neutral-faded);border:1px solid var(--rs-color-background-neutral-faded);border-radius:var(--rs-unit-radius-small);color:var(--rs-color-foreground-neutral);display:inline-flex;justify-content:center;min-width:calc(var(--rs-line-height-caption-1) + var(--rs-unit-x1) * 2);padding:calc(var(--rs-unit-x1) - 1px) calc(var(--rs-unit-x2) - 1px);transition:var(--rs-easing-standard) var(--rs-duration-fast);transition-property:color,background-color,border-color;vertical-align:top}.--active{background:var(--rs-color-background-neutral);border-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}

package/components/Hotkey/Hotkey.types.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children: React.ReactNode;
+    active?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span", Props>;
+};

package/components/Hotkey/Hotkey.types.js

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

package/components/Hotkey/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Hotkey";
+export type { Props as HotkeyProps } from "./Hotkey.types";

package/components/Hotkey/index.js

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

package/components/Hotkey/tests/Hotkey.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import useHotkeys from "../../../hooks/useHotkeys.js";
+import View from "../../View/index.js";
+import TextField from "../../TextField/index.js";
+import Hotkey from "../Hotkey.js";
+export default { title: "Components/Hotkey" };
+const Demo = () => {
+    const { checkHotkeyState } = useHotkeys({
+        "Meta+k": () => { },
+    });
+    return <Hotkey active={checkHotkeyState("k")}>⌘K</Hotkey>;
+};
+export const base = () => (<Example>
+		<Example.Item title="Base">
+			<Demo />
+		</Example.Item>
+		<Example.Item title="Active">
+			<Hotkey active>⌘K</Hotkey>
+		</Example.Item>
+		<Example.Item title="Inside input slot">
+			<View width="300px">
+				<TextField name="hey" endSlot={<Demo />} inputAttributes={{ "aria-label": "hotkey test" }}/>
+			</View>
+		</Example.Item>
+	</Example>);

package/components/Icon/Icon.d.ts

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

package/components/Icon/Icon.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import getHeightStyles from "../../styles/height/index.js";
+import s from "./Icon.module.css";
+const Icon = (props) => {
+    const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
+    const heightStyles = getHeightStyles(size);
+    const rootClassName = classNames(s.root, className, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
+    const icon = typeof Component === "object" ? Component : React.createElement(Component, null);
+    const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    return (
+    // All icons are decorative, a11y attributes should be set for buttons wrapping them
+    React.createElement("span", Object.assign({}, attributes, { "aria-hidden": "true", className: rootClassName, style: style }), React.cloneElement(icon, { focusable: false })));
+};
+export default Icon;

package/components/Icon/Icon.module.css

@@ -0,0 +1 @@
+.root{aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}

package/components/Icon/Icon.types.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    svg: React.ReactElement | React.ComponentType;
+    size?: G.Responsive<number | string>;
+    color?: "neutral" | "neutral-faded" | "positive" | "critical" | "primary" | "disabled";
+    autoWidth?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span", Props>;
+};

package/components/Icon/Icon.types.js

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

package/components/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Icon";
+export type { Props as IconProps } from "./Icon.types";

package/components/Icon/index.js

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const size: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const autoWidth: () => React.JSX.Element;

package/components/Icon/tests/Icon.stories.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Icon from "../index.js";
+import Text from "../../Text/index.js";
+import IconZap from "../../../icons/Zap.js";
+import IconMic from "../../../icons/Mic.js";
+export default { title: "Utilities/Icon" };
+export const size = () => (<Example>
+		<Example.Item title="size: 4">
+			<Icon svg={IconZap} size={4}/>
+		</Example.Item>
+		<Example.Item title="size: 8">
+			<Icon svg={IconZap} size={8}/>
+		</Example.Item>
+		<Example.Item title="size: 100%">
+			<View width={25} height={25}>
+				<Icon svg={IconZap} size="100%"/>
+			</View>
+		</Example.Item>
+		<Example.Item title={["responsive size", "[s] 5", "[m]: 10"]}>
+			<Icon svg={IconZap} size={{ s: 5, m: 10 }}/>
+		</Example.Item>
+		<Example.Item title="size: inherit from font">
+			<Text variant="title-6">
+				<View direction="row" align="center" gap={2}>
+					<Icon svg={IconZap}/>
+					<View.Item>Reshaped</View.Item>
+				</View>
+			</Text>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: neutral">
+			<Icon svg={IconZap} color="neutral"/>
+		</Example.Item>
+		<Example.Item title="color: neutral-faded">
+			<Icon svg={IconZap} color="neutral-faded"/>
+		</Example.Item>
+		<Example.Item title="color: primary">
+			<Icon svg={IconZap} color="primary"/>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Icon svg={IconZap} color="critical"/>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Icon svg={IconZap} color="positive"/>
+		</Example.Item>
+		<Example.Item title="color: disabled">
+			<Icon svg={IconZap} color="disabled"/>
+		</Example.Item>
+		<Example.Item title="color: inherit">
+			<div style={{ color: "tomato" }}>
+				<Icon svg={IconZap}/>
+			</div>
+		</Example.Item>
+	</Example>);
+export const autoWidth = () => (<Example>
+		<Example.Item title="square boundaries">
+			<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
+				<Icon svg={IconMic} size={10}/>
+			</div>
+		</Example.Item>
+		<Example.Item title="auto width boundaries">
+			<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
+				<Icon svg={IconMic} size={10} autoWidth/>
+			</div>
+		</Example.Item>
+	</Example>);

package/components/Image/Image.d.ts

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

package/components/Image/Image.js

@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Image.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+const Image = (props) => {
+    const { src, alt, width, height, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes, } = props;
+    const [status, setStatus] = React.useState("loading");
+    const radiusStyles = getRadiusStyles(borderRadius);
+    const widthStyles = getWidthStyles(width);
+    const heightStyles = getHeightStyles(height);
+    const baseClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
+    const imgClassNames = classNames(s.image, baseClassNames);
+    const fallbackClassNames = classNames(s.fallback, baseClassNames);
+    const style = Object.assign(Object.assign({}, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
+    const handleLoad = (e) => {
+        setStatus("success");
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    };
+    const handleError = (e) => {
+        setStatus("error");
+        onError === null || onError === void 0 ? void 0 : onError(e);
+    };
+    React.useEffect(() => {
+        setStatus("loading");
+    }, [src]);
+    if ((status === "error" || !src) && !!fallback) {
+        if (typeof fallback === "string") {
+            return (React.createElement("img", Object.assign({}, attributes, { src: fallback, alt: alt, role: alt ? undefined : "presentation", className: fallbackClassNames, style: style })));
+        }
+        return (React.createElement("div", Object.assign({}, attributes, { className: fallbackClassNames, style: style }), fallback));
+    }
+    return (React.createElement("img", Object.assign({}, attributes, imageAttributes, { src: src, alt: alt, role: alt ? undefined : "presentation", onLoad: handleLoad, onError: handleError, className: imgClassNames, style: style })));
+};
+export default Image;

package/components/Image/Image.module.css

@@ -0,0 +1 @@
+.root{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--display-mode-cover{-o-object-fit:cover!important;object-fit:cover!important}.--display-mode-contain{-o-object-fit:scale-down!important;object-fit:scale-down!important}

package/components/Image/Image.types.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type * as G from "../../types/global";
+import type * as TStyles from "../../styles/types";
+export type Props = {
+    src?: string;
+    alt?: string;
+    width?: G.Responsive<string | number>;
+    height?: G.Responsive<string | number>;
+    onLoad?: (e: React.SyntheticEvent) => void;
+    onError?: (e: React.SyntheticEvent) => void;
+    fallback?: string | React.ReactNode | boolean;
+    displayMode?: "cover" | "contain";
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props & {
+        ref: any;
+    }>;
+    imageAttributes?: G.Attributes<"img", Props>;
+};

package/components/Image/Image.types.js

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

package/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Image";
+export type { Props as ImageProps } from "./Image.types";

package/components/Image/index.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const size: () => React.JSX.Element;
+export declare const radius: () => React.JSX.Element;
+export declare const displayMode: () => React.JSX.Element;
+export declare const ratio: () => React.JSX.Element;
+export declare const fallback: () => React.JSX.Element;

package/components/Image/tests/Image.stories.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Icon from "../../Icon/index.js";
+import IconZap from "../../../icons/Zap.js";
+import Image from "../Image.js";
+export default { title: "Utilities/Image" };
+const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
+export const size = () => (<Example>
+		<Example.Item title="size: auto">
+			<Image src={imgUrl} alt="Image alt"/>
+		</Example.Item>
+		<Example.Item title="width: 200px">
+			<Image src={imgUrl} width="200px"/>
+		</Example.Item>
+		<Example.Item title="height: 200px">
+			<Image src={imgUrl} height="200px"/>
+		</Example.Item>
+		<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
+			<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
+		</Example.Item>
+	</Example>);
+export const radius = () => (<Example>
+		<Example.Item title="radius: small">
+			<View width="300px">
+				<Image src={imgUrl} borderRadius="small"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="radius: medium">
+			<View width="300px">
+				<Image src={imgUrl} borderRadius="medium"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="radius: large">
+			<View width="300px">
+				<Image src={imgUrl} borderRadius="large"/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const displayMode = () => (<Example>
+		<Example.Item title="mode: cover">
+			<Image src={imgUrl} height="200px" width="100%" displayMode="cover"/>
+		</Example.Item>
+		<Example.Item title="mode: contain">
+			<Image src={imgUrl} height="200px" width="100%" displayMode="contain"/>
+		</Example.Item>
+	</Example>);
+export const ratio = () => (<Example>
+		<Example.Item title="ratio: 16/9">
+			<View aspectRatio={16 / 9}>
+				<Image src={imgUrl}/>
+			</View>
+		</Example.Item>
+		<Example.Item title="ratio: 16/9, displayMode: contain">
+			<View aspectRatio={16 / 9}>
+				<Image src={imgUrl} displayMode="contain"/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const fallback = () => (<Example>
+		<Example.Item title="fallback, background, on error">
+			<View width="300px">
+				<View aspectRatio={16 / 9}>
+					<Image src="error" fallback/>
+				</View>
+			</View>
+		</Example.Item>
+		<Example.Item title="fallback, image, on error">
+			<View width="300px">
+				<View aspectRatio={16 / 9}>
+					<Image src="error" fallback={imgUrl}/>
+				</View>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="fallback, icon, on error">
+			<View width="300px">
+				<View aspectRatio={16 / 9}>
+					<Image src="error" fallback={<Icon svg={IconZap} size={10}/>}/>
+				</View>
+			</View>
+		</Example.Item>
+		<Example.Item title="fallback, icon, no url">
+			<View width="300px">
+				<View aspectRatio={16 / 9}>
+					<Image fallback={<Icon svg={IconZap} size={10}/>}/>
+				</View>
+			</View>
+		</Example.Item>
+	</Example>);

package/components/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "className" | "disabled" | "attributes" | "children" | "onClick" | "type" | "href"> & {
+    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType<{}> | undefined;
+    color?: "inherit" | "positive" | "critical" | "primary" | undefined;
+    variant?: "underline" | "plain" | undefined;
+} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default _default;

package/components/Link/Link.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import s from "./Link.module.css";
+const Link = (props, ref) => {
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
+    return (React.createElement(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref },
+        icon && React.createElement(Icon, { svg: icon }),
+        children));
+};
+export default React.forwardRef(Link);

package/components/Link/Link.module.css

@@ -0,0 +1 @@
+.root{display:inline;text-underline-offset:calc(var(--rs-unit-x1) / 2)}.root.--color-primary{color:var(--rs-color-foreground-primary)}.root.--color-critical{color:var(--rs-color-foreground-critical)}.root.--color-positive{color:var(--rs-color-foreground-positive)}.root.--color-inherit{color:currentcolor}.root.--variant-plain{opacity:1;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.root.--variant-plain:hover:not(.--disabled){opacity:.6}.root.--variant-underline{text-decoration:underline;text-decoration-color:currentcolor;transition:text-decoration-color var(--rs-duration-fast) var(--rs-easing-standard)}.root.--variant-underline:hover:not(.--disabled){text-decoration-color:transparent}.root.--disabled{color:var(--rs-color-foreground-disabled);opacity:1;text-decoration:none}.root.--with-icon{align-items:center;display:inline-flex;gap:calc(1em / 3.5)}

package/components/Link/Link.types.d.ts

@@ -0,0 +1,7 @@
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type"> & {
+    icon?: IconProps["svg"];
+    color?: "inherit" | "critical" | "primary" | "positive";
+    variant?: "plain" | "underline";
+};

package/components/Link/Link.types.js

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

package/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Link";
+export type { Props as LinkProps } from "./Link.types";

package/components/Link/index.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const withIcon: () => React.JSX.Element;
+export declare const testMultilineInText: () => React.JSX.Element;