@appquality/unguess-design-system 2.3.0 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.4.1 (Fri Mar 18 2022)
+
+
+
+---
+
+# v2.4.0 (Fri Mar 18 2022)
+
+#### 🚀 Enhancement
+
+- add logo component + fix login-form component issues [#17](https://github.com/AppQuality/unguess-design-system/pull/17) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.3.1 (Tue Mar 15 2022)
+
+
+
+---
+
 # v2.2.0 (Tue Mar 15 2022)
 
 #### 🚀 Enhancement

package/build/index.d.ts

@@ -1,11 +1,41 @@
 import { GlobalStyle } from './stories/shared/globalStyle';
+export * from './stories/accordions';
 export * from './stories/avatar';
 export * from './stories/breadcrumbs';
-export * from './stories/buttons/button';
 export * from './stories/buttons/anchor';
+export * from './stories/buttons/button';
 export * from './stories/buttons/button-group';
 export * from './stories/buttons/icon-button';
 export * from './stories/buttons/split-button';
+export * from './stories/cards';
+export * from './stories/close';
+export * as DropdownField from './stories/dropdowns/field';
+export * from './stories/dropdowns/item';
+export * from './stories/dropdowns/menu';
+export * from './stories/dropdowns/multiselect';
+export * from './stories/dropdowns/select';
+export * from './stories/forms/checkbox';
+export * as FormField from './stories/forms/field';
+export * from './stories/forms/input';
+export * from './stories/forms/radio';
+export * from './stories/forms/textarea';
+export * from './stories/forms/toggle';
+export * from './stories/grid/col';
+export * from './stories/grid/row';
+export * from './stories/grid/grid';
+export * from './stories/label';
 export * from './stories/loaders/spinner';
+export * from './stories/login-form';
+export * from './stories/notifications';
+export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableRow, Cell as TableCell, GroupRow, Caption } from './stories/table';
 export * from './stories/theme';
+export * from './stories/title';
+export * from './stories/trigger';
+export * from './stories/typography/block-quote';
+export * from './stories/typography/code';
+export * from './stories/typography/ellipsis';
+export * from './stories/typography/lists';
+export * from './stories/typography/paragraph';
+export * from './stories/typography/span';
+export * from './stories/typography/typescale';
 export { GlobalStyle };

package/build/index.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var jsxRuntime = require('react/jsx-runtime');
+var reactAccordions = require('@zendeskgarden/react-accordions');
 var reactAvatars = require('@zendeskgarden/react-avatars');
 var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
+var reactNotifications = require('@zendeskgarden/react-notifications');
+var reactDropdowns = require('@zendeskgarden/react-dropdowns');
+var reactForms = require('@zendeskgarden/react-forms');
+var reactGrid = require('@zendeskgarden/react-grid');
 var reactLoaders = require('@zendeskgarden/react-loaders');
+var formik = require('formik');
+var reactTables = require('@zendeskgarden/react-tables');
+var reactTypography = require('@zendeskgarden/react-typography');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,21 +53,172 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: "#003A57" }), fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }) });
+var palette = __assign(__assign({}, reactTheming.DEFAULT_THEME.palette), { black: "#000", white: "#fff", product: {
+        support: "#00a656",
+        message: "#37b8af",
+        explore: "#30aabc",
+        gather: "#f6c8be",
+        guide: "#ff6224",
+        connect: "#ff6224",
+        chat: "#f79a3e",
+        talk: "#efc93d",
+        sell: "#c38f00",
+    }, grey: {
+        "100": "#f8f9f9",
+        "200": "#e9ebed",
+        "300": "#d8dcde",
+        "400": "#c2c8cc",
+        "500": "#87929d",
+        "600": "#68737d",
+        "700": "#49545c",
+        "800": "#2f3941",
+    }, blue: {
+        "100": "#E6EBEE",
+        "200": "#B0C2CB",
+        "300": "#8AA4B2",
+        "400": "#547B8E",
+        "500": "#336179",
+        "600": "#003A57",
+        "700": "#00293E",
+        "800": "#001825",
+    }, red: {
+        "100": "#F9E2E1",
+        "200": "#F3C5C4",
+        "300": "#EA9B99",
+        "400": "#E2716F",
+        "500": "#DB4D50",
+        "600": "#D53032",
+        "700": "#A92329",
+        "800": "#771823",
+    }, yellow: {
+        "100": "#FEF6E7",
+        "200": "#FDEDCE",
+        "300": "#FBE1AC",
+        "400": "#F9CF7B",
+        "500": "#F7BF50",
+        "600": "#F4AC1A",
+        "700": "#D1820A",
+        "800": "#A15908",
+    }, green: {
+        "100": "#D7F9E5",
+        "200": "#ABF2C7",
+        "300": "#7FEBAA",
+        "400": "#53E48D",
+        "500": "#27DD70",
+        "600": "#1CB559",
+        "700": "#158944",
+        "800": "#0E5D2E",
+    }, kale: {
+        "100": "#f1f9f3",
+        "200": "#d3ecdb",
+        "300": "#9fd7b1",
+        "400": "#70c38a",
+        "500": "#66b17e",
+        "600": "#508a62",
+        "700": "#3e6b4c",
+        "800": "#2f523a",
+    }, fuschia: {
+        "400": "#d653c2",
+        "600": "#a81897",
+        M400: "#cf62a8",
+        M600: "#a8458c",
+    }, pink: {
+        "400": "#ec4d63",
+        "600": "#d42054",
+        M400: "#d57287",
+        M600: "#b23a5d",
+    }, crimson: {
+        "400": "#e34f32",
+        "600": "#c72a1c",
+        M400: "#cc6c5b",
+        M600: "#b24a3c",
+    }, orange: {
+        "400": "#de701d",
+        "600": "#bf5000",
+        M400: "#d4772c",
+        M600: "#b35827",
+    }, lemon: {
+        "400": "#ffd424",
+        "600": "#ffbb10",
+        M400: "#e7a500",
+        M600: "#c38f00",
+    }, lime: {
+        "400": "#43b324",
+        "600": "#2e8200",
+        M400: "#519e2d",
+        M600: "#47782c",
+    }, mint: {
+        "400": "#00a656",
+        "600": "#058541",
+        M400: "#299c66",
+        M600: "#2e8057",
+    }, teal: {
+        "400": "#02a191",
+        "600": "#028079",
+        M400: "#2d9e8f",
+        M600: "#3c7873",
+    }, azure: {
+        "400": "#3091ec",
+        "600": "#1371d6",
+        M400: "#5f8dcf",
+        M600: "#3a70b2",
+    }, royal: {
+        "400": "#5d7df5",
+        "600": "#3353e2",
+        M400: "#7986d8",
+        M600: "#4b61c3",
+    }, purple: {
+        "400": "#b552e2",
+        "600": "#6a27b8",
+        M400: "#b072cc",
+        M600: "#9358b0",
+    } });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
-var templateObject_1$3;
+var hex2rgba = function (hex, alpha) {
+    if (alpha === void 0) { alpha = 1; }
+    var rgb = hex.match(/\w\w/g);
+    var _a = rgb ? rgb.map(function (x) { return parseInt(x, 16); }) : [0, 0, 0], r = _a[0], g = _a[1], b = _a[2];
+    return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(alpha, ")");
+};
+
+var gradients = {
+    horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
+    dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
+};
+
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients });
+
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
+var templateObject_1$h;
+
+/**
+ * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
+ * <hr>
+ * Used for this:
+    - To organize related information into sections
+    - To surface information through progressive disclosure
+ */
+var Accordion = function (props) { return jsxRuntime.jsx(reactAccordions.Accordion, __assign({}, props)); };
+Accordion.Section = reactAccordions.Accordion.Section;
+Accordion.Header = reactAccordions.Accordion.Header;
+Accordion.Label = reactAccordions.Accordion.Label;
+Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
+});
 /**
  * An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
  * <hr>
  * Used for this:
     - To visually represent a person, brand, or product
  */
-var Avatar = function (props) { return jsxRuntime.jsx(UgAvatar, __assign({}, props)); };
+var Avatar = function (props) {
+    var fixedBadge = props.badge && props.badge > 9 ? "9+" : props.badge;
+    return jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge }));
+};
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$2;
+var templateObject_1$g;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -70,7 +229,17 @@ var templateObject_1$2;
  */
 var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Breadcrumb, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+/**
+ * The Anchor is a link that helps users navigate from one location to another.
+ * <hr>
+ * Used for this:
+    - To navigate from one page to another
+    - To navigate within a page
+    - To display links alongside text
+ */
+var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
+
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -82,17 +251,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$1;
-
-/**
- * The Anchor is a link that helps users navigate from one location to another.
- * <hr>
- * Used for this:
-    - To navigate from one page to another
-    - To navigate within a page
-    - To display links alongside text
- */
-var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
+var templateObject_1$f;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -122,7 +281,157 @@ Used for this:
 **/
 var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
 
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+/**
+ * A Card is a container that groups related content.
+ * <hr>
+ * Used for this:
+    - To group related content
+ */
+var Card = function (props) { return jsxRuntime.jsx(reactNotifications.Well, __assign({}, props)); };
+
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
+
+var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
+var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
+var templateObject_1$e;
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Field: Field$1
+});
+
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject([""], [""])));
+var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
+var templateObject_1$d;
+
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
+/**
+   * A Menu is a wrapper for items elements
+   **/
+var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
+var templateObject_1$c;
+
+/**
+ * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
+ * <hr>
+ * Used for this:
+    - To choose multiple items from a list of options
+    - To filter through a set of data by typing
+ */
+var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
+
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+var Select = function (props) { return jsxRuntime.jsx(reactDropdowns.Select, __assign({}, props)); };
+var Dropdown = function (props) { return jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props)); };
+var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
+
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
+/**
+   * A Checkbox lets users select and unselect options from a list.
+   * <hr>
+   * Used for this:
+   *  - To let users compare options from a list and select all, any, or none of those items
+   *  - To turn a single option on or off
+   * Not for this:
+   *  - To give the user a mutually exclusive choice, use the Radio component instead
+   *  - To let users activate an option that takes effect immediately, use a Toggle instead
+   **/
+var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
+var templateObject_1$b;
+
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject([""], [""])));
+/**
+   * A Field is a wrapper for input elements
+   **/
+var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
+var templateObject_1$a;
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Field: Field
+});
+
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+/**
+   * An Input lets users enter text into a field.
+   * <hr>
+   * Used for this:
+   *  - To let the user enter data into a field
+   *  - To enter multiline text, use a Textarea
+   **/
+var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
+var templateObject_1$9;
+
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
+/**
+   * Radio buttons let users choose a single option among two or more mutually exclusive options.
+   * <hr>
+   * Used for this:
+   *  - For choices or options that can't occur at the same time
+   *  - To indicate that two or more options are mutually exclusive
+   * Not for this:
+   *  - If the user can choose more than one option at once, use a Checkbox instead
+   *  - To select from a long list of options, use Select instead
+   **/
+var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
+var templateObject_1$8;
+
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject([""], [""])));
+/**
+   * A Textarea is a form control for multi-line text.
+   * <hr>
+   * Used for this:
+   *  - To enter multi-line text
+   **/
+var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
+var templateObject_1$7;
+
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
+/**
+   * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
+   * <hr>
+   * Used for this:
+   *  - To see or compare the results of a settings change
+   *  - To activate a mode (such as "dark mode") which takes immediate effect
+   * Not for this:
+   *  - To let users select from a list of settings, use Checkboxes instead
+   **/
+var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
+var templateObject_1$6;
+
+var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
+
+var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
+
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
+
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject([""], [""])));
+/**
+   * A Label is used to specify a title for an input.
+   * <hr>
+   **/
+var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
+var templateObject_1$5;
+
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -131,15 +440,173 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
     - To provide a quick way to navigate to ancestor pages
  */
 var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
+var templateObject_1$4;
+
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
+
+/**
+ * Login Form
+ * <hr>
+ * Used for this:
+    - Login user to the application
+ */
+var LoginForm = function (props) { return (jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
+        var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
+        return (jsxRuntime.jsx(formik.Form, __assign({ onSubmit: handleSubmit }, { children: jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: props.title })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, touched && values.email ? touched.email = true : touched.email = false, errors && errors.email ? { validation: "error" } : (touched.email ? { validation: "success" } : ""))), (errors.email) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ""] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, touched && values.password ? touched.password = true : touched.password = false, errors && errors.password ? { validation: "error" } : (touched.password ? { validation: "success" } : ""))), (errors.password) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ""] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: (Object.keys(errors).length) ? true : (isSubmitting) ? true : false, isPrimary: true }, { children: props.buttonText }))] })) })));
+    } }))); };
+
+/**
+ * A Notification is a passive status update that keeps users informed of system progress.
+ * <hr>
+ * Used for this:
+    - For a passive status update about user or system activity
+ */
+var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.Notification, __assign({}, props))); };
+//Extras
+var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
+var useToast = reactNotifications.useToast;
+
+var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
+/**
+ * A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.
+
+ * Used for this:
+    - To organize and display read-only data with logical relationships
+
+ * Not for this:
+    - To structure content on a page, use the Grid component instead
+ */
+var Table = function (props) { return jsxRuntime.jsx(UgTable, __assign({}, props)); };
+// Extras
+var Head = function (props) { return jsxRuntime.jsx(reactTables.Head, __assign({}, props)); };
+var HeaderRow = function (props) { return jsxRuntime.jsx(reactTables.HeaderRow, __assign({}, props)); };
+var HeaderCell = function (props) { return jsxRuntime.jsx(reactTables.HeaderCell, __assign({}, props)); };
+var Body = function (props) { return jsxRuntime.jsx(reactTables.Body, __assign({}, props)); };
+var Cell = function (props) { return jsxRuntime.jsx(reactTables.Cell, __assign({}, props)); };
+var GroupRow = function (props) { return jsxRuntime.jsx(reactTables.GroupRow, __assign({}, props)); };
+var Caption = function (props) { return jsxRuntime.jsx(reactTables.Caption, __assign({}, props)); };
+var templateObject_1$3;
+
+/**
+ * A Trigger is a wrapper for input elements
+ **/
+var Trigger = function (props) { return jsxRuntime.jsx(reactDropdowns.Trigger, __assign({}, props)); };
+
+/**
+ *  Use Blockquote to represent a body of text that is from another source.
+ */
+var Blockquote = function (props) { return jsxRuntime.jsx(reactTypography.Blockquote, __assign({}, props)); };
+
+var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+/**
+ *  Use Code to style and format inline fragments of computer code.
+ */
+var Code = function (props) { return jsxRuntime.jsx(UgCode, __assign({}, props)); };
+var templateObject_1$2;
+
+/**
+ *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
+ */
+var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
+
+var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+var UgUnorderedList = styled__default["default"](reactTypography.UnorderedList)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+/**
+ *  Use Lists to style and format ordered and unordered lists.
+ *  <hr>
+ *  Use Lists to style and format ordered (`<ol>`) and unordered (`<ul>`) lists.
+ */
+var OrderedList = function (props) { return jsxRuntime.jsx(UgOrderedList, __assign({}, props)); };
+OrderedList.Item = UgOrderedList.Item;
+var UnorderedList = function (props) { return jsxRuntime.jsx(UgUnorderedList, __assign({}, props)); };
+UnorderedList.Item = UgUnorderedList.Item;
+var templateObject_1$1, templateObject_2;
+
+var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+/**
+ *  Use Paragraph to render blocks of text with Garden styling.
+ */
+var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
 var templateObject_1;
 
+/**
+ * Use Span to style and format inline text elements.
+ * <hr>
+ * Used for this:
+    - To apply styles to short strings of text
+    - To include icons inline with text
+ * Not for this:
+    - To style an entire block of text, use Paragraph instead
+ */
+var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
+
+/**
+ *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
+ */
+var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
+var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
+var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
+var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
+var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
+var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
+
+exports.Accordion = Accordion;
 exports.Anchor = Anchor;
 exports.Avatar = Avatar;
+exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.Caption = Caption;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.Close = Close;
+exports.Code = Code;
+exports.Col = Col;
+exports.Dropdown = Dropdown;
+exports.DropdownField = index$1;
+exports.Ellipsis = Ellipsis;
+exports.FormField = index;
 exports.GlobalStyle = GlobalStyle;
+exports.Grid = Grid;
+exports.GroupRow = GroupRow;
+exports.HeaderCell = HeaderCell;
+exports.HeaderRow = HeaderRow;
 exports.IconButton = IconButton;
+exports.Input = Input;
+exports.Item = Item;
+exports.LG = LG;
+exports.Label = Label;
+exports.LoginForm = LoginForm;
+exports.MD = MD;
+exports.Menu = Menu;
+exports.Message = Message;
+exports.Multiselect = Multiselect;
+exports.Notification = Notification;
+exports.OrderedList = OrderedList;
+exports.Paragraph = Paragraph;
+exports.Radio = Radio;
+exports.Row = Row;
+exports.SM = SM;
+exports.Select = Select;
+exports.Span = Span;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
+exports.Table = Table;
+exports.TableCell = Cell;
+exports.TableHead = Head;
+exports.TableRow = Body;
+exports.Textarea = Textarea;
+exports.Title = Title;
+exports.ToastProvider = ToastProvider;
+exports.Toggle = Toggle;
+exports.Trigger = Trigger;
+exports.UnorderedList = UnorderedList;
+exports.XL = XL;
+exports.XXL = XXL;
+exports.XXXL = XXXL;
 exports.theme = theme;
+exports.useToast = useToast;

package/build/stories/accordions/index.stories.d.ts

@@ -10,6 +10,7 @@ interface AccordionStoryArg extends AccordionArgs {
 export declare const Default: Story<AccordionStoryArg>;
 export declare const Bare: Story<AccordionStoryArg>;
 export declare const Expandable: Story<AccordionStoryArg>;
+export declare const Compact: Story<AccordionStoryArg>;
 declare const _default: ComponentMeta<{
     (props: AccordionArgs): JSX.Element;
     Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/build/stories/avatar/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AvatarArgs } from './_types';
+import { AvatarArgs } from "./_types";
 /**
  * An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
  * <hr>

package/build/stories/dropdowns/field/_types.d.ts

@@ -0,0 +1,2 @@
+export interface FieldArgs {
+}

package/build/stories/dropdowns/field/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FieldArgs } from "./_types";
+declare const Field: (props: FieldArgs) => JSX.Element;
+export { Field };

package/build/stories/dropdowns/item/_types.d.ts

@@ -0,0 +1,9 @@
+import { IItemProps } from "@zendeskgarden/react-dropdowns";
+export interface ItemArgs extends IItemProps {
+    /** Sets the value that is returned upon selection */
+    value?: any;
+    /** Indicates that the element is not interactive */
+    disabled?: boolean;
+    /** Applies danger styling */
+    isDanger?: boolean;
+}