@arc-ui/components 10.1.0 → 10.2.1

package/dist/_shared/Heading-8c640dd1.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps> & {
+    Proposition: typeof HeadingProposition;
+};
+declare const HeadingProposition: FC<HeadingPropositionProps>;
+interface HeadingPropositionProps {
+    /**
+     * Text to display in the Proposition.
+     */
+    children: ReactNode;
+}
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+}
+export { Heading, HeadingProposition, HeadingPropositionProps, HeadingCasing, HeadingColor, HeadingLevel, HeadingSize, HeadingProps };

package/dist/_shared/Heading-8c640dd1.js

@@ -0,0 +1,35 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { C as Context } from './Surface-3fe44a2a.js';
+
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, props = __rest(_a, ["align", "casing", "children", "color", "level", "size"]);
+    var surface = useContext(Context).surface;
+    var Element = "span";
+    if (level) {
+        Element = "h".concat(level);
+    }
+    return (React.createElement(Element, __assign({ className: classNames((_b = {
+                "arc-Heading": true
+            },
+            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
+            _b["arc-Heading--casingNone"] = casing === "none",
+            _b["arc-Heading--colorBrand"] = color === "brand",
+            _b["arc-Heading--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+var HeadingProposition = function (_a) {
+    var children = _a.children;
+    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
+};
+HeadingProposition.displayName = "Heading.Proposition";
+Heading.Proposition = HeadingProposition;
+
+export { Heading as H };

package/dist/_shared/Icon-4d523b46.d.ts

@@ -0,0 +1,34 @@
+import { icons } from "@arc-ui/tokens";
+import { FC } from "react";
+/**
+ * Use `Icon` to display brand iconography.
+ */
+declare const Icon: FC<IconProps>;
+declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
+interface IconProps {
+    /**
+     * Color of the Icon.
+     */
+    color?: typeof colors[number];
+    /**
+     * Should the Icon component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should a selected variant of the Icon be shown?
+     */
+    isSelected?: boolean;
+    /**
+     * Icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * Alternative text label for the Icon.
+     */
+    label?: string;
+    /**
+     * Size of the Icon, in pixels.
+     */
+    size?: number;
+}
+export { Icon, colors, IconProps };

package/dist/_shared/Icon-4d523b46.js

@@ -0,0 +1,27 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { i as iconsSelected } from './index.es-f5886c3a.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { C as Context } from './Surface-3fe44a2a.js';
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+var Icon = function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
+    var surface = useContext(Context).surface;
+    return (React.createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--".concat(icon).concat(isSelected && iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, filterDataAttrs(props))));
+};
+
+export { Icon as I };

package/dist/_shared/Image-a3225049.d.ts

@@ -0,0 +1,94 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+import { anchorPoints } from "./index-9483ad5f";
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+declare const Image: FC<ImageProps> & {
+    Source: typeof ImageSource;
+};
+declare const ImageSource: FC<ImageSourceProps>;
+interface ImageSourceProps {
+    /**
+     * The intrinsic height of the ImageSource, in pixels
+     */
+    height?: number;
+    /**
+     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
+     */
+    media?: string;
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
+     */
+    sizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet: string;
+    /**
+     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
+     */
+    type?: string;
+    /**
+     * The intrinsic width of the ImageSource, in pixels
+     */
+    width?: number;
+}
+declare const fitOptions: readonly ["cover"];
+declare const loadingOptions: readonly ["eager", "lazy"];
+declare const overlayOptions: readonly ["scrimBottomDark"];
+interface ImageProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Alternative text for the Image, shown if the image cannot be displayed.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Image if using fit="cover".
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Optionally enable HTML <picture> functionality by passing `Image.Source`
+     * components as children.
+     */
+    children?: ReactNode;
+    /**
+     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
+     */
+    fillColor?: string;
+    /**
+     * Fit of the Image.
+     */
+    fit?: typeof fitOptions[number];
+    /**
+     * Height dimension of the Image, in pixels. If fit="cover", the height in which
+     * to fit the Image. Otherwise, the intrinsic height of the Image element.
+     */
+    height?: number;
+    /**
+     * Loading behaviour of the Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
+     * Should not be used if the image has a rasterized overlay.
+     */
+    overlay?: typeof overlayOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
+     */
+    sizes?: string;
+    /**
+     * Image `src`. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
+     */
+    srcSet?: string;
+    /**
+     * Width dimension of the Image, in pixels. If fit="cover", the width in which
+     * to fit the Image. Otherwise, the intrinsic width of the Image element.
+     */
+    width?: number;
+}
+export { Image, ImageSource, ImageSourceProps, fitOptions, loadingOptions, overlayOptions, ImageProps };

package/dist/_shared/Image-a3225049.js

@@ -0,0 +1,39 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { useEffect } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+var Image = function (_a) {
+    var _b;
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== ImageSource) {
+                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
+            }
+        });
+    }, [children]);
+    var img = (React.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React.createElement("div", __assign({ className: classNames((_b = {
+                "arc-Image": true,
+                "arc-Image--cover": fit === "cover"
+            },
+            _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
+            _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React.createElement("picture", null,
+        children,
+        " ",
+        img)) : (React.createElement(React.Fragment, null, img))));
+};
+var ImageSource = function (_a) {
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
+    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
+};
+ImageSource.displayName = "Image.Source";
+Image.Source = ImageSource;
+
+export { Image as I };

package/dist/_shared/Section-927988cb.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+declare const Section: FC<SectionProps>;
+interface SectionProps {
+    /**
+     * Content to display in the Section.
+     */
+    children: ReactNode;
+    /**
+     * Should the Section be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the width of this Section be unconstrained (filling the viewport)?
+     */
+    isFullWidth?: boolean;
+}
+export { Section, SectionProps };

package/dist/_shared/Section-927988cb.js

@@ -0,0 +1,17 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React from 'react';
+
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+var Section = function (_a) {
+    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
+    return (React.createElement("div", __assign({ className: classNames({
+            "arc-Section": true,
+            "arc-Section--fullWidth": isFullWidth,
+            "arc-Section--debugVisible": isDebugVisible
+        }) }, filterDataAttrs(props)), children));
+};
+
+export { Section as S };

package/dist/_shared/Surface-3fe44a2a.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, HTMLAttributes } from "react";
+type SurfaceBackground = "light" | "dark";
+declare const Context: React.Context<{
+    surface: SurfaceBackground;
+}>;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+declare const Surface: FC<SurfaceProps>;
+declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Background colour of the Surface. Contents will change colour to meet
+     * accessibility requirements.
+     */
+    background?: typeof backgrounds[number];
+    /**
+     * Content to display on the Surface.
+     */
+    children?: any;
+    /**
+     * Should the Surface grow to take up all the available vertical space? Most
+     * of the time this should not be required, but useful to fix issues in
+     * certain layout combinations.
+     */
+    growVertically?: boolean;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the padding applied to all sides of the Surface. Use to prevent margin collapsing issues.
+     */
+    padding?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the horizontal padding applied to the left and right of the Surface.
+     */
+    paddingHorizontal?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the vertical padding applied to the top and bottom of the Surface.
+     */
+    paddingVertical?: SurfacePadding;
+}
+export { Surface, backgrounds, backgroundsBT, SurfacePadding, SurfaceProps, Context as SurfaceContext };

package/dist/_shared/Surface-3fe44a2a.js

@@ -0,0 +1,49 @@
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { createContext } from 'react';
+
+var defaultContext = { surface: "light" };
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    var surface = "light";
+    if (background === "black" ||
+        background === "brand" ||
+        background === "brand-flat" ||
+        background === "dark" ||
+        background === "darker") {
+        surface = "dark";
+    }
+    return (React.createElement(Provider, { value: { surface: surface } },
+        React.createElement("div", __assign({ className: classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background &&
+                    camelCase(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b)) }, filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "black",
+    "brand",
+    "brand-flat",
+    "dark",
+    "darker",
+    "coral",
+    "turquoise",
+    "light",
+    "lighter",
+    "white"
+];
+var backgrounds = __spreadArray([], backgroundsShared, true);
+var backgroundsBT = __spreadArray([], backgroundsShared, true);
+
+export { Context as C, Surface as S, backgroundsBT as a, backgrounds as b };

package/dist/_shared/Text-1c43d82b.d.ts

@@ -0,0 +1,34 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Text` to display text.
+ */
+declare const Text: FC<TextProps>;
+type Tone = "default" | "supporting" | "muted";
+type TextSize = "xs" | "s" | "m" | "l";
+interface TextProps {
+    /**
+     * Alignment of the Text.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Text and inline markup to display.
+     */
+    children: ReactNode;
+    /**
+     * Should the Text component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should the Text width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+    /**
+     * Typographic Text size.
+     */
+    size?: TextSize;
+    /**
+     * Visual emphasis of the Text.
+     */
+    tone?: Tone;
+}
+export { Text, Tone, TextSize, TextProps };

package/dist/_shared/Text-1c43d82b.js

@@ -0,0 +1,26 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
+import { c as classNames } from './index-56d9df62.js';
+import React, { useContext } from 'react';
+import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { C as Context } from './Surface-3fe44a2a.js';
+
+/**
+ * Use `Text` to display text.
+ */
+var Text = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
+    var surface = useContext(Context).surface;
+    return (React.createElement("span", __assign({ className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+
+export { Text as T };

package/dist/_shared/handle-link-click-35e09d0c.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from "react";
+interface IHandleLinkClick {
+    handler?: () => void;
+    preventDefault?: boolean;
+}
+declare const handleLinkClick: ({ handler, preventDefault }: IHandleLinkClick) => (e: MouseEvent<HTMLAnchorElement>) => void;
+export { handleLinkClick };

package/dist/_shared/handle-link-click-35e09d0c.js

@@ -0,0 +1,13 @@
+var handleLinkClick = function (_a) {
+    var handler = _a.handler, _b = _a.preventDefault, preventDefault = _b === void 0 ? true : _b;
+    return function (e) {
+        if (preventDefault && handler) {
+            e.preventDefault();
+        }
+        if (handler) {
+            handler();
+        }
+    };
+};
+
+export { handleLinkClick as h };

package/dist/_shared/index-56d9df62.js

@@ -0,0 +1,61 @@
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+export { classNames as c };

package/dist/_shared/index-9483ad5f.d.ts

@@ -0,0 +1,14 @@
+declare const anchorPoints: readonly [
+    "N",
+    "NE",
+    "E",
+    "SE",
+    "S",
+    "SW",
+    "W",
+    "NW",
+    "C"
+];
+export { anchorPoints };
+export * from "./index-e3c83626";
+export * from "./suffix-modifier-2a93822c";

package/dist/_shared/index-c81c9401.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormControl-9dc9ecc3";
+export * from "../Card/index";
+export * from "./use-media-query-f11805d4";
+export * from "../TextInput/index";

package/dist/_shared/index-e3c83626.d.ts

@@ -0,0 +1,2 @@
+declare const filterDataAttrs: (props: Object) => {};
+export { filterDataAttrs };