@livepeer/design-system 1.0.1 → 1.0.2

package/dist/components/AppBar.d.ts

@@ -1,5 +1,5 @@
 export declare const AppBar: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    size?: "1" | "2" | "3" | 1 | 2 | 3 | undefined;
+    size?: 1 | "1" | "2" | "3" | 2 | 3 | undefined;
     sticky?: boolean | "true" | undefined;
     glass?: boolean | "true" | undefined;
     border?: boolean | "true" | undefined;

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 export declare const Button: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     size?: number | "1" | "2" | "3" | "4" | undefined;
-    variant?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | "neutral" | "transparentWhite" | "transparentBlack" | undefined;
+    variant?: "gray" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | "neutral" | "transparentWhite" | "transparentBlack" | undefined;
     ghost?: boolean | "true" | undefined;
 }, {
     bp1: "(min-width: 520px)";

package/dist/components/DropdownMenu.d.ts

@@ -3761,7 +3761,7 @@ declare const DropdownMenuItem: import("@stitches/react/types/styled-component")
         };
     };
 }>>, {
-    color?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
+    color?: "gray" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
 }, {
     bp1: "(min-width: 520px)";
     bp2: "(min-width: 900px)";
@@ -4512,7 +4512,7 @@ declare const DropdownMenuItem: import("@stitches/react/types/styled-component")
     };
 }>>;
 declare const DropdownMenuRadioItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<DialogMenuRadioItemProps, "color" | "translate" | "hidden" | "style" | "css" | "className" | "slot" | "title" | "onSelect" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "disabled" | "textValue" | "value"> & React.RefAttributes<HTMLDivElement>>, {
-    color?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
+    color?: "gray" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
 }, {
     bp1: "(min-width: 520px)";
     bp2: "(min-width: 900px)";
@@ -5263,7 +5263,7 @@ declare const DropdownMenuRadioItem: import("@stitches/react/types/styled-compon
     };
 }>>;
 declare const DropdownMenuCheckboxItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<DialogMenuCheckboxItemProps, "color" | "translate" | "hidden" | "style" | "css" | "className" | "slot" | "title" | "onSelect" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "disabled" | "textValue" | "checked" | "onCheckedChange"> & React.RefAttributes<HTMLDivElement>>, {
-    color?: "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
+    color?: "gray" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "grass" | "lime" | "yellow" | "amber" | "orange" | "brown" | "primary" | undefined;
 }, {
     bp1: "(min-width: 520px)";
     bp2: "(min-width: 900px)";

package/dist/components/Promo.d.ts

@@ -1,6 +1,6 @@
 export declare const Promo: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     size?: number | "1" | "2" | "3" | undefined;
-    variant?: "loContrast" | "red" | "violet" | "indigo" | "blue" | "green" | "subtle" | undefined;
+    variant?: "loContrast" | "subtle" | "blue" | "green" | "indigo" | "violet" | "red" | undefined;
     rounded?: boolean | "true" | undefined;
     border?: boolean | "true" | undefined;
 }, {

package/dist/custom/AppBar.d.ts

@@ -1,5 +1,5 @@
 export declare const AppBar: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    size?: "1" | "2" | "3" | 1 | 2 | 3 | undefined;
+    size?: 1 | "1" | "2" | "3" | 2 | 3 | undefined;
     sticky?: boolean | "true" | undefined;
     glass?: boolean | "true" | undefined;
     border?: boolean | "true" | undefined;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { Heading } from "./components/Heading";
 export { IconButton } from "./components/IconButton";
 export { Image } from "./components/Image";
 export { Kbd } from "./components/Kbd";
+export { Label } from "./components/Label";
 export { Link } from "./components/Link";
 export { Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, } from "./components/Menu";
 export { Overlay } from "./components/Overlay";
@@ -33,6 +34,7 @@ export { Panel } from "./components/Panel";
 export { Paragraph } from "./components/Paragraph";
 export { Popover, PopoverClose, PopoverContent, PopoverTrigger, } from "./components/Popover";
 export { ProgressBar } from "./components/ProgressBar";
+export { Promo } from "./components/Promo";
 export { Radio, RadioGroup } from "./components/Radio";
 export { RadioCard, RadioCardGroup } from "./components/RadioCard";
 export { Section } from "./components/Section";
@@ -42,6 +44,7 @@ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTri
 export { SimpleToggle } from "./components/SimpleToggle";
 export { Skeleton } from "./components/Skeleton";
 export { Slider } from "./components/Slider";
+export { SnackbarProvider, useSnackbar } from "./components/Snackbar";
 export { Status } from "./components/Status";
 export { Sub } from "./components/Sub";
 export { Sup } from "./components/Sup";
@@ -55,4 +58,4 @@ export { TextField } from "./components/TextField";
 export { Tooltip } from "./components/Tooltip";
 export { TreeItem } from "./components/TreeItem";
 export { VerifiedBadge } from "./components/VerifiedBadge";
-export { config, css, getCssText, globalCss, keyframes, styled, getThemes } from "./stitches.config";
+export { config, css, getCssText, getThemes, globalCss, keyframes, styled, } from "./stitches.config";

package/dist/index.es.js

@@ -4,7 +4,7 @@ export { Arrow as HoverCardArrow, Content as HoverCardContent, Root as HoverCard
 export { Portal } from '@radix-ui/react-portal';
 export { Corner as ScrollAreaCorner, Root as ScrollAreaRoot, Scrollbar as ScrollAreaScrollbar, Thumb as ScrollAreaThumb, Viewport as ScrollAreaViewport } from '@radix-ui/react-scroll-area';
 import { __assign, __spreadArray, __rest } from 'tslib';
-import React from 'react';
+import React, { createContext, useState, useContext } from 'react';
 import { createStitches } from '@stitches/react';
 import { gray, mauve, slate, sage, olive, sand, tomato, red, crimson, pink, plum, purple, violet, indigo, blue, sky, mint, cyan, teal, green, grass, lime, yellow, amber, orange, brown, bronze, gold, whiteA, blackA, grayDark, mauveDark, slateDark, sageDark, oliveDark, sandDark, tomatoDark, redDark, crimsonDark, pinkDark, plumDark, purpleDark, violetDark, indigoDark, blueDark, skyDark, mintDark, cyanDark, tealDark, greenDark, grassDark, limeDark, yellowDark, amberDark, orangeDark, brownDark, bronzeDark, goldDark } from '@radix-ui/colors';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -19,12 +19,14 @@ import { TooltipProvider } from '@radix-ui/react-tooltip';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import merge from 'lodash.merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import { CSSTransition } from 'react-transition-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
@@ -260,6 +262,7 @@ createTheme("dark-theme", {
 var lightThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, gray), mauve), slate), sage), olive), sand), tomato), red), crimson), pink), plum), purple), violet), indigo), blue), sky), mint), cyan), teal), green), grass), lime), yellow), amber), orange), brown), bronze), gold), whiteA), blackA);
 var darkThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, grayDark), mauveDark), slateDark), sageDark), oliveDark), sandDark), tomatoDark), redDark), crimsonDark), pinkDark), plumDark), purpleDark), violetDark), indigoDark), blueDark), skyDark), mintDark), cyanDark), tealDark), greenDark), grassDark), limeDark), yellowDark), amberDark), orangeDark), brownDark), bronzeDark), goldDark), whiteA), blackA);
 var naturalPairingsKeys = [
+    "gray",
     "tomato",
     "red",
     "crimson",
@@ -302,8 +305,10 @@ var naturalPairings = {
     amber: "sand",
     orange: "sand",
     brown: "sand",
+    gray: "sand",
 };
 __spreadArray(__spreadArray([], naturalPairingsKeys.map(function (e) { return "light-theme-".concat(e); }), true), naturalPairingsKeys.map(function (e) { return "dark-theme-".concat(e); }), true);
+// TODO fix this typing
 var getThemes = function () {
     var themes = naturalPairingsKeys.reduce(function (prev, primary) {
         var _a;
@@ -3127,6 +3132,13 @@ var Kbd = styled("kbd", {
     },
 });
 
+var Label = styled(LabelPrimitive.Root, Text, {
+    fontSize: "$2",
+    display: "inline-block",
+    verticalAlign: "middle",
+    cursor: "default",
+});
+
 var _a$5;
 var Link = styled("a", (_a$5 = {
         alignItems: "center",
@@ -3318,6 +3330,117 @@ var ProgressBar = React.forwardRef(function (_a, forwardedRef) {
 });
 ProgressBar.displayName = "ProgressBar";
 
+var Promo = styled("div", {
+    // Reset
+    boxSizing: "border-box",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    p: "$4",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "$4",
+    variants: {
+        size: {
+            "1": {
+                py: "$2",
+                px: "$3",
+            },
+            "2": {
+                py: "$3",
+                px: "$4",
+            },
+            "3": {
+                py: "$4",
+                px: "$5",
+            },
+        },
+        variant: {
+            loContrast: {
+                backgroundColor: "$loContrast",
+            },
+            subtle: {
+                backgroundColor: "$neutral2",
+                boxShadow: "0 0 0 1px $colors$neutral6",
+            },
+            blue: {
+                backgroundColor: "$blue2",
+                boxShadow: "0 0 0 1px $colors$blue6",
+            },
+            green: {
+                backgroundColor: "$green2",
+                boxShadow: "0 0 0 1px $colors$green6",
+            },
+            indigo: {
+                backgroundColor: "$indigo2",
+                boxShadow: "0 0 0 1px $colors$indigo6",
+            },
+            violet: {
+                backgroundColor: "$violet2",
+                boxShadow: "0 0 0 1px $colors$violet6",
+            },
+            red: {
+                backgroundColor: "$red2",
+                boxShadow: "0 0 0 1px $colors$red6",
+            },
+        },
+        rounded: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+        border: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            border: "true",
+            variant: "subtle",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+        {
+            border: "true",
+            variant: "blue",
+            css: {
+                borderColor: "$blue11",
+            },
+        },
+        {
+            border: "true",
+            variant: "indigo",
+            css: {
+                borderColor: "$indigo11",
+            },
+        },
+        {
+            border: "true",
+            variant: "violet",
+            css: {
+                borderColor: "$violet11",
+            },
+        },
+        {
+            border: "true",
+            variant: "loContrast",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "1",
+        variant: "subtle",
+    },
+});
+
 var _a$4;
 var RadioGroup = styled(RadioGroupPrimitive.Root, {
     display: "flex",
@@ -3847,6 +3970,268 @@ var Slider = React.forwardRef(function (props, forwardedRef) {
 });
 Slider.displayName = "Slider";
 
+var transitionStyles = {
+    ".snackbar-enter": {
+        opacity: 0,
+    },
+    ".snackbar-exit-active": {
+        opacity: 0,
+    },
+    ".snackbar-enter-active": {
+        opacity: 1,
+    },
+    ".snackbar-enter-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-left": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-active-top-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-wrapper-top-left": {
+        justifyContent: "flex-start",
+        top: "8px",
+    },
+    ".snackbar-wrapper-top-center": {
+        top: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-top-right": {
+        top: "8px",
+        justifyContent: "flex-end",
+    },
+    ".snackbar-wrapper-bottom-left": {
+        bottom: "8px",
+        justifyContent: "flex-start",
+    },
+    ".snackbar-wrapper-bottom-center": {
+        bottom: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-bottom-right": {
+        bottom: "8px",
+        justifyContent: "flex-end",
+    },
+};
+
+// type coercion for bad typing in lib
+var CSSTransitionTyped = CSSTransition;
+// Snackbar default values
+var defaultPosition = "bottom-center";
+var defaultDuration = 5000;
+var defaultInterval = 250;
+var positions = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+];
+// Context used by the hook useSnackbar() and HoC withSnackbar()
+var SnackbarContext = createContext({});
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    // Current open state
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    // Current timeout ID
+    var _c = useState(null), timeoutId = _c[0], setTimeoutId = _c[1];
+    // Snackbar's text
+    var _d = useState(""), text = _d[0], setText = _d[1];
+    // Snackbar's duration
+    var _e = useState(defaultDuration), duration = _e[0], setDuration = _e[1];
+    // Snackbar's position
+    var _f = useState(defaultPosition), position = _f[0], setPosition = _f[1];
+    // Custom styles for the snackbar itself
+    var _g = useState({}), customStyles = _g[0], setCustomStyles = _g[1];
+    // Custom styles for the close button
+    var _h = useState({}), closeCustomStyles = _h[0], setCloseCustomStyles = _h[1];
+    var triggerSnackbar = function (text, duration, position, style, closeStyle) {
+        setText(text);
+        setDuration(duration);
+        setPosition(position);
+        setCustomStyles(style);
+        setCloseCustomStyles(closeStyle);
+        setOpen(true);
+    };
+    // Manages all the snackbar's opening process
+    var openSnackbar = function (text, duration, position, style, closeStyle) {
+        // Closes the snackbar if it is already open
+        if (open === true) {
+            setOpen(false);
+            setTimeout(function () {
+                triggerSnackbar(text, duration, position, style, closeStyle);
+            }, defaultInterval);
+        }
+        else {
+            triggerSnackbar(text, duration, position, style, closeStyle);
+        }
+    };
+    // Closes the snackbar just by setting the "open" state to false
+    var closeSnackbar = function () {
+        setOpen(false);
+    };
+    // Returns the Provider that must wrap the application
+    return (React.createElement(SnackbarContext.Provider, { value: { openSnackbar: openSnackbar, closeSnackbar: closeSnackbar } },
+        children,
+        React.createElement(Box, { css: transitionStyles },
+            React.createElement(CSSTransitionTyped, { in: open, timeout: 150, mountOnEnter: true, unmountOnExit: true, 
+                // Sets timeout to close the snackbar
+                onEnter: function () {
+                    // @ts-ignore
+                    clearTimeout(timeoutId);
+                    // @ts-ignore
+                    setTimeoutId(setTimeout(function () { return setOpen(false); }, duration));
+                }, 
+                // Sets custom classNames based on "position"
+                className: "snackbar-wrapper-".concat(position), classNames: {
+                    enter: "snackbar-enter snackbar-enter-".concat(position),
+                    enterActive: "snackbar-enter-active snackbar-enter-active-".concat(position),
+                    exitActive: "snackbar-exit-active snackbar-exit-active-".concat(position),
+                } },
+                React.createElement(Box, { css: {
+                        display: "flex",
+                        alignItems: "center",
+                        margin: "8px",
+                        position: "fixed",
+                        right: "0",
+                        left: "0",
+                        zIndex: "1",
+                        transition: "opacity 150ms, transform 150ms",
+                        pointerEvents: "none",
+                        justifyContent: "center",
+                        bottom: "8px",
+                    } },
+                    React.createElement(Box, { css: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            borderRadius: "4px",
+                            minWidth: "334px",
+                            maxWidth: "672px",
+                            zIndex: 1000000,
+                            backgroundColor: "$panel",
+                            boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
+                            WebkitFontSmoothing: "antialiased",
+                            MozOsxFontSmoothing: "grayscale",
+                            fontFamily: "sans-serif",
+                            fontSize: "14px",
+                            fontWeight: "400",
+                            color: "$hiContrast",
+                            letterSpacing: "0.25px",
+                            lineHeight: "20px",
+                            textAlign: "left",
+                        }, style: customStyles },
+                        React.createElement(Box, { css: {
+                                flexGrow: 1,
+                                padding: "14px 16px",
+                                margin: "0",
+                                pointerEvents: "auto",
+                                color: "$hiContrast",
+                            } }, text),
+                        React.createElement(Box, { as: "button", css: {
+                                lexShrink: "0",
+                                boxSizing: "border-box",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "36px",
+                                height: "36px",
+                                padding: "8px",
+                                margin: "0 8px 0 0",
+                                cursor: "pointer",
+                                position: "relative",
+                                pointerEvents: "auto",
+                                WebkitTapHighlightColor: "transparent",
+                                /* Reset button styles */
+                                outline: "none",
+                                backgroundColor: "transparent",
+                                border: "none",
+                                /* SVG icon properties */
+                                fontSize: "12px",
+                                color: "$hiContrast",
+                                "&:hover:before": {
+                                    opacity: "0.08",
+                                },
+                                "&:before": {
+                                    content: '""',
+                                    backgroundColor: "$hiContrast",
+                                    borderRadius: "50%",
+                                    opacity: "0",
+                                    position: "absolute",
+                                    transition: "opacity 120ms linear",
+                                    top: "0%",
+                                    left: "0%",
+                                    width: "100%",
+                                    height: "100%",
+                                },
+                            }, onClick: closeSnackbar, style: closeCustomStyles },
+                            React.createElement(CloseIcon, null))))))));
+};
+// CloseIcon SVG is styled with font properties
+var CloseIcon = function () { return (React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 12" },
+    React.createElement("path", { fill: "currentColor", d: "M11.73 1.58L7.31 6l4.42 4.42-1.06 1.06-4.42-4.42-4.42 4.42-1.06-1.06L5.19 6 .77 1.58 1.83.52l4.42 4.42L10.67.52z", fillRule: "evenodd" }))); };
+
+// Custom hook to trigger the snackbar on function components
+var useSnackbar = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.position, position = _c === void 0 ? defaultPosition : _c, _d = _b.style, style = _d === void 0 ? {} : _d, _e = _b.closeStyle, closeStyle = _e === void 0 ? {} : _e;
+    var _f = useContext(SnackbarContext), openSnackbar = _f.openSnackbar, closeSnackbar = _f.closeSnackbar;
+    // If no correct position is passed, 'bottom-center' is set
+    if (!positions.includes(position)) {
+        position = defaultPosition;
+    }
+    function open(text, duration) {
+        if (text === void 0) { text = ""; }
+        if (duration === void 0) { duration = defaultDuration; }
+        openSnackbar(text, duration, position, style, closeStyle);
+    }
+    // Returns methods in hooks array way
+    return [open, closeSnackbar];
+};
+
 var Sub = styled("sub", {
     fontFeatureSettings: '"subs"',
     fontSize: "100%",
@@ -4521,4 +4906,4 @@ var VerifiedBadge = React.forwardRef(function (props, forwardedRef) { return (Re
     React.createElement(CheckIcon, null))); });
 VerifiedBadge.displayName = "VerifiedBadge";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, AvatarNestedItem, Badge, Banner, Box, Button, Caption, Card, Checkbox, Code, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuTrigger, ControlGroup, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Grid, Heading, IconButton, Image, Kbd, Link, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Overlay, Panel, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressBar, Radio, RadioCard, RadioCardGroup, RadioGroup, Section, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SimpleToggle, Skeleton, Slider, Status, Sub, Sup, Switch, TabLink, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Text, TextArea, TextField, Tfoot, Th, Thead, Tooltip, Tr, TreeItem, VerifiedBadge, config, css, getCssText, getThemes, globalCss, keyframes, styled };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, AvatarNestedItem, Badge, Banner, Box, Button, Caption, Card, Checkbox, Code, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuTrigger, ControlGroup, DesignSystemProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Grid, Heading, IconButton, Image, Kbd, Label, Link, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Overlay, Panel, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressBar, Promo, Radio, RadioCard, RadioCardGroup, RadioGroup, Section, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SimpleToggle, Skeleton, Slider, SnackbarProvider, Status, Sub, Sup, Switch, TabLink, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tbody, Td, Text, TextArea, TextField, Tfoot, Th, Thead, Tooltip, Tr, TreeItem, VerifiedBadge, config, css, getCssText, getThemes, globalCss, keyframes, styled, useSnackbar };

package/dist/index.js

@@ -22,12 +22,14 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var merge = require('lodash.merge');
+var LabelPrimitive = require('@radix-ui/react-label');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var ProgressPrimitive = require('@radix-ui/react-progress');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var SliderPrimitive = require('@radix-ui/react-slider');
+var reactTransitionGroup = require('react-transition-group');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 
@@ -62,6 +64,7 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -303,6 +306,7 @@ createTheme("dark-theme", {
 var lightThemeColors = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.gray), colors.mauve), colors.slate), colors.sage), colors.olive), colors.sand), colors.tomato), colors.red), colors.crimson), colors.pink), colors.plum), colors.purple), colors.violet), colors.indigo), colors.blue), colors.sky), colors.mint), colors.cyan), colors.teal), colors.green), colors.grass), colors.lime), colors.yellow), colors.amber), colors.orange), colors.brown), colors.bronze), colors.gold), colors.whiteA), colors.blackA);
 var darkThemeColors = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.grayDark), colors.mauveDark), colors.slateDark), colors.sageDark), colors.oliveDark), colors.sandDark), colors.tomatoDark), colors.redDark), colors.crimsonDark), colors.pinkDark), colors.plumDark), colors.purpleDark), colors.violetDark), colors.indigoDark), colors.blueDark), colors.skyDark), colors.mintDark), colors.cyanDark), colors.tealDark), colors.greenDark), colors.grassDark), colors.limeDark), colors.yellowDark), colors.amberDark), colors.orangeDark), colors.brownDark), colors.bronzeDark), colors.goldDark), colors.whiteA), colors.blackA);
 var naturalPairingsKeys = [
+    "gray",
     "tomato",
     "red",
     "crimson",
@@ -345,8 +349,10 @@ var naturalPairings = {
     amber: "sand",
     orange: "sand",
     brown: "sand",
+    gray: "sand",
 };
 tslib.__spreadArray(tslib.__spreadArray([], naturalPairingsKeys.map(function (e) { return "light-theme-".concat(e); }), true), naturalPairingsKeys.map(function (e) { return "dark-theme-".concat(e); }), true);
+// TODO fix this typing
 var getThemes = function () {
     var themes = naturalPairingsKeys.reduce(function (prev, primary) {
         var _a;
@@ -3170,6 +3176,13 @@ var Kbd = styled("kbd", {
     },
 });
 
+var Label = styled(LabelPrimitive__namespace.Root, Text, {
+    fontSize: "$2",
+    display: "inline-block",
+    verticalAlign: "middle",
+    cursor: "default",
+});
+
 var _a$5;
 var Link = styled("a", (_a$5 = {
         alignItems: "center",
@@ -3361,6 +3374,117 @@ var ProgressBar = React__default["default"].forwardRef(function (_a, forwardedRe
 });
 ProgressBar.displayName = "ProgressBar";
 
+var Promo = styled("div", {
+    // Reset
+    boxSizing: "border-box",
+    "&::before": {
+        boxSizing: "border-box",
+    },
+    "&::after": {
+        boxSizing: "border-box",
+    },
+    p: "$4",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "$4",
+    variants: {
+        size: {
+            "1": {
+                py: "$2",
+                px: "$3",
+            },
+            "2": {
+                py: "$3",
+                px: "$4",
+            },
+            "3": {
+                py: "$4",
+                px: "$5",
+            },
+        },
+        variant: {
+            loContrast: {
+                backgroundColor: "$loContrast",
+            },
+            subtle: {
+                backgroundColor: "$neutral2",
+                boxShadow: "0 0 0 1px $colors$neutral6",
+            },
+            blue: {
+                backgroundColor: "$blue2",
+                boxShadow: "0 0 0 1px $colors$blue6",
+            },
+            green: {
+                backgroundColor: "$green2",
+                boxShadow: "0 0 0 1px $colors$green6",
+            },
+            indigo: {
+                backgroundColor: "$indigo2",
+                boxShadow: "0 0 0 1px $colors$indigo6",
+            },
+            violet: {
+                backgroundColor: "$violet2",
+                boxShadow: "0 0 0 1px $colors$violet6",
+            },
+            red: {
+                backgroundColor: "$red2",
+                boxShadow: "0 0 0 1px $colors$red6",
+            },
+        },
+        rounded: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+        border: {
+            true: {
+                borderRadius: "$pill",
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            border: "true",
+            variant: "subtle",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+        {
+            border: "true",
+            variant: "blue",
+            css: {
+                borderColor: "$blue11",
+            },
+        },
+        {
+            border: "true",
+            variant: "indigo",
+            css: {
+                borderColor: "$indigo11",
+            },
+        },
+        {
+            border: "true",
+            variant: "violet",
+            css: {
+                borderColor: "$violet11",
+            },
+        },
+        {
+            border: "true",
+            variant: "loContrast",
+            css: {
+                borderColor: "$neutral6",
+            },
+        },
+    ],
+    defaultVariants: {
+        size: "1",
+        variant: "subtle",
+    },
+});
+
 var _a$4;
 var RadioGroup = styled(RadioGroupPrimitive__namespace.Root, {
     display: "flex",
@@ -3890,6 +4014,268 @@ var Slider = React__default["default"].forwardRef(function (props, forwardedRef)
 });
 Slider.displayName = "Slider";
 
+var transitionStyles = {
+    ".snackbar-enter": {
+        opacity: 0,
+    },
+    ".snackbar-exit-active": {
+        opacity: 0,
+    },
+    ".snackbar-enter-active": {
+        opacity: 1,
+    },
+    ".snackbar-enter-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-left": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-center": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-exit-active-top-right": {
+        transform: "translateY(-16px)",
+    },
+    ".snackbar-enter-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-left": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-center": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-exit-active-bottom-right": {
+        transform: "translateY(16px)",
+    },
+    ".snackbar-enter-active-top-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-top-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-left": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-center": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-enter-active-bottom-right": {
+        transform: "translateY(0px)",
+    },
+    ".snackbar-wrapper-top-left": {
+        justifyContent: "flex-start",
+        top: "8px",
+    },
+    ".snackbar-wrapper-top-center": {
+        top: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-top-right": {
+        top: "8px",
+        justifyContent: "flex-end",
+    },
+    ".snackbar-wrapper-bottom-left": {
+        bottom: "8px",
+        justifyContent: "flex-start",
+    },
+    ".snackbar-wrapper-bottom-center": {
+        bottom: "8px",
+        justifyContent: "center",
+    },
+    ".snackbar-wrapper-bottom-right": {
+        bottom: "8px",
+        justifyContent: "flex-end",
+    },
+};
+
+// type coercion for bad typing in lib
+var CSSTransitionTyped = reactTransitionGroup.CSSTransition;
+// Snackbar default values
+var defaultPosition = "bottom-center";
+var defaultDuration = 5000;
+var defaultInterval = 250;
+var positions = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+];
+// Context used by the hook useSnackbar() and HoC withSnackbar()
+var SnackbarContext = React.createContext({});
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    // Current open state
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    // Current timeout ID
+    var _c = React.useState(null), timeoutId = _c[0], setTimeoutId = _c[1];
+    // Snackbar's text
+    var _d = React.useState(""), text = _d[0], setText = _d[1];
+    // Snackbar's duration
+    var _e = React.useState(defaultDuration), duration = _e[0], setDuration = _e[1];
+    // Snackbar's position
+    var _f = React.useState(defaultPosition), position = _f[0], setPosition = _f[1];
+    // Custom styles for the snackbar itself
+    var _g = React.useState({}), customStyles = _g[0], setCustomStyles = _g[1];
+    // Custom styles for the close button
+    var _h = React.useState({}), closeCustomStyles = _h[0], setCloseCustomStyles = _h[1];
+    var triggerSnackbar = function (text, duration, position, style, closeStyle) {
+        setText(text);
+        setDuration(duration);
+        setPosition(position);
+        setCustomStyles(style);
+        setCloseCustomStyles(closeStyle);
+        setOpen(true);
+    };
+    // Manages all the snackbar's opening process
+    var openSnackbar = function (text, duration, position, style, closeStyle) {
+        // Closes the snackbar if it is already open
+        if (open === true) {
+            setOpen(false);
+            setTimeout(function () {
+                triggerSnackbar(text, duration, position, style, closeStyle);
+            }, defaultInterval);
+        }
+        else {
+            triggerSnackbar(text, duration, position, style, closeStyle);
+        }
+    };
+    // Closes the snackbar just by setting the "open" state to false
+    var closeSnackbar = function () {
+        setOpen(false);
+    };
+    // Returns the Provider that must wrap the application
+    return (React__default["default"].createElement(SnackbarContext.Provider, { value: { openSnackbar: openSnackbar, closeSnackbar: closeSnackbar } },
+        children,
+        React__default["default"].createElement(Box, { css: transitionStyles },
+            React__default["default"].createElement(CSSTransitionTyped, { in: open, timeout: 150, mountOnEnter: true, unmountOnExit: true, 
+                // Sets timeout to close the snackbar
+                onEnter: function () {
+                    // @ts-ignore
+                    clearTimeout(timeoutId);
+                    // @ts-ignore
+                    setTimeoutId(setTimeout(function () { return setOpen(false); }, duration));
+                }, 
+                // Sets custom classNames based on "position"
+                className: "snackbar-wrapper-".concat(position), classNames: {
+                    enter: "snackbar-enter snackbar-enter-".concat(position),
+                    enterActive: "snackbar-enter-active snackbar-enter-active-".concat(position),
+                    exitActive: "snackbar-exit-active snackbar-exit-active-".concat(position),
+                } },
+                React__default["default"].createElement(Box, { css: {
+                        display: "flex",
+                        alignItems: "center",
+                        margin: "8px",
+                        position: "fixed",
+                        right: "0",
+                        left: "0",
+                        zIndex: "1",
+                        transition: "opacity 150ms, transform 150ms",
+                        pointerEvents: "none",
+                        justifyContent: "center",
+                        bottom: "8px",
+                    } },
+                    React__default["default"].createElement(Box, { css: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            borderRadius: "4px",
+                            minWidth: "334px",
+                            maxWidth: "672px",
+                            zIndex: 1000000,
+                            backgroundColor: "$panel",
+                            boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
+                            WebkitFontSmoothing: "antialiased",
+                            MozOsxFontSmoothing: "grayscale",
+                            fontFamily: "sans-serif",
+                            fontSize: "14px",
+                            fontWeight: "400",
+                            color: "$hiContrast",
+                            letterSpacing: "0.25px",
+                            lineHeight: "20px",
+                            textAlign: "left",
+                        }, style: customStyles },
+                        React__default["default"].createElement(Box, { css: {
+                                flexGrow: 1,
+                                padding: "14px 16px",
+                                margin: "0",
+                                pointerEvents: "auto",
+                                color: "$hiContrast",
+                            } }, text),
+                        React__default["default"].createElement(Box, { as: "button", css: {
+                                lexShrink: "0",
+                                boxSizing: "border-box",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "36px",
+                                height: "36px",
+                                padding: "8px",
+                                margin: "0 8px 0 0",
+                                cursor: "pointer",
+                                position: "relative",
+                                pointerEvents: "auto",
+                                WebkitTapHighlightColor: "transparent",
+                                /* Reset button styles */
+                                outline: "none",
+                                backgroundColor: "transparent",
+                                border: "none",
+                                /* SVG icon properties */
+                                fontSize: "12px",
+                                color: "$hiContrast",
+                                "&:hover:before": {
+                                    opacity: "0.08",
+                                },
+                                "&:before": {
+                                    content: '""',
+                                    backgroundColor: "$hiContrast",
+                                    borderRadius: "50%",
+                                    opacity: "0",
+                                    position: "absolute",
+                                    transition: "opacity 120ms linear",
+                                    top: "0%",
+                                    left: "0%",
+                                    width: "100%",
+                                    height: "100%",
+                                },
+                            }, onClick: closeSnackbar, style: closeCustomStyles },
+                            React__default["default"].createElement(CloseIcon, null))))))));
+};
+// CloseIcon SVG is styled with font properties
+var CloseIcon = function () { return (React__default["default"].createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 12" },
+    React__default["default"].createElement("path", { fill: "currentColor", d: "M11.73 1.58L7.31 6l4.42 4.42-1.06 1.06-4.42-4.42-4.42 4.42-1.06-1.06L5.19 6 .77 1.58 1.83.52l4.42 4.42L10.67.52z", fillRule: "evenodd" }))); };
+
+// Custom hook to trigger the snackbar on function components
+var useSnackbar = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.position, position = _c === void 0 ? defaultPosition : _c, _d = _b.style, style = _d === void 0 ? {} : _d, _e = _b.closeStyle, closeStyle = _e === void 0 ? {} : _e;
+    var _f = React.useContext(SnackbarContext), openSnackbar = _f.openSnackbar, closeSnackbar = _f.closeSnackbar;
+    // If no correct position is passed, 'bottom-center' is set
+    if (!positions.includes(position)) {
+        position = defaultPosition;
+    }
+    function open(text, duration) {
+        if (text === void 0) { text = ""; }
+        if (duration === void 0) { duration = defaultDuration; }
+        openSnackbar(text, duration, position, style, closeStyle);
+    }
+    // Returns methods in hooks array way
+    return [open, closeSnackbar];
+};
+
 var Sub = styled("sub", {
     fontFeatureSettings: '"subs"',
     fontSize: "100%",
@@ -4670,6 +5056,7 @@ exports.Heading = Heading;
 exports.IconButton = IconButton;
 exports.Image = Image;
 exports.Kbd = Kbd;
+exports.Label = Label;
 exports.Link = Link;
 exports.Menu = Menu;
 exports.MenuCheckboxItem = MenuCheckboxItem;
@@ -4687,6 +5074,7 @@ exports.PopoverClose = PopoverClose;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ProgressBar = ProgressBar;
+exports.Promo = Promo;
 exports.Radio = Radio;
 exports.RadioCard = RadioCard;
 exports.RadioCardGroup = RadioCardGroup;
@@ -4703,6 +5091,7 @@ exports.SheetTrigger = SheetTrigger;
 exports.SimpleToggle = SimpleToggle;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
+exports.SnackbarProvider = SnackbarProvider;
 exports.Status = Status;
 exports.Sub = Sub;
 exports.Sup = Sup;
@@ -4732,3 +5121,4 @@ exports.getThemes = getThemes;
 exports.globalCss = globalCss;
 exports.keyframes = keyframes;
 exports.styled = styled;
+exports.useSnackbar = useSnackbar;

package/dist/stitches.config.d.ts

@@ -6309,7 +6309,7 @@ export declare const darkTheme: string & {
         gray12: string;
     };
 }, "">;
-export declare const naturalPairingsKeys: readonly ["tomato", "red", "crimson", "pink", "plum", "purple", "violet", "indigo", "blue", "sky", "cyan", "teal", "mint", "green", "grass", "lime", "yellow", "amber", "orange", "brown"];
+export declare const naturalPairingsKeys: readonly ["gray", "tomato", "red", "crimson", "pink", "plum", "purple", "violet", "indigo", "blue", "sky", "cyan", "teal", "mint", "green", "grass", "lime", "yellow", "amber", "orange", "brown"];
 export declare type NaturalPairingsKeys = typeof naturalPairingsKeys[number];
 export declare type NaturalPairings = {
     [K in NaturalPairingsKeys]: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer/design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.es.js",