reshaped 3.2.0-canary.6 → 3.2.0

package/dist/components/Grid/Grid.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/helpers.js";
+import getAlignStyles from "../../styles/align/index.js";
+import getJustifyStyles from "../../styles/justify/index.js";
+import s from "./Grid.module.css";
+const GridItem = (props) => {
+    const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, as: TagName = "div", attributes, } = props;
+    const itemClassNames = classNames(s.item, className);
+    const resolvedColSpan = responsivePropDependency(colSpan, (value) => value && `span ${value}`);
+    const resolvedRowSpan = responsivePropDependency(rowSpan, (value) => value && `span ${value}`);
+    const rootVariables = {
+        ...responsiveVariables("--rs-grid-area", area),
+        ...responsiveVariables("--rs-grid-col-end", resolvedColSpan),
+        // both span and end use the same css variable but end has a higher prioerity
+        ...responsiveVariables("--rs-grid-col-end", colEnd),
+        ...responsiveVariables("--rs-grid-col-start", colStart),
+        ...responsiveVariables("--rs-grid-row-end", resolvedRowSpan),
+        ...responsiveVariables("--rs-grid-row-end", rowEnd),
+        ...responsiveVariables("--rs-grid-row-start", rowStart),
+    };
+    return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
+};
+const Grid = (props) => {
+    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, as: TagName = "div", attributes, } = props;
+    const alignStyles = getAlignStyles(align);
+    const justifyStyles = getJustifyStyles(justify);
+    const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
+    const resolvedColumns = responsivePropDependency(columns, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
+    const resolvedAreas = responsivePropDependency(areas, (value) => value
+        ? `"${value?.join('" "')}"
+	`
+        : undefined);
+    const rootClassNames = classNames(s.root, alignStyles?.classNames, justifyStyles?.classNames, className);
+    const rootVariables = {
+        ...responsiveVariables("--rs-grid-gap", gap),
+        ...responsiveVariables("--rs-grid-rows", resolvedRows),
+        ...responsiveVariables("--rs-grid-columns", resolvedColumns),
+        ...responsiveVariables("--rs-grid-areas", resolvedAreas),
+        ...responsiveVariables("--rs-grid-auto-flow", autoFlow),
+        ...responsiveVariables("--rs-grid-auto-columns", autoColumns),
+        ...responsiveVariables("--rs-grid-auto-rows", autoRows),
+    };
+    return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
+};
+Grid.Item = GridItem;
+export default Grid;

package/dist/components/Grid/Grid.module.css

@@ -0,0 +1 @@
+.root{display:grid}.root[style*="--rs-grid-gap"]{--rs-grid-gap-value:calc(var(--rs-grid-gap) * var(--rs-unit-x1));gap:var(--rs-grid-gap-value);--rs-grid-gap-s:0;--rs-grid-gap-m:var(--rs-grid-gap-s);--rs-grid-gap-l:var(--rs-grid-gap-m);--rs-grid-gap-xl:var(--rs-grid-gap-l);--rs-grid-gap:var(--rs-grid-gap-s)}.root[style*="--rs-grid-rows"]{grid-template-rows:var(--rs-grid-rows);--rs-grid-rows-s: ;--rs-grid-rows-m:var(--rs-grid-rows-s);--rs-grid-rows-l:var(--rs-grid-rows-m);--rs-grid-rows-xl:var(--rs-grid-rows-l);--rs-grid-rows:var(--rs-grid-rows-s)}.root[style*="--rs-grid-columns"]{grid-template-columns:var(--rs-grid-columns);--rs-grid-columns-s: ;--rs-grid-columns-m:var(--rs-grid-columns-s);--rs-grid-columns-l:var(--rs-grid-columns-m);--rs-grid-columns-xl:var(--rs-grid-columns-l);--rs-grid-columns:var(--rs-grid-columns-s)}.root[style*="--rs-grid-areas"]{grid-template-areas:var(--rs-grid-areas);--rs-grid-areas-s: ;--rs-grid-areas-m:var(--rs-grid-areas-s);--rs-grid-areas-l:var(--rs-grid-areas-m);--rs-grid-areas-xl:var(--rs-grid-areas-l);--rs-grid-areas:var(--rs-grid-areas-s)}.root[style*="--rs-grid-auto-flow"]{grid-auto-flow:var(--rs-grid-auto-flow);--rs-grid-auto-flow-s: ;--rs-grid-auto-flow-m:var(--rs-grid-auto-flow-s);--rs-grid-auto-flow-l:var(--rs-grid-auto-flow-m);--rs-grid-auto-flow-xl:var(--rs-grid-auto-flow-l);--rs-grid-auto-flow:var(--rs-grid-auto-flow-s)}.root[style*="--rs-grid-auto-columns"]{grid-auto-columns:var(--rs-grid-auto-columns);--rs-grid-auto-columns-s: ;--rs-grid-auto-columns-m:var(--rs-grid-auto-columns-s);--rs-grid-auto-columns-l:var(--rs-grid-auto-columns-m);--rs-grid-auto-columns-xl:var(--rs-grid-auto-columns-l);--rs-grid-auto-columns:var(--rs-grid-auto-columns-s)}.root[style*="--rs-grid-auto-rows"]{grid-auto-rows:var(--rs-grid-auto-rows);--rs-grid-auto-rows-s: ;--rs-grid-auto-rows-m:var(--rs-grid-auto-rows-s);--rs-grid-auto-rows-l:var(--rs-grid-auto-rows-m);--rs-grid-auto-rows-xl:var(--rs-grid-auto-rows-l);--rs-grid-auto-rows:var(--rs-grid-auto-rows-s)}.item[style*="--rs-grid-area"]{grid-area:var(--rs-grid-area);--rs-grid-area-s: ;--rs-grid-area-m:var(--rs-grid-area-s);--rs-grid-area-l:var(--rs-grid-area-m);--rs-grid-area-xl:var(--rs-grid-area-l);--rs-grid-area:var(--rs-grid-area-s)}.item[style*="--rs-grid-col-start"]{grid-column-start:var(--rs-grid-col-start);--rs-grid-col-start-s: ;--rs-grid-col-start-m:var(--rs-grid-col-start-s);--rs-grid-col-start-l:var(--rs-grid-col-start-m);--rs-grid-col-start-xl:var(--rs-grid-col-start-l);--rs-grid-col-start:var(--rs-grid-col-start-s)}.item[style*="--rs-grid-col-end"]{grid-column-end:var(--rs-grid-col-end);--rs-grid-col-end-s: ;--rs-grid-col-end-m:var(--rs-grid-col-end-s);--rs-grid-col-end-l:var(--rs-grid-col-end-m);--rs-grid-col-end-xl:var(--rs-grid-col-end-l);--rs-grid-col-end:var(--rs-grid-col-end-s)}.item[style*="--rs-grid-row-start"]{grid-row-start:var(--rs-grid-row-start);--rs-grid-row-start-s: ;--rs-grid-row-start-m:var(--rs-grid-row-start-s);--rs-grid-row-start-l:var(--rs-grid-row-start-m);--rs-grid-row-start-xl:var(--rs-grid-row-start-l);--rs-grid-row-start:var(--rs-grid-row-start-s)}.item[style*="--rs-grid-row-end"]{grid-row-end:var(--rs-grid-row-end);--rs-grid-row-end-s: ;--rs-grid-row-end-m:var(--rs-grid-row-end-s);--rs-grid-row-end-l:var(--rs-grid-row-end-m);--rs-grid-row-end-xl:var(--rs-grid-row-end-l);--rs-grid-row-end:var(--rs-grid-row-end-s)}@media (--rs-viewport-m ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-m)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-m)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-m)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-m)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-m)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-m)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-m)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-m)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-m)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-m)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-m)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-m)}}@media (--rs-viewport-l ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-l)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-l)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-l)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-l)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-l)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-l)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-l)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-l)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-l)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-l)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-l)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-l)}}@media (--rs-viewport-xl ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-xl)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-xl)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-xl)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-xl)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-xl)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-xl)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-xl)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-xl)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-xl)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-xl)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-xl)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-xl)}}

package/dist/components/Grid/Grid.types.d.ts

@@ -0,0 +1,31 @@
+import type { Property } from "csstype";
+import type * as G from "../../types/global";
+import type * as TStyles from "../../styles/types";
+export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    gap?: G.Responsive<number>;
+    align?: G.Responsive<TStyles.Align>;
+    justify?: G.Responsive<TStyles.Justify>;
+    rows?: G.Responsive<number | Property.GridTemplateRows>;
+    columns?: G.Responsive<number | Property.GridTemplateColumns>;
+    areas?: G.Responsive<string[]>;
+    autoFlow?: G.Responsive<Property.GridAutoFlow>;
+    autoColumns?: G.Responsive<Property.GridAutoColumns>;
+    autoRows?: G.Responsive<Property.GridAutoRows>;
+    children?: React.ReactNode;
+    as?: TagName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};
+export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    area?: string;
+    colStart?: G.Responsive<number>;
+    colEnd?: G.Responsive<number>;
+    colSpan?: G.Responsive<number>;
+    rowStart?: G.Responsive<number>;
+    rowEnd?: G.Responsive<number>;
+    rowSpan?: G.Responsive<number>;
+    children?: React.ReactNode;
+    as?: TagName;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};

package/dist/components/Grid/Grid.types.js

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

package/dist/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Grid";
+export type { Props as GridProps, ItemProps as GridItemProps } from "./Grid.types";

package/dist/components/Grid/index.js

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

package/dist/components/Grid/tests/Grid.stories.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    title: string;
+    component: {
+        <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
+        Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: () => import("react").JSX.Element;
+export declare const layout: () => import("react").JSX.Element;
+export declare const itemLayout: () => import("react").JSX.Element;
+export declare const areas: () => import("react").JSX.Element;
+export declare const auto: () => import("react").JSX.Element;

package/dist/components/Grid/tests/Grid.stories.js

@@ -0,0 +1,170 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Grid from "../index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Utilities/Grid",
+    component: Grid,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/grid",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item title="gap: 2">
+			<Grid gap={2} columns={2}>
+				{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="align: center">
+			<Grid gap={2} columns={2} align="center">
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					1
+				</View>
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
+					2
+				</View>
+			</Grid>
+		</Example.Item>
+		<Example.Item title="justify: center">
+			<Grid gap={2} columns="200px 200px" justify="center">
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					1
+				</View>
+				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					2
+				</View>
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const layout = () => (<Example>
+		<Example.Item title="simple: 2 rows, 3 columns">
+			<Grid gap={4} columns={3} rows={2}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="columns template, 1fr 2fr 1fr">
+			<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="rows template, 1fr 2fr">
+			<Grid gap={4} columns={3} rows="1fr 2fr">
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="responsive">
+			<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
+				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const itemLayout = () => (<Example>
+		<Example.Item title="column, start 1, end 3">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item colStart={1} colEnd={3}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="column, start 1, span 2">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item colStart={1} colSpan={2}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="row, start 1, end 3">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowEnd={3}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="row, start 1, span 2">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowSpan={2}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+
+		<Example.Item title="responsive">
+			<Grid gap={4} columns={3} rows={2}>
+				<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						1
+					</View>
+				</Grid.Item>
+				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const areas = () => (<Example>
+		<Example.Item title="simple: 2 rows, 3 columns">
+			<Grid gap={4} rows={2} areas={["a .", "a b"]}>
+				{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							{area}
+						</View>
+					</Grid.Item>))}
+			</Grid>
+		</Example.Item>
+	</Example>);
+export const auto = () => (<Example>
+		<Example.Item title="auto flow: column">
+			<Grid gap={4} autoFlow="column" rows={2} columns={2}>
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="auto rows">
+			<Grid gap={4} autoRows="100px" columns={2}>
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+		<Example.Item title="auto columns">
+			<Grid gap={4} autoColumns="100px" autoFlow="column">
+				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						{i}
+					</View>))}
+			</Grid>
+		</Example.Item>
+	</Example>);

package/dist/components/Icon/Icon.module.css

@@ -1 +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-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
+.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%;width:auto}.--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-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}

package/dist/components/Link/Link.d.ts

@@ -2,5 +2,5 @@ declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Ac
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";
-} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Link;

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "className" | "attributes" | "disabled" | "type" | "onClick" | "href"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href"> & {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";

package/dist/components/Loader/Loader.module.css

@@ -1 +1 @@
-@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}
+@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--m{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--l{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--xl{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}

package/dist/components/Loader/Loader.types.d.ts

@@ -1,6 +1,6 @@
 import type * as G from "../../types/global";
 export type Props = {
-    size?: G.Responsive<"small" | "medium">;
+    size?: G.Responsive<"small" | "medium" | "large">;
     color?: "primary" | "critical" | "positive" | "inherit";
     className?: G.ClassName;
     attributes?: G.Attributes<"span">;

package/dist/components/Loader/tests/Loader.stories.js

@@ -10,13 +10,15 @@ export default {
     },
 };
 export const size = () => {
-    const attributes = {};
     return (<Example>
 			<Example.Item title="size: medium">
-				<Loader size="medium" attributes={attributes}/>
+				<Loader size="medium"/>
 			</Example.Item>
 			<Example.Item title="size: small">
-				<Loader size="small" attributes={{ "data-foo": "23" }}/>
+				<Loader size="small"/>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<Loader size="large"/>
 			</Example.Item>
 			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
 				<Loader size={{ s: "small", m: "medium" }}/>

package/dist/components/Modal/Modal.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
+import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
@@ -40,7 +41,7 @@ const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, overlayClassName, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
@@ -90,6 +91,7 @@ const Modal = (props) => {
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
         disableUserSelect();
+        disableScroll();
         setDragging(true);
     };
     // Once modal is closed - reset its drag data
@@ -107,6 +109,7 @@ const Modal = (props) => {
             return;
         const handleDragEnd = () => {
             enableUserSelect();
+            enableScroll();
             setDragging(false);
             // Close only when dragging in the closing direction
             // Changing to a different direction will keep the modal opened
@@ -165,10 +168,10 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
-            const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], responsiveClassNames(s, "--position", position));
+            const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
                         ...paddingStyles?.variables,
                         ...responsiveVariables("--rs-modal-size", size),

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--contained{position:absolute}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start.--contained{position:absolute}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end.--contained{position:absolute}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--contained{position:absolute}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--contained{position:absolute}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--m.--contained{position:absolute}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--m.--contained{position:absolute}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--contained{position:absolute}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--contained{position:absolute}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--l.--contained{position:absolute}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--l.--contained{position:absolute}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--contained{position:absolute}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--contained{position:absolute}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--xl.--contained{position:absolute}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--xl.--contained{position:absolute}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--contained{position:absolute}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

package/dist/components/Modal/Modal.types.d.ts

@@ -34,4 +34,4 @@ export type Props = {
     attributes?: G.Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement>;
     };
-} & Pick<OverlayProps, "onOpen" | "active">;
+} & Pick<OverlayProps, "onOpen" | "active" | "containerRef">;

package/dist/components/Modal/tests/Modal.stories.d.ts

@@ -21,5 +21,6 @@ export declare const overflow: () => React.JSX.Element;
 export declare const composition: () => React.JSX.Element;
 export declare const overlay: () => React.JSX.Element;
 export declare const flags: () => React.JSX.Element;
+export declare const containerRef: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;
 export declare const trapFocusEdgeCases: () => React.JSX.Element;

package/dist/components/Modal/tests/Modal.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Modal from "../index.js";
 import View from "../../View/index.js";
 import Button from "../../Button/index.js";
@@ -137,6 +137,33 @@ export const flags = () => {
 			</Example.Item>
 		</Example>);
 };
+export const containerRef = () => {
+    const containerRef = React.useRef(null);
+    const containerRef2 = React.useRef(null);
+    const toggle = useToggle();
+    const toggle2 = useToggle();
+    return (<Example>
+			<Example.Item title={["in scrollable container", "scroll and then open"]}>
+				<View attributes={{ ref: containerRef2 }} borderRadius="medium" height="400px" overflow="auto" backgroundColor="neutral-faded" padding={4}>
+					<View gap={4} align="start">
+						<Button onClick={toggle2.activate}>Open modal</Button>
+						<View height="500px" backgroundColor="primary" width="500px" borderRadius="medium"/>
+					</View>
+					<Modal containerRef={containerRef2} active={toggle2.active} onClose={toggle2.deactivate} position="end">
+						<Placeholder />
+					</Modal>
+				</View>
+			</Example.Item>
+			<Example.Item title="in static container">
+				<View attributes={{ ref: containerRef }} borderRadius="medium" height="400px" overflow="hidden" backgroundColor="neutral-faded" padding={4}>
+					<Button onClick={toggle.activate}>Open modal</Button>
+					<Modal containerRef={containerRef} active={toggle.active} onClose={toggle.deactivate} position="end">
+						<Placeholder />
+					</Modal>
+				</View>
+			</Example.Item>
+		</Example>);
+};
 export const edgeCases = () => {
     const menuModalToggle = useToggle();
     const scrollModalToggle = useToggle();