@appquality/unguess-design-system 2.2.0 → 2.4.0

package/build/index.js

@@ -5,14 +5,42 @@ 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 React = require('react');
+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 }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -45,21 +73,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 +249,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 +271,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 +301,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 +460,292 @@ 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)); };
+
+var _g;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgLogo = function SvgLogo(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 189.135,
+    height: 30.792,
+    viewBox: "0 0 189.135 30.792"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    id: "Group_2",
+    "data-name": "Group 2",
+    transform: "translate(-356.09 231.603)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_10",
+    "data-name": "Path 10",
+    d: "M531.1-170.478v-10.108c0-2.8-1.5-4.406-4.12-4.406-2.466,0-3.881,1.606-3.881,4.406v10.108h-3.525v-10.108c0-4.73,2.847-7.669,7.43-7.669,4.629,0,7.62,3.01,7.62,7.669v10.108Z",
+    transform: "translate(-116.123 -30.79)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_11",
+    "data-name": "Path 11",
+    d: "M617.594-170.308c-6.8,0-9.223-4.6-9.223-8.906,0-6.523,4.632-9.443,9.223-9.443a9.179,9.179,0,0,1,6.482,2.667l.141.139-2.276,2.331-.143-.136a6.385,6.385,0,0,0-4.2-1.651c-3.343,0-5.678,2.506-5.678,6.093,0,2.662,1.492,5.508,5.678,5.508a5.452,5.452,0,0,0,3.654-1.263V-177.7h-4.365v-3.277h7.928v7.212l-.261.314A8.759,8.759,0,0,1,617.594-170.308Z",
+    transform: "translate(-179.191 -30.504)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_12",
+    "data-name": "Path 12",
+    d: "M710.01-170.478c-4.629,0-7.621-3.01-7.621-7.669v-10.107h3.525v10.107c0,2.8,1.5,4.407,4.119,4.407,2.467,0,3.881-1.606,3.881-4.407v-10.107h3.525v10.107C717.44-173.416,714.592-170.478,710.01-170.478Z",
+    transform: "translate(-245.97 -30.79)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_13",
+    "data-name": "Path 13",
+    d: "M791.18-170.215v-17.669H805.1v3.453h-10.4v3.9h8.7v3.334h-8.7v3.484h10.4v3.5Z",
+    transform: "translate(-309.038 -31.053)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_14",
+    "data-name": "Path 14",
+    d: "M880.688-170.132c-3.866,0-6.307-1.383-7.463-4.229l-.069-.169,2.981-1.545.082.2c.636,1.58,2.324,2.524,4.516,2.524.854,0,3.642-.166,3.642-2.306,0-1.254-1.206-1.993-3.687-2.26-5.94-.706-6.741-3.054-6.741-5.258,0-3.465,3.347-5.042,6.665-5.067,3.311,0,5.642,1.186,6.743,3.429l.086.176-2.846,1.463-.1-.16a4.623,4.623,0,0,0-3.79-1.764c-2.011,0-3.26.774-3.26,2.02,0,1.228,1.417,1.648,3.546,1.9,3.587.442,6.905,1.417,6.905,5.52C887.9-171.582,884.176-170.132,880.688-170.132Z",
+    transform: "translate(-367.264 -30.802)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_15",
+    "data-name": "Path 15",
+    d: "M965.594-169.8c-3.862,0-6.3-1.382-7.455-4.225l-.068-.169,2.978-1.543.082.2c.636,1.579,2.322,2.521,4.511,2.521.854,0,3.639-.166,3.639-2.3,0-1.253-1.2-1.991-3.684-2.257-5.933-.705-6.733-3.051-6.733-5.252,0-3.461,3.344-5.036,6.657-5.062,3.307,0,5.636,1.184,6.736,3.425l.086.176-2.843,1.461-.1-.16a4.619,4.619,0,0,0-3.786-1.762c-2.009,0-3.257.773-3.257,2.018,0,1.227,1.416,1.647,3.543,1.9,3.583.442,6.9,1.416,6.9,5.514C972.8-171.253,969.079-169.8,965.594-169.8Z",
+    transform: "translate(-427.577 -31.049)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: "Group_1",
+    "data-name": "Group 1",
+    transform: "translate(356.09 -231.603)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    id: "Path_16",
+    "data-name": "Path 16",
+    d: "M441.7-157.552v1.74h-.013c-.149,2.52-1.542,3.954-3.874,3.954a3.812,3.812,0,0,1-4.112-3.954h-.012v-1.74h-3.525v1.74h0v.023h0c.2,4.391,3.148,7.2,7.624,7.2,4.434,0,7.245-2.745,7.434-7.2h0v-1.762Z",
+    transform: "translate(-408.704 179.006)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_55",
+    "data-name": "Rectangle 55",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(21.459 12.573)",
+    fill: "#54c38a"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_56",
+    "data-name": "Rectangle 56",
+    width: 3.585,
+    height: 3.585,
+    transform: "translate(32.908 12.573)",
+    fill: "#003a57"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_57",
+    "data-name": "Rectangle 57",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(15.427 3.989) rotate(90)",
+    fill: "#b2c4cd"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_58",
+    "data-name": "Rectangle 58",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(20.618 8.614) rotate(90)",
+    fill: "#809cab"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_59",
+    "data-name": "Rectangle 59",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(8.944 7.179) rotate(90)",
+    fill: "#cceddc"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_60",
+    "data-name": "Rectangle 60",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(3.535 0) rotate(90)",
+    fill: "#ccd8dd"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_61",
+    "data-name": "Rectangle 61",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(10.631 23.196) rotate(90)",
+    fill: "#e5ebee"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    id: "Rectangle_62",
+    "data-name": "Rectangle 62",
+    width: 3.535,
+    height: 3.535,
+    transform: "translate(16.831 16.898) rotate(90)",
+    fill: "#a9e1c5"
+  })))));
+};
+
+/**
+ * Login Form
+ * <hr>
+ * Used for this:
+    - Login user to the application
+ */
+var LoginForm = function (props) { return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row, __assign({ justifyContent: "center", alignItems: "center" }, { children: jsxRuntime.jsxs(Col, __assign({ size: 4, xs: 12, sm: 12 }, { children: [jsxRuntime.jsx(SvgLogo, { style: { marginBottom: theme.space.md } }), 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: "Log In" })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: "Email Address", 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: "Password", 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: "Log in" }))] })) })));
+                    } }))] })) })) })); };
+
+/**
+ * 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;