@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/Tile/Tile.types.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { AnchorAttributes, DivAttributes, Props } from '../_utils/types';
+export interface HeroTextProps extends Props {
+}
+export interface HeroMediaProps extends Props {
+    overlay?: boolean;
+    onOverlayClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export interface TileCommonProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    orientation: 'portrait' | 'landscape';
+}
+export interface InteractableTileProps extends TileCommonProps, DivAttributes {
+    /**
+     * To change tile behaviour
+     * @since 10.19.0
+     */
+    variant?: 'interactive';
+}
+export interface LinkTileProps extends TileCommonProps, AnchorAttributes {
+    /**
+     * To change tile behaviour
+     * @since 10.19.0
+     */
+    variant?: 'link';
+}
+export interface SelectableTileProps extends TileCommonProps, Omit<DivAttributes, 'onClick'> {
+    /**
+     * To change tile behaviour
+     * @since 10.19.0
+     */
+    variant?: 'selectable';
+    /**
+     * A function for controlling <Code>selected</Code> Tile prop.
+     * @since 10.19.0
+     */
+    onClick?: () => {};
+    /**
+     * Only with selectable variant.
+     * @default false
+     * @since 10.19.0
+     */
+    selected?: boolean;
+    /**
+     * Only with selectable variant.
+     * @default false
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+}
+export declare type TileProps = SelectableTileProps | InteractableTileProps | LinkTileProps;

package/dist/Tile/Tile.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tile.types.js.map

package/dist/Tile/Tile.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.types.js","sourceRoot":"","sources":["../../src/Tile/Tile.types.ts"],"names":[],"mappings":""}

package/dist/Tile/index.d.ts

@@ -0,0 +1,2 @@
+export { Tile } from './Tile';
+export { InteractableTileProps, LinkTileProps, SelectableTileProps, TileProps, } from './Tile.types';

package/dist/Tile/index.js

@@ -0,0 +1,2 @@
+export { Tile } from './Tile';
+//# sourceMappingURL=index.js.map

package/dist/Tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/Title/Title.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { TitleProps } from './Title.types';
+export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLDivElement>> & {
+    Pills: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Text: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Subtext: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Actions: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Assets: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Title/Title.js

@@ -0,0 +1,78 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { slotify } from '../_utils/slotify';
+import { StyledAssets, StyledSubtext, StyledText, StyledTitle, StyledTitleActions, StyledTitleContent, StyledTitlePill, } from './Title.styles';
+function isValidElement(element) {
+    return Boolean(element);
+}
+var Title_ = React.forwardRef(function Title_(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = slotify(children, {
+        pills: TitlePills,
+        text: TitleText,
+        subtext: TitleSubtext,
+        actions: TitleActions,
+        assets: TitleAssets,
+    }), pills = _b.pills, text = _b.text, subtext = _b.subtext, actions = _b.actions, assets = _b.assets;
+    var hasActions = isValidElement(actions.slotChildren);
+    var hasAssets = isValidElement(assets.slotChildren);
+    var hasPills = isValidElement(pills.slotChildren);
+    var hasText = isValidElement(text.slotChildren);
+    var hasSubtext = isValidElement(subtext.slotChildren);
+    var isEmpty = [hasActions, hasAssets, hasPills, hasText, hasSubtext].every(function (el) { return !el; });
+    if (isEmpty) {
+        return null;
+    }
+    return (React.createElement(StyledTitle, __assign({ ref: ref }, props),
+        hasAssets && (React.createElement(StyledAssets, __assign({ ref: assets.slotRef }, assets.slotProps), assets.slotChildren)),
+        React.createElement(StyledTitleContent, { "$hasActions": hasActions },
+            hasText && (React.createElement(StyledText, __assign({ ref: text.slotRef }, text.slotProps), text.slotChildren)),
+            hasPills && (React.createElement(StyledTitlePill, __assign({ ref: pills.slotRef }, pills.slotProps), pills.slotChildren)),
+            hasSubtext && (React.createElement(StyledSubtext, __assign({ ref: subtext.slotRef }, subtext.slotProps, { color: "gray45" }), subtext.slotChildren))),
+        hasActions && (React.createElement(StyledTitleActions, __assign({ ref: actions.slotRef }, actions.slotProps), actions.slotChildren))));
+});
+var TitlePills = React.forwardRef(function TitlePills() {
+    return React.createElement("div", null);
+});
+var TitleText = React.forwardRef(function TitleText() {
+    return React.createElement("div", null);
+});
+var TitleSubtext = React.forwardRef(function TitleSubtext() {
+    return React.createElement("div", null);
+});
+var TitleActions = React.forwardRef(function TitleActions() {
+    return React.createElement("div", null);
+});
+var TitleAssets = React.forwardRef(function TitleAssets() {
+    return React.createElement("div", null);
+});
+export var Title = addSubcomponents({
+    Pills: TitlePills,
+    Text: TitleText,
+    Subtext: TitleSubtext,
+    Actions: TitleActions,
+    Assets: TitleAssets,
+}, Title_);
+//# sourceMappingURL=Title.js.map

package/dist/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../src/Title/Title.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C,OAAO,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,MAAM,gBAAgB,CAAA;AAGvB,SAAS,cAAc,CAAC,OAAgB;IACtC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA;AACzB,CAAC;AAED,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,MAAM,CACzE,EAAsB,EACtB,GAAG;IADD,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAGd,IAAA,KAA4C,OAAO,CAAC,QAAQ,EAAE;QAClE,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,WAAW;KACpB,CAAC,EANM,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAM3C,CAAA;IAEF,IAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;IACvD,IAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IACrD,IAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IACnD,IAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACjD,IAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;IACvD,IAAM,OAAO,GAAG,CAAC,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,KAAK,CAC1E,UAAC,EAAE,IAAK,OAAA,CAAC,EAAE,EAAH,CAAG,CACZ,CAAA;IAED,IAAI,OAAO,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,WAAW,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK;QAC7B,SAAS,IAAI,CACZ,oBAAC,YAAY,aAAC,GAAG,EAAE,MAAM,CAAC,OAAO,IAAM,MAAM,CAAC,SAAS,GACpD,MAAM,CAAC,YAAY,CACP,CAChB;QACD,oBAAC,kBAAkB,mBAAc,UAAU;YACxC,OAAO,IAAI,CACV,oBAAC,UAAU,aAAC,GAAG,EAAE,IAAI,CAAC,OAAO,IAAM,IAAI,CAAC,SAAS,GAC9C,IAAI,CAAC,YAAY,CACP,CACd;YACA,QAAQ,IAAI,CACX,oBAAC,eAAe,aAAC,GAAG,EAAE,KAAK,CAAC,OAAO,IAAM,KAAK,CAAC,SAAS,GACrD,KAAK,CAAC,YAAY,CACH,CACnB;YACA,UAAU,IAAI,CACb,oBAAC,aAAa,aACZ,GAAG,EAAE,OAAO,CAAC,OAAO,IAChB,OAAO,CAAC,SAAS,IACrB,KAAK,EAAC,QAAQ,KAEb,OAAO,CAAC,YAAY,CACP,CACjB,CACkB;QACpB,UAAU,IAAI,CACb,oBAAC,kBAAkB,aAAC,GAAG,EAAE,OAAO,CAAC,OAAO,IAAM,OAAO,CAAC,SAAS,GAC5D,OAAO,CAAC,YAAY,CACF,CACtB,CACW,CACf,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,SAAS,UAAU;IACjB,OAAO,gCAAO,CAAA;AAChB,CAAC,CACF,CAAA;AACD,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,SAAS,SAAS;IAChB,OAAO,gCAAO,CAAA;AAChB,CAAC,CACF,CAAA;AACD,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,SAAS,YAAY;IACnB,OAAO,gCAAO,CAAA;AAChB,CAAC,CACF,CAAA;AACD,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,SAAS,YAAY;IACnB,OAAO,gCAAO,CAAA;AAChB,CAAC,CACF,CAAA;AACD,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,SAAS,WAAW;IAClB,OAAO,gCAAO,CAAA;AAChB,CAAC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,gBAAgB,CACnC;IACE,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,YAAY;IACrB,MAAM,EAAE,WAAW;CACpB,EACD,MAAM,CACP,CAAA"}

package/dist/Title/Title.styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const StyledTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAssets: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleContent: import("styled-components").StyledComponent<"div", any, {
+    $hasActions: boolean;
+}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledTitlePill: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledTitleActions: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("..").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledSubtext: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/Title/Title.styles.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { StyledActions } from '../Content/Content.styles';
+import { StyledPill } from '../Pill/Pill.styles';
+import { Typography } from '../Typography/Typography';
+import { spacing } from '../_styles/spacing';
+export var StyledTitle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  align-items: flex-start;\n"])));
+export var StyledAssets = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: ", "px;\n"], ["\n  margin-right: ", "px;\n"])), spacing.md);
+export var StyledTitleContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-self: center;\n\n  ", "\n"], ["\n  align-self: center;\n\n  ", "\n"])), function (_a) {
+    var $hasActions = _a.$hasActions;
+    return $hasActions && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-right: ", "px;\n    "], ["\n      margin-right: ", "px;\n    "])), spacing.lg);
+});
+export var StyledText = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  > h1,\n  > h2,\n  > h3 {\n    display: inline;\n  }\n"], ["\n  > h1,\n  > h2,\n  > h3 {\n    display: inline;\n  }\n"])));
+export var StyledTitlePill = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: ", "px;\n\n  ", " {\n    vertical-align: text-top;\n  }\n"], ["\n  margin-left: ", "px;\n\n  ", " {\n    vertical-align: text-top;\n  }\n"])), spacing.sm, StyledPill);
+export var StyledTitleActions = styled(StyledActions)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+export var StyledSubtext = styled(Typography)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=Title.styles.js.map

package/dist/Title/Title.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.styles.js","sourceRoot":"","sources":["../../src/Title/Title.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,qHAAA,kDAGpC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,gGAAA,oBACpB,EAAU,OAC3B,KADiB,OAAO,CAAC,EAAE,CAC3B,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,wGAA0B,+BAGlE,EAIC,IACJ,KALG,UAAC,EAAe;QAAb,WAAW,iBAAA;IACd,OAAA,WAAW,IACX,GAAG,wGAAA,wBACe,EAAU,WAC3B,KADiB,OAAO,CAAC,EAAE,CAC3B;AAHD,CAGC,CACJ,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,8HAAA,2DAMpC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,IAAI,+IAAA,mBACzB,EAAU,WAEvB,EAAU,0CAGb,KALgB,OAAO,CAAC,EAAE,EAEvB,UAAU,CAGb,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,aAAa,CAAC,6FAAA,0BAEtD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,0FAAA,uBAE9C,IAAA,CAAA"}

package/dist/Title/Title.types.d.ts

@@ -0,0 +1,3 @@
+import { DivAttributes } from '../_utils/types';
+export interface TitleProps extends DivAttributes {
+}

package/dist/Title/Title.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Title.types.js.map

package/dist/Title/Title.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.types.js","sourceRoot":"","sources":["../../src/Title/Title.types.ts"],"names":[],"mappings":""}

package/dist/Title/index.d.ts

@@ -0,0 +1,2 @@
+export { Title } from './Title';
+export { TitleProps } from './Title.types';

package/dist/Title/index.js

@@ -0,0 +1,2 @@
+export { Title } from './Title';
+//# sourceMappingURL=index.js.map

package/dist/Title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Title/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ButtonAttributes, DivAttributes, Props, SpanAttributes } from '../_utils/types';
+import { ToastProps } from './Toast.types';
+/**
+
+ We use toasts to temporarily display information to a user. For example,
+ as a confirmation that an action was successfully or unsuccessfully completed.
+
+ Toasts do not present the user with an action. If an action needs to be
+ performed because of the particular message, use a banner. However, for
+ accessible 'enough time' patterns, Toasts can be extended and can have
+ an action to dismiss the Toast.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-toast--demo)
+
+ @see [Design Guidelines](https://design.procore.com/toast)
+
+ */
+export declare const Toast_: React.ForwardRefExoticComponent<DivAttributes & ToastProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Toast: React.ForwardRefExoticComponent<DivAttributes & ToastProps & React.RefAttributes<HTMLDivElement>> & {
+    Dismiss: React.ForwardRefExoticComponent<ButtonAttributes & Props & React.RefAttributes<HTMLButtonElement>>;
+    Text: React.ForwardRefExoticComponent<SpanAttributes & Props & React.RefAttributes<HTMLSpanElement>>;
+};

package/dist/Toast/Toast.js

@@ -0,0 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Check, Clear, Error } from '@procore/core-icons';
+import React from 'react';
+import { useI18nContext } from '../_hooks/I18n';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { StyledToast, StyledToastButton, StyledToastText } from './Toast.styles';
+/**
+ * Toasts are concise and are written in sentence case with punctuation.
+ * Toasts have a suggested character count limit of 65.
+
+  @since 11.12.0
+ */
+var Text = React.forwardRef(function Label(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledToastText, __assign({ "aria-live": "assertive", "aria-atomic": "true", ref: ref }, props), children));
+});
+/**
+ Button to dismiss/close/hide the Toast. For accessible 'enough time' patterns,
+ Toasts can be extended and have an action to dismiss the Toast. Otherwise,
+ Toasts do not present the user with an action. If an action needs to be performed
+ because of the particular message, use a banner.
+
+ @since 11.12.0
+
+ */
+var Dismiss = React.forwardRef(function ToastDismiss(_a, ref) {
+    var props = __rest(_a, []);
+    var I18n = useI18nContext();
+    return (React.createElement(StyledToastButton, __assign({ ref: ref, variant: "tertiary", "aria-hidden": "false", "aria-label": I18n.t('core.toast.a11y.dismiss') }, props),
+        React.createElement(Clear, null)));
+});
+/**
+
+ We use toasts to temporarily display information to a user. For example,
+ as a confirmation that an action was successfully or unsuccessfully completed.
+
+ Toasts do not present the user with an action. If an action needs to be
+ performed because of the particular message, use a banner. However, for
+ accessible 'enough time' patterns, Toasts can be extended and can have
+ an action to dismiss the Toast.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-toast--demo)
+
+ @see [Design Guidelines](https://design.procore.com/toast)
+
+ */
+export var Toast_ = React.forwardRef(function Toast(_a, ref) {
+    var children = _a.children, variant = _a.variant, props = __rest(_a, ["children", "variant"]);
+    return (React.createElement(StyledToast, __assign({}, props, { "$variant": variant, ref: ref }),
+        variant === 'success' ? React.createElement(Check, { size: "lg" }) : React.createElement(Error, { size: "lg" }),
+        typeof children === 'string' ||
+            (children && typeof children[0] === 'string') ? (
+        // legacy path automates and wraps direct text with the subcomponent
+        React.createElement(StyledToastText, { "$legacy": true }, children)) : (children)));
+});
+Toast_.displayName = 'Toast';
+Dismiss.displayName = 'Toast.Dismiss';
+Text.displayName = 'Toast.Text';
+export var Toast = addSubcomponents({
+    Dismiss: Dismiss,
+    Text: Text,
+}, Toast_);
+//# sourceMappingURL=Toast.js.map

package/dist/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAO7D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGhF;;;;;GAKG;AACH,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,SAAS,KAAK,CAAC,EAAsB,EAAE,GAAG;IAAzB,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACjC,OAAO,CACL,oBAAC,eAAe,0BACJ,WAAW,iBACT,MAAM,EAClB,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,QAAQ,CACO,CACnB,CAAA;AACH,CAAC,CACF,CAAA;AAED;;;;;;;;GAQG;AACH,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,SAAS,YAAY,CAAC,EAAY,EAAE,GAAG;QAAZ,KAAK,cAAV,EAAY,CAAF;IAC9B,IAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,OAAO,CACL,oBAAC,iBAAiB,aAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,UAAU,iBACN,OAAO,gBACP,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,IACzC,KAAK;QAET,oBAAC,KAAK,OAAG,CACS,CACrB,CAAA;AACH,CAAC,CACF,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAGpC,SAAS,KAAK,CAAC,EAA+B,EAAE,GAAG;IAAlC,IAAA,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAK,KAAK,cAA7B,uBAA+B,CAAF;IAC5C,OAAO,CACL,oBAAC,WAAW,eAAK,KAAK,gBAAY,OAAO,EAAE,GAAG,EAAE,GAAG;QAChD,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,IAAI,GAAG;QACjE,OAAO,QAAQ,KAAK,QAAQ;YAC7B,CAAC,QAAQ,IAAI,OAAQ,QAA2B,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClE,oEAAoE;QACpE,oBAAC,eAAe,uBAAU,QAAQ,CAAmB,CACtD,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACW,CACf,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,OAAO,CAAA;AAC5B,OAAO,CAAC,WAAW,GAAG,eAAe,CAAA;AACrC,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;AAE/B,MAAM,CAAC,IAAM,KAAK,GAAG,gBAAgB,CACnC;IACE,OAAO,SAAA;IACP,IAAI,MAAA;CACL,EACD,MAAM,CACP,CAAA"}

package/dist/Toast/Toast.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastVariant } from './Toast.types';
+export declare const StyledToast: import("styled-components").StyledComponent<"div", any, {
+    $variant: ToastVariant;
+}, never>;
+export declare const StyledToastText: import("styled-components").StyledComponent<"span", any, {
+    $legacy?: boolean | undefined;
+}, never>;
+export declare const StyledToastButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/Toast/Toast.styles.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { Button } from '../Button';
+import { getTypographyIntent, typographyWeights, } from '../Typography/Typography.styles';
+import { borderRadius } from '../_styles/borderRadius';
+import { colors } from '../_styles/colors';
+import { getShadow } from '../_styles/shadows';
+import { spacing } from '../_styles/spacing';
+export var StyledToast = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  display: flex;\n  min-height: 48px;\n  padding: ", "px ", "px;\n  width: 550px;\n"], ["\n  ", "\n\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  display: flex;\n  min-height: 48px;\n  padding: ", "px ", "px;\n  width: 550px;\n"
+    // $legacy is direct string inside Toast. Next is with subcomponents
+])), getShadow(4, 'bottom'), function (_a) {
+    var $variant = _a.$variant;
+    return $variant === 'success' ? colors.green30 : colors.red50;
+}, borderRadius.md, colors.white, spacing.md, spacing.xl);
+// $legacy is direct string inside Toast. Next is with subcomponents
+export var StyledToastText = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-weight: ", ";\n  overflow: hidden;\n\n  ", "\n"], ["\n  ", "\n  font-weight: ", ";\n  overflow: hidden;\n\n  ", "\n"])), getTypographyIntent('body'), typographyWeights.semibold, function (_a) {
+    var $legacy = _a.$legacy;
+    return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
+});
+export var StyledToastButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: 0;\n  color: ", ";\n  padding: 0;\n  margin-left: auto;\n"], ["\n  line-height: 0;\n  color: ", ";\n  padding: 0;\n  margin-left: auto;\n"])), colors.white);
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Toast.styles.js.map

package/dist/Toast/Toast.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.styles.js","sourceRoot":"","sources":["../../src/Toast/Toast.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EACL,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAG5C,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,iQAA4B,MAC7D,EAAsB,kDAGJ,EACoC,sBACvC,EAAe,gBACvB,EAAY,uDAGV,EAAU,KAAM,EAAU,wBAEtC;IAED,oEAAoE;KAbhE,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGJ,UAAC,EAAY;QAAV,QAAQ,cAAA;IAC7B,OAAA,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;AAAtD,CAAsD,EACvC,YAAY,CAAC,EAAE,EACvB,MAAM,CAAC,KAAK,EAGV,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,CAEtC,CAAA;AAED,oEAAoE;AACpE,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,IAAI,oIAAuB,MAC7D,EAA2B,mBACd,EAA0B,8BAGvC,EACyE,IAC5E,KANG,mBAAmB,CAAC,MAAM,CAAC,EACd,iBAAiB,CAAC,QAAQ,EAGvC,UAAC,EAAW;QAAT,OAAO,aAAA;IACV,OAAA,OAAO,CAAC,CAAC,CAAC,uBAAgB,OAAO,CAAC,EAAE,QAAK,CAAC,CAAC,CAAC,qBAAc,OAAO,CAAC,EAAE,QAAK;AAAzE,CAAyE,CAC5E,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,+IAAA,gCAEpC,EAAY,0CAGtB,KAHU,MAAM,CAAC,KAAK,CAGtB,CAAA"}

package/dist/Toast/Toast.types.d.ts

@@ -0,0 +1,9 @@
+import { Props } from '../_utils/types';
+export declare type ToastVariant = 'error' | 'success';
+export interface ToastProps extends Props {
+    /**
+     * Controls icon and background color
+     * @since 10.19.0
+     */
+    variant: ToastVariant;
+}

package/dist/Toast/Toast.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toast.types.js.map

package/dist/Toast/Toast.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.js","sourceRoot":"","sources":["../../src/Toast/Toast.types.ts"],"names":[],"mappings":""}

package/dist/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export { ToastProps } from './Toast.types';

package/dist/Toast/index.js

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+//# sourceMappingURL=index.js.map

package/dist/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ToggleButtonProps } from './ToggleButton.types';
+/**
+
+ A toggle button can be used when an element needs to remain active or open
+ for extended periods of time. The affects of a toggle button should visibly
+ change content on the page.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-togglebutton--demo)
+
+ @see [Design Guidelines](https://design.procore.com/toggle-button)
+
+ @a11y  @a11y Important: it is critical the label on a toggle does not change when its `selected` prop changes. Alternatively, if the design were to call for the button label to change from "Mute" to "Unmute," the `aria-pressed` prop should be set to `undefined`.
+
+ @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
+
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/ToggleButton/ToggleButton.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { StyledToggleButton } from './ToggleButton.styles';
+/**
+
+ A toggle button can be used when an element needs to remain active or open
+ for extended periods of time. The affects of a toggle button should visibly
+ change content on the page.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-togglebutton--demo)
+
+ @see [Design Guidelines](https://design.procore.com/toggle-button)
+
+ @a11y  @a11y Important: it is critical the label on a toggle does not change when its `selected` prop changes. Alternatively, if the design were to call for the button label to change from "Mute" to "Unmute," the `aria-pressed` prop should be set to `undefined`.
+
+ @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
+
+ */
+export var ToggleButton = React.forwardRef(function ToggleButton(_a, ref) {
+    var children = _a.children, _b = _a.selected, selected = _b === void 0 ? false : _b, icon = _a.icon, size = _a.size, props = __rest(_a, ["children", "selected", "icon", "size"]);
+    return (React.createElement(StyledToggleButton, __assign({ "aria-pressed": selected }, props, { "$selected": selected, icon: icon, size: size, variant: "tertiary", ref: ref }), children || null));
+});
+ToggleButton.displayName = 'ToggleButton';
+//# sourceMappingURL=ToggleButton.js.map

package/dist/ToggleButton/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAG1C,SAAS,YAAY,CACrB,EAAoD,EACpD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAlD,wCAAoD,CAAF;IAGlD,OAAO,CACL,oBAAC,kBAAkB,6BACH,QAAQ,IAClB,KAAK,iBACE,QAAQ,EACnB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,GAAG,KAEP,QAAQ,IAAI,IAAI,CACE,CACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}

package/dist/ToggleButton/ToggleButton.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledToggleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    $selected: boolean;
+}, never>;

package/dist/ToggleButton/ToggleButton.styles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { Button } from '../Button/Button';
+import { colors } from '../_styles/colors';
+export var StyledToggleButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n  ", "\n}\n"], ["\n\n  ", "\n}\n"])), function (_a) {
+    var $selected = _a.$selected;
+    return $selected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &:disabled {\n        background-color: ", ";\n        color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &:disabled {\n        background-color: ", ";\n        color: ", ";\n      }\n    "])), colors.blue50, colors.white, colors.blue40, colors.white, colors.blue50, colors.white, colors.blue85, colors.white);
+});
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=ToggleButton.styles.js.map

package/dist/ToggleButton/ToggleButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.styles.js","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,oFAAwB,QAEpE,EAoBC,OAEJ,KAtBG,UAAC,EAAa;QAAX,SAAS,eAAA;IACZ,OAAA,SAAS,IACT,GAAG,0XAAA,4BACmB,EAAa,kBACxB,EAAY,kDAGC,EAAa,oBACxB,EAAY,2DAID,EAAa,oBACxB,EAAY,8DAID,EAAa,oBACxB,EAAY,kBAExB,KAjBqB,MAAM,CAAC,MAAM,EACxB,MAAM,CAAC,KAAK,EAGC,MAAM,CAAC,MAAM,EACxB,MAAM,CAAC,KAAK,EAID,MAAM,CAAC,MAAM,EACxB,MAAM,CAAC,KAAK,EAID,MAAM,CAAC,MAAM,EACxB,MAAM,CAAC,KAAK,CAExB;AAnBD,CAmBC,CAEJ,CAAA"}

package/dist/ToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ButtonSizes } from '../Button/Button.types';
+import { ButtonAttributes } from '../_utils/types';
+export interface ToggleButtonProps extends ButtonAttributes {
+    /**
+     * Set the current value of the toggle button
+     * @default false
+     * @since 10.19.0
+     */
+    selected?: boolean;
+    /**
+     * The icon to display on the left side of the label. This should be an
+     * icon from <Code>@procore/core-icons</Code>.
+     * @since 10.19.0
+     */
+    icon?: React.ReactNode;
+    /**
+     * The toggle button size
+     * @since 10.19.0
+     */
+    size?: ButtonSizes;
+}

package/dist/ToggleButton/ToggleButton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToggleButton.types.js.map

package/dist/ToggleButton/ToggleButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":""}

package/dist/ToggleButton/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButton } from './ToggleButton';
+export { ToggleButtonProps } from './ToggleButton.types';

package/dist/ToggleButton/index.js

@@ -0,0 +1,2 @@
+export { ToggleButton } from './ToggleButton';
+//# sourceMappingURL=index.js.map

package/dist/ToggleButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/Token/Token.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DivAttributes, Props, SpanAttributes, SVGAttributes } from '../_utils/types';
+import { TokenProps } from './Token.types';
+/**
+
+ We use tokens in our multi select dropdowns and file attachers to indicate what
+ has been selected or attached. Tokens in these components are removable.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-token--demo)
+
+ @see [Design Guidelines](https://design.procore.com/tokens)
+
+ */
+export declare const Token: React.ForwardRefExoticComponent<DivAttributes & TokenProps & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<SpanAttributes & Props & React.RefAttributes<HTMLSpanElement>>;
+    Remove: React.ForwardRefExoticComponent<SVGAttributes & Props & React.RefAttributes<SVGSVGElement>>;
+};