@hexure/ui 1.1.1 → 1.2.0

package/dist/cjs/types/components/Button/Button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps extends AccessibleProps {
     /** If enabled, the small button format will be used. */
     small?: boolean;
     /** Define which button type to display. By default the Primary button will be used.  */
-    type?: 'primary' | 'secondary';
+    type?: 'primary' | 'secondary' | 'red';
 }
 declare const Button: FC<ButtonProps>;
 export default Button;

package/dist/cjs/types/components/Copy/Copy.d.ts

@@ -10,6 +10,8 @@ export interface CopyProps extends AccessibleProps {
     padding?: string;
     /** Set the type of copy to display */
     type?: 'default' | 'bold' | 'italic' | 'underline' | 'line-through' | 'small';
+    /** Set the color of the copy based on the design system color pallette */
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'GRAY' | 'MEDIUM_GRAY' | 'LIGHT_GRAY';
 }
 declare const Copy: FC<CopyProps>;
 export default Copy;

package/dist/cjs/types/components/Drawer/Drawer.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+interface ButtonProps extends AccessibleProps {
+    disabled: boolean;
+    children: string;
+    icon?: string;
+    onClick: (e?: any) => void;
+    tabIndex?: number;
+}
+export interface DrawerProps extends AccessibleProps {
+    primaryButton: ButtonProps;
+    secondaryButton?: ButtonProps;
+    tertiaryButton?: ButtonProps;
+    /** It is used to pass child nodes, string values and number as child components. */
+    children: ReactNode;
+    /** It is used to give title. */
+    title: string;
+    /** Define an optional description that's displayed under the title */
+    description?: string;
+    /** Set a width wider than 400px */
+    width?: string | number;
+    /** Display an scrim over the main content, forcing users to interact with the drawer */
+    scrim?: 'transparent' | 'dark';
+    /**  It is used to close drawer. */
+    onClose: (e?: any) => void;
+}
+declare const Drawer: FC<DrawerProps>;
+export default Drawer;

package/dist/cjs/types/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./Drawer").DrawerProps>>;
+export default _default;
+export declare const _Drawer: ComponentStory<React.FC<import("./Drawer").DrawerProps>>;

package/dist/cjs/types/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Drawer';

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

@@ -9,8 +9,8 @@ interface ButtonProps {
 }
 export interface ModalProps extends AccessibleProps {
     primaryButton: ButtonProps;
-    secondaryButton: ButtonProps;
-    tertiaryButton: ButtonProps;
+    secondaryButton?: ButtonProps;
+    tertiaryButton?: ButtonProps;
     maxWidth?: string | number;
     /** It is used to pass child nodes, string values and number as child components. */
     children: ReactNode;

package/dist/cjs/types/components/Multiselect/MultiSelect.d.ts

@@ -8,7 +8,7 @@ export interface MultiSelectProps extends AccessibleProps {
     readOnly?: boolean;
     displayCount?: number;
     invalid?: boolean;
-    onChange: (e?: any) => void;
+    onChange: (e: any) => void;
     options?: OptionProps[];
     selected: (string | number)[];
     showSelectAll?: boolean;

package/dist/cjs/types/index.d.ts

@@ -6,6 +6,7 @@ export { default as Button } from './components/Button';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Checklist } from './components/Checklist';
 export { default as Copy } from './components/Copy';
+export { default as Drawer } from './components/Drawer';
 export { default as Field } from './components/Field';
 export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';

package/dist/esm/index.js

@@ -2023,19 +2023,36 @@ var FontSizes = {
     SMALL: '13px',
 };
 
-var Header$2 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"])));
-var Title = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
+var Header$3 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"])));
+var Title = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
 var Accordion = function (_a) {
     var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header$2, __assign({ onClick: onClick }, accessibleProps),
+        React.createElement(Header$3, __assign({ onClick: onClick }, accessibleProps),
             React.createElement(Title, null, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
         open ? children : null));
 };
-var templateObject_1$j, templateObject_2$h;
+var templateObject_1$k, templateObject_2$i;
 
-var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"], ["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
+var button_type_mapping = {
+    primary: {
+        background_color: Colors.PRIMARY.Hex,
+        border_color: Colors.PRIMARY.Hex,
+        content_color: '#fff',
+    },
+    secondary: {
+        background_color: 'transparent',
+        border_color: Colors.PRIMARY.Hex,
+        content_color: Colors.PRIMARY.Hex,
+    },
+    red: {
+        background_color: Colors.RED.Hex,
+        border_color: Colors.RED.Hex,
+        content_color: '#fff',
+    },
+};
+var StyledButton = styled.button(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"], ["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
     if (props.$hasChildren) {
         if (props.$small) {
             return '0 10px';
@@ -2045,7 +2062,9 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         }
     }
     return '0px';
-}, function (props) { return (props.$type === 'secondary' ? 'transparent' : Colors.PRIMARY.Hex); }, function (props) {
+}, function (props) {
+    return props.$type ? button_type_mapping[props.$type].background_color : Colors.PRIMARY.Hex;
+}, function (props) {
     if (props.$hasChildren) {
         return 'auto';
     }
@@ -2053,34 +2072,36 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         return '30px';
     }
     return '40px';
-}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, Colors.PRIMARY.Hex, function (props) { return (props.$disabled ? 0.6 : 1); });
-var Label$3 = styled.span(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"])), function (props) { return (props.$type === 'secondary' ? Colors.PRIMARY.Hex : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
-var StyledIcon = styled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
+}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
+    return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
+}, function (props) { return (props.$disabled ? 0.6 : 1); });
+var Label$3 = styled.span(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"])), function (props) { return (props.$type ? button_type_mapping[props.$type].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
+var StyledIcon = styled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
 var Button = function (_a) {
     var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.margin, margin = _c === void 0 ? '' : _c, onClick = _a.onClick, _d = _a.small, small = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? 'primary' : _e, accessibleProps = __rest(_a, ["children", "disabled", "icon", "margin", "onClick", "small", "type"]);
     var has_children = children && children.length > 0;
-    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$onClick": disabled ? undefined : onClick, "$small": small, "$type": type }, accessibleProps),
+    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small, "$type": type, onClick: disabled ? undefined : onClick }, accessibleProps),
         children ? (React.createElement(Label$3, { "$small": small, "$type": type }, children)) : null,
         icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: type === 'secondary' ? Colors.PRIMARY.Hex : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
+            React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
 };
-var templateObject_1$i, templateObject_2$g, templateObject_3$b;
+var templateObject_1$j, templateObject_2$h, templateObject_3$c;
 
-var StyledComponent = styled.p(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
+var StyledComponent = styled.p(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
     return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
 }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
 var Copy = function (_a) {
-    var children = _a.children, _b = _a.align, align = _b === void 0 ? '' : _b, _c = _a.margin, margin = _c === void 0 ? '' : _c, _d = _a.padding, padding = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e;
-    return (React.createElement(StyledComponent, { "$align": align, "$margin": margin, "$padding": padding, "$type": type }, children));
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? '' : _b, _c = _a.margin, margin = _c === void 0 ? '' : _c, _d = _a.padding, padding = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, _f = _a.color, color = _f === void 0 ? 'BLACK' : _f;
+    return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
 };
 Copy.defaultProps = {
     type: 'default',
 };
-var templateObject_1$h;
+var templateObject_1$i;
 
-var H1 = styled.h1(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var H2 = styled.h2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var H3 = styled.h3(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
+var H1 = styled.h1(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
+var H2 = styled.h2(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
+var H3 = styled.h3(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
 var Heading = function (_a) {
     var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
     switch (type) {
@@ -2099,11 +2120,11 @@ Heading.defaultProps = {
     bold: false,
     type: 'primary',
 };
-var templateObject_1$g, templateObject_2$f, templateObject_3$a;
+var templateObject_1$h, templateObject_2$g, templateObject_3$b;
 
-var Wrapper$9 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])));
-var Container$1 = styled.dialog(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"], ["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"])));
-var Buttons = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
+var Wrapper$9 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])));
+var Container$2 = styled.dialog(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"], ["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"])));
+var Buttons = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
 var ActionDialog = function (_a) {
     var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
     useEffect(function () {
@@ -2117,17 +2138,17 @@ var ActionDialog = function (_a) {
         };
     }, []);
     return (React.createElement(Wrapper$9, __assign({}, accessibleProps),
-        React.createElement(Container$1, { open: true },
+        React.createElement(Container$2, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
             primaryButton || secondaryButton ? (React.createElement(Buttons, null,
                 secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { margin: '0px 5px', type: 'secondary' }))) : null,
                 primaryButton ? React.createElement(Button, __assign({}, primaryButton, { margin: '0px 5px', type: 'primary' })) : null)) : null)));
 };
-var templateObject_1$f, templateObject_2$e, templateObject_3$9;
+var templateObject_1$g, templateObject_2$f, templateObject_3$a;
 
-var Wrapper$8 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"], ["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
-var Content$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  margin-left: 20px;\n"], ["\n  margin-left: 20px;\n"])));
+var Wrapper$8 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"], ["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
+var Content$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin-left: 20px;\n"], ["\n  margin-left: 20px;\n"])));
 var Alert = function (_a) {
     var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
     var type_mapping = {
@@ -2155,14 +2176,14 @@ var Alert = function (_a) {
             title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? React.createElement(Copy, { margin: '10px 0 0 0' }, description) : null)));
 };
-var templateObject_1$e, templateObject_2$d;
-
-var Wrapper$7 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
-var Left = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"])));
-var Info = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"])));
-var Selected = styled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
-var Clear = styled.span(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
-var Actions = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"])));
+var templateObject_1$f, templateObject_2$e;
+
+var Wrapper$7 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
+var Left = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"])));
+var Info = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"])));
+var Selected = styled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
+var Clear = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
+var Actions = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"])));
 var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"])), Colors.RED.Rgb);
 var ErrorMsg = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
 var BulkActionBar = function (_a) {
@@ -2179,18 +2200,18 @@ var BulkActionBar = function (_a) {
             React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
-var templateObject_1$d, templateObject_2$c, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8;
+var templateObject_1$e, templateObject_2$d, templateObject_3$9, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8;
 
 var Checkbox = function (_a) {
     var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    var Wrapper = styled.label(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    padding: 4px 0;\n    cursor: ", ";\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    line-height: 1.6em;\n    box-sizing: border-box;\n  "], ["\n    padding: 4px 0;\n    cursor: ", ";\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    line-height: 1.6em;\n    box-sizing: border-box;\n  "])), disabled ? 'default' : 'pointer', FontSizes.DEFAULT);
-    var Input = styled.input(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    font-size: 20px;\n    margin: 0px 0px 2px 0px;\n    line-height: 1.1em;\n    box-sizing: border-box;\n  "], ["\n    font-size: 20px;\n    margin: 0px 0px 2px 0px;\n    line-height: 1.1em;\n    box-sizing: border-box;\n  "])));
-    var Label = styled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    line-height: 1.6em;\n    color: ", ";\n    margin-left: 6px;\n    box-sizing: border-box;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    line-height: 1.6em;\n    color: ", ";\n    margin-left: 6px;\n    box-sizing: border-box;\n  "])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
+    var Wrapper = styled.label(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    padding: 4px 0;\n    cursor: ", ";\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    line-height: 1.6em;\n    box-sizing: border-box;\n  "], ["\n    padding: 4px 0;\n    cursor: ", ";\n    display: flex;\n    align-items: center;\n    font-size: ", ";\n    line-height: 1.6em;\n    box-sizing: border-box;\n  "])), disabled ? 'default' : 'pointer', FontSizes.DEFAULT);
+    var Input = styled.input(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    font-size: 20px;\n    margin: 0px 0px 2px 0px;\n    line-height: 1.1em;\n    box-sizing: border-box;\n  "], ["\n    font-size: 20px;\n    margin: 0px 0px 2px 0px;\n    line-height: 1.1em;\n    box-sizing: border-box;\n  "])));
+    var Label = styled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    line-height: 1.6em;\n    color: ", ";\n    margin-left: 6px;\n    box-sizing: border-box;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    line-height: 1.6em;\n    color: ", ";\n    margin-left: 6px;\n    box-sizing: border-box;\n  "])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
     return (React.createElement(Wrapper, __assign({}, accessibleProps, { onClick: disabled ? undefined : onChange }),
         React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, type: 'checkbox' }),
         children ? React.createElement(Label, null, children) : null));
 };
-var templateObject_1$c, templateObject_2$b, templateObject_3$7;
+var templateObject_1$d, templateObject_2$c, templateObject_3$8;
 
 var Checklist = function (_a) {
     var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -2210,8 +2231,8 @@ var Checklist = function (_a) {
         }
         onChange(updated_selected);
     };
-    var SelectAll = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    padding: 8px 12px;\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n  "], ["\n    padding: 8px 12px;\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n  "])), Colors.LIGHT_GRAY.Hex);
-    var Options = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n    padding: 12px;\n    box-sizing: border-box;\n  "], ["\n    padding: 12px;\n    box-sizing: border-box;\n  "])));
+    var SelectAll = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    padding: 8px 12px;\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n  "], ["\n    padding: 8px 12px;\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n  "])), Colors.LIGHT_GRAY.Hex);
+    var Options = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    padding: 12px;\n    box-sizing: border-box;\n  "], ["\n    padding: 12px;\n    box-sizing: border-box;\n  "])));
     return (React.createElement(React.Fragment, null,
         showSelectAll && values.length ? (React.createElement(SelectAll, null,
             React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
@@ -2221,7 +2242,48 @@ var Checklist = function (_a) {
             return (React.createElement(Checkbox, __assign({}, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
 };
-var templateObject_1$b, templateObject_2$a;
+var templateObject_1$c, templateObject_2$b;
+
+var Scrim$1 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9998;\n  background: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9998;\n  background: ", ";\n"])), function (_a) {
+    var $scrim = _a.$scrim;
+    return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
+});
+var Container$1 = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  z-index: 9999;\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"], ["\n  z-index: 9999;\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width || '400px';
+});
+var Header$2 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"])));
+var Close$1 = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
+var ContentWrapper$1 = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"])));
+var ButtonBar$1 = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"])));
+var Drawer = function (_a) {
+    var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, scrim = _a.scrim, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "secondaryButton", "tertiaryButton", "scrim", "width"]);
+    useEffect(function () {
+        document.onkeydown = function (e) {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        return function cleanup() {
+            document.onkeydown = null;
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container$1, __assign({}, accessibleProps, { "$width": width }),
+            React.createElement(Header$2, null,
+                React.createElement("div", null,
+                    title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
+                    description ? React.createElement(Copy, { color: 'GRAY' }, description) : null),
+                React.createElement(Close$1, { onClick: onClose },
+                    React.createElement(Button, { icon: mdiClose, small: true, type: 'secondary' }))),
+            React.createElement(ContentWrapper$1, null, children),
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
+                tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { type: 'secondary' })) : null,
+                secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { type: 'secondary' })) : null,
+                primaryButton ? React.createElement(Button, __assign({}, primaryButton, { type: 'primary' })) : null)) : null),
+        scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
+};
+var templateObject_1$b, templateObject_2$a, templateObject_3$7, templateObject_4$5, templateObject_5$3, templateObject_6$2;
 
 var Wrapper$6 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return props.$margin || '0px 0px 15px 0px'; });
 var LabelRow = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 0 4px 0;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 0 4px 0;\n  box-sizing: border-box;\n"])));
@@ -2322,7 +2384,7 @@ var Container = styled.dialog(templateObject_2$7 || (templateObject_2$7 = __make
 var Header$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
 var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
 var CloseMsg = styled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
-var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
+var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
 var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
 var Modal = function (_a) {
     var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
@@ -2523,5 +2585,5 @@ var Toggle = function (_a) {
 Toggle.defaultProps = {};
 var templateObject_1, templateObject_2;
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Field, Heading, Input$1 as Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Drawer, Field, Heading, Input$1 as Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };
 //# sourceMappingURL=index.js.map