@appquality/unguess-design-system 2.8.8 → 2.8.14

package/README.md

@@ -1,73 +1,73 @@
-# UNGUESS Design System
-
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
-## Used by
-
-- [Unguess platform](https://app.unguess.io/)
-
-## Tech stack
-
-Building components
-
-- 🪴 [Zendesk Garden](https://garden.zendesk.com/) as base design system
-- ⚛️ [React](https://reactjs.org/) declarative component-centric UI
-- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-- 👩‍🎤 [Styled Components](https://styled-components.com/) for component-scoped styling
-
-Maintaining the system
-
-- 📦 [Yarn](https://yarnpkg.com/) for package management
-- 📦 [NPM](https://www.npmjs.com/) for distribution
-- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)
-
-## Why
-
-The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
-
-## Install
-
-```bash
-yarn
-```
-
-## Global Styles
-
-Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
-
-#### Option 1: Render the `GlobalStyle` component
-
-Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
-
-```javascript
-import { global } from '@storybook/design-system';
-const { GlobalStyle } = global;
-```
-
-```javascript
-/* Render the global styles once per page */
-<GlobalStyle />
-```
-
-#### Option 2: Use the `bodyStyles` to apply styling
-
-Useful when you want build upon the shared global styling.
-
-```javascript
-import { Global, css } from '@storybook/theming';
-import { global } from '@storybook/design-system';
-const { bodyStyles } = global;
-
-const customGlobalStyle = css`
-  body {
-    ${bodyStyles}// Custom body styling for the app
-  }
-`;
-
-const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
-```
-
-```javascript
-/* Render the global styles once per page */
-<CustomGlobalStyle />
-```
+# UNGUESS Design System
+
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+## Used by
+
+- [Unguess platform](https://app.unguess.io/)
+
+## Tech stack
+
+Building components
+
+- 🪴 [Zendesk Garden](https://garden.zendesk.com/) as base design system
+- ⚛️ [React](https://reactjs.org/) declarative component-centric UI
+- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- 👩‍🎤 [Styled Components](https://styled-components.com/) for component-scoped styling
+
+Maintaining the system
+
+- 📦 [Yarn](https://yarnpkg.com/) for package management
+- 📦 [NPM](https://www.npmjs.com/) for distribution
+- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)
+
+## Why
+
+The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
+
+## Install
+
+```bash
+yarn
+```
+
+## Global Styles
+
+Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
+
+#### Option 1: Render the `GlobalStyle` component
+
+Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
+
+```javascript
+import { global } from '@storybook/design-system';
+const { GlobalStyle } = global;
+```
+
+```javascript
+/* Render the global styles once per page */
+<GlobalStyle />
+```
+
+#### Option 2: Use the `bodyStyles` to apply styling
+
+Useful when you want build upon the shared global styling.
+
+```javascript
+import { Global, css } from '@storybook/theming';
+import { global } from '@storybook/design-system';
+const { bodyStyles } = global;
+
+const customGlobalStyle = css`
+  body {
+    ${bodyStyles}// Custom body styling for the app
+  }
+`;
+
+const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
+```
+
+```javascript
+/* Render the global styles once per page */
+<CustomGlobalStyle />
+```

package/build/index.js

@@ -232,8 +232,8 @@ var gradients = {
 
 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, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$L || (templateObject_1$L = __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$L;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$N || (templateObject_1$N = __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$N;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -249,7 +249,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -272,7 +272,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$K;
+var templateObject_1$M;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -293,7 +293,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -305,7 +305,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$J;
+var templateObject_1$L;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -358,13 +358,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$K || (templateObject_1$K = __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$I;
+var templateObject_1$K;
 
 var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
 
@@ -593,7 +593,7 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
+var Wrapper = styled__default["default"](Card)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
 var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
 var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -624,7 +624,7 @@ var CampaignCard = function (props) {
     return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
                         jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] })), jsxRuntime.jsx(StatusIcon, {})] })] }));
 };
-var templateObject_1$H, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$J, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -830,7 +830,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+var StyledTag = styled__default["default"](Tag)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.regular;
 }, function (_a) {
@@ -866,24 +866,24 @@ var Counter = function (props) {
     return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, props.counter !== undefined && jsxRuntime.jsx("span", { children: props.counter })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$G;
+var templateObject_1$I;
 
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
-var templateObject_1$F;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
+var templateObject_1$H;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[100];
 });
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$E;
+var templateObject_1$G;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
    * A Menu is a wrapper for items elements
    **/
@@ -896,7 +896,7 @@ var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta,
 var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
 var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
 var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
-var templateObject_1$D;
+var templateObject_1$F;
 
 /**
  * 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.
@@ -907,6 +907,10 @@ var templateObject_1$D;
  */
 var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
 
+var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    return props.isPrimary &&
+        "\n      background-color: ".concat(props.theme.palette.blue[600], ";\n      color: white;\n      & svg {\n         color: white;\n      }\n   ");
+});
 /**
  * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
  * <hr>
@@ -917,11 +921,12 @@ var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multi
     - 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 Select = function (props) { return jsxRuntime.jsx(UgSelect, __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 templateObject_1$E;
 
-var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -933,14 +938,14 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
    *  - 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$C;
+var templateObject_1$D;
 
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$B;
+var templateObject_1$C;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -948,7 +953,7 @@ var index = /*#__PURE__*/Object.freeze({
     Hint: reactForms.Hint
 });
 
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -957,9 +962,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$A ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$A;
+var templateObject_1$B;
 
-var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 /**
    * Radio buttons let users choose a single option among two or more mutually exclusive options.
    * <hr>
@@ -971,9 +976,9 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$z ||
    *  - To select from a long list of options, use Select instead
    **/
 var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
-var templateObject_1$z;
+var templateObject_1$A;
 
-var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
 /**
    * A Textarea is a form control for multi-line text.
    * <hr>
@@ -981,9 +986,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
    *  - To enter multi-line text
    **/
 var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
-var templateObject_1$y;
+var templateObject_1$z;
 
-var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$y || (templateObject_1$y = __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>
@@ -994,7 +999,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$x
    *  - 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$x;
+var templateObject_1$y;
 
 var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
 
@@ -1059,7 +1064,7 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
   })));
 };
 
-var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
+var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
 var Icon = function (props) {
     var children = function (type, size) {
         if (size === void 0) { size = 24; }
@@ -1072,9 +1077,9 @@ var Icon = function (props) {
     };
     return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
 };
-var templateObject_1$w;
+var templateObject_1$x;
 
-var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
+var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
 /**
  * A Progress loader communicates progress when downloading or uploading content.
  * <hr>
@@ -1086,9 +1091,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
     - When loading page content, use a Skeleton loader instead
  */
 var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
-var templateObject_1$v;
+var templateObject_1$w;
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
 /**
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
  * <hr>
@@ -1103,9 +1108,9 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$u;
+var templateObject_1$v;
 
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -1114,7 +1119,7 @@ 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$t;
+var templateObject_1$u;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1205,7 +1210,7 @@ var Logo = function (props) {
         }[props.type] })));
 };
 
-var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["800"];
 });
@@ -1214,9 +1219,9 @@ var FooterItem = reactModals.FooterItem;
 Modal.Header = reactModals.Header;
 Modal.Body = ugModalBody;
 Modal.Footer = reactModals.Footer;
-var templateObject_1$s;
+var templateObject_1$t;
 
-var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.white;
 });
@@ -1224,18 +1229,26 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$r ||
  * A Body defines the main content of an HTML document which displays on the browser
  */
 var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
-var templateObject_1$r;
+var templateObject_1$s;
 
 /**
  * A Content defines the main content of an HTML document which displays on the browser
  */
 var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
 
-var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+});
 var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
-var templateObject_1$q;
+var templateObject_1$r;
 
-var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.HeaderItemText, __assign({}, props)); };
+var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    font-family: ", ";\n"], ["\n    font-family: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+});
+var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
+var templateObject_1$q;
 
 var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
 
@@ -1262,9 +1275,12 @@ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templ
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  font-family: ", ";\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
 }, function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.sm;
@@ -1361,7 +1377,10 @@ var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props));
 var templateObject_1$l;
 
 var SelectedItemStyle = styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
-var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
+var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+}, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
     return props.isCurrent &&
         "\n    color: ".concat(props.theme.palette.blue["700"], ";\n    font-weight: ").concat(props.theme.fontWeights.semibold, ";\n  ");
 });

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

@@ -24,6 +24,8 @@ export interface SelectArgs extends ISelectProps {
     validation?: 'success' | 'warning' | 'error';
     /** Defines the icon rendered before the element's content */
     start?: any;
+    /** Sets the style of dropdown item*/
+    isPrimary?: boolean;
 }
 export interface MessageArgs extends IMessageProps {
     /** Applies styles based on validation state */

package/generate-story.sh

@@ -1,61 +1,61 @@
-#!/bin/bash
-print_help () {
-	echo "Usage"
-	echo "      $0 new-story-name"
-	exit
-}
-
-if [ $# -lt 1 ]; then
-	print_help
-fi
-
-STORY_NAME="${1}"
-STORY_NAME_LOWER="$(tr '[:upper:]' '[:lower:]' <<< "${STORY_NAME}")"
-generate_component() {
-	cat << EOF
-import { ${STORY_NAME}Props } from "./_types";
-
-export const Basic${STORY_NAME} = ({}: ${STORY_NAME}Props) => {};
-EOF
-}
-
-generate_types() {
-	cat << EOF
-import { BaseProps } from "../../shared/_types";
-export interface ${STORY_NAME}Props extends BaseProps {};
-
-EOF
-}
-generate_styled_component() {
-	cat << EOF
-import styled from "styled-components";
-import { Basic${STORY_NAME} } from "./_component";
-
-export const ${STORY_NAME} = styled(Basic${STORY_NAME})\`\`;
-EOF
-}
-generate_stories() {
-	cat << EOF
-import { Story, Meta } from "@storybook/react";
-import { ${STORY_NAME}Props } from "./_types";
-import { ${STORY_NAME} } from "./${STORY_NAME}";
-
-export default {
-  title: "${STORY_NAME}",
-  component: ${STORY_NAME},
-} as Meta;
-
-const Template: Story<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
-
-export const ${STORY_NAME}Base = Template.bind({});
-${STORY_NAME}Base.args = {};
-EOF
-}
-
-mkdir "src/test-stories/$STORY_NAME_LOWER"
-
-generate_component > "src/test-stories/$STORY_NAME_LOWER/_component.tsx"
-generate_types > "src/test-stories/$STORY_NAME_LOWER/_types.ts"
-generate_styled_component > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.tsx"
-generate_stories > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.stories.tsx"
+#!/bin/bash
+print_help () {
+	echo "Usage"
+	echo "      $0 new-story-name"
+	exit
+}
+
+if [ $# -lt 1 ]; then
+	print_help
+fi
+
+STORY_NAME="${1}"
+STORY_NAME_LOWER="$(tr '[:upper:]' '[:lower:]' <<< "${STORY_NAME}")"
+generate_component() {
+	cat << EOF
+import { ${STORY_NAME}Props } from "./_types";
+
+export const Basic${STORY_NAME} = ({}: ${STORY_NAME}Props) => {};
+EOF
+}
+
+generate_types() {
+	cat << EOF
+import { BaseProps } from "../../shared/_types";
+export interface ${STORY_NAME}Props extends BaseProps {};
+
+EOF
+}
+generate_styled_component() {
+	cat << EOF
+import styled from "styled-components";
+import { Basic${STORY_NAME} } from "./_component";
+
+export const ${STORY_NAME} = styled(Basic${STORY_NAME})\`\`;
+EOF
+}
+generate_stories() {
+	cat << EOF
+import { Story, Meta } from "@storybook/react";
+import { ${STORY_NAME}Props } from "./_types";
+import { ${STORY_NAME} } from "./${STORY_NAME}";
+
+export default {
+  title: "${STORY_NAME}",
+  component: ${STORY_NAME},
+} as Meta;
+
+const Template: Story<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
+
+export const ${STORY_NAME}Base = Template.bind({});
+${STORY_NAME}Base.args = {};
+EOF
+}
+
+mkdir "src/test-stories/$STORY_NAME_LOWER"
+
+generate_component > "src/test-stories/$STORY_NAME_LOWER/_component.tsx"
+generate_types > "src/test-stories/$STORY_NAME_LOWER/_types.ts"
+generate_styled_component > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.tsx"
+generate_stories > "src/test-stories/$STORY_NAME_LOWER/$STORY_NAME.stories.tsx"
 2606:50c0:8003::154