@appquality/unguess-design-system 3.0.4-alpha → 3.0.4-svgr-beta

package/README.md

@@ -0,0 +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 />
+```

package/build/index.js

@@ -37,7 +37,6 @@ var formik = require('formik');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var SlickSlider = require('react-slick');
 var reactTables = require('@zendeskgarden/react-tables');
-var reactSpring = require('react-spring');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -735,6 +734,8 @@ var _path$A;
 function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : 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$H.apply(this, arguments); }
 var SvgUgSquare = function SvgUgSquare(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -748,6 +749,8 @@ var _path$z;
 function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : 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$G.apply(this, arguments); }
 var SvgUgCircle = function SvgUgCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -761,6 +764,8 @@ var _path$y;
 function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : 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$F.apply(this, arguments); }
 var SvgUgTriangle = function SvgUgTriangle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -774,6 +779,8 @@ var _rect$4, _path$x, _path2$b, _path3$4;
 function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : 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$E.apply(this, arguments); }
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -798,6 +805,8 @@ var _rect$3, _path$w, _path2$a;
 function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : 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$D.apply(this, arguments); }
 var SvgCampaignLocked = function SvgCampaignLocked(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -823,6 +832,8 @@ var _rect$2, _path$v, _path2$9;
 function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : 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$C.apply(this, arguments); }
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -850,6 +861,8 @@ var _rect$1, _path$u, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1
 function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : 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$B.apply(this, arguments); }
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -895,6 +908,8 @@ var _g$7, _path$t, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _
 function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : 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$A.apply(this, arguments); }
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -965,6 +980,8 @@ var _g$6, _path$s;
 function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : 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$z.apply(this, arguments); }
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+    width: 24,
+    height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -2327,6 +2344,8 @@ function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : func
 var SvgBoldFill = function SvgBoldFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2340,6 +2359,8 @@ function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : func
 var SvgItalicFill = function SvgItalicFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2356,6 +2377,8 @@ function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : func
 var SvgQuoteFill = function SvgQuoteFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2375,6 +2398,8 @@ function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : func
 var SvgH1Fill = function SvgH1Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
@@ -2403,6 +2428,8 @@ function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : func
 var SvgH2Fill = function SvgH2Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
@@ -2431,6 +2458,8 @@ function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : func
 var SvgH3Fill = function SvgH3Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
@@ -2673,6 +2702,8 @@ function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : func
 var SvgNotesStroke = function SvgNotesStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
@@ -2719,6 +2750,7 @@ const Wrapper$1 = styled__default["default"].div `
 
     svg {
       margin-left: ${({ theme }) => theme.space.xs};
+      flex-shrink: 0;
     }
   }
 `;
@@ -2760,7 +2792,7 @@ const InputItem = (props) => {
             input.focus();
         }
     }, [isEditing, input]);
-    return isEditing ? (jsxRuntime.jsx(StyledInput, Object.assign({ ref: setInput }, props, { style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }))) : (jsxRuntime.jsxs(StyledText$1, Object.assign({ isBold: true, style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, { width: 50 })] })));
+    return isEditing ? (jsxRuntime.jsx(StyledInput, Object.assign({ ref: setInput }, props, { style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }))) : (jsxRuntime.jsxs(StyledText$1, Object.assign({ isBold: true, style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, {})] })));
 };
 InputToggle.Item = InputItem;
 InputToggle.Label = StyledLabel;
@@ -2792,6 +2824,8 @@ var _path$o;
 function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : 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$r.apply(this, arguments); }
 var SvgCheckLg = function SvgCheckLg(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "#68737D",
     xmlns: "http://www.w3.org/2000/svg"
@@ -2993,6 +3027,8 @@ function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : func
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3048,6 +3084,8 @@ function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : func
 var SvgMenuStroke = function SvgMenuStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3214,6 +3252,8 @@ function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : func
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3227,6 +3267,8 @@ function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : func
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3250,7 +3292,7 @@ const StyledToggle = styled__default["default"](IconButton) `
   }
 `;
 const NavToggle = (props) => {
-    return (jsxRuntime.jsx(StyledToggle, Object.assign({}, props, { className: "toggle-navigation", isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
+    return (jsxRuntime.jsx(StyledToggle, Object.assign({}, props, { className: "toggle-navigation", isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, {})) : (jsxRuntime.jsx(SvgChevronRightStroke, {})) })));
 };
 
 const UgNavItem$1 = styled__default["default"](reactChrome.NavItem) `
@@ -3303,6 +3345,8 @@ function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : func
 var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
     focusable: "false",
     viewBox: "0 0 26 26"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3316,6 +3360,8 @@ function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : func
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
     focusable: "false",
     viewBox: "0 0 26 26"
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
@@ -3377,6 +3423,8 @@ var _path$h;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : 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$j.apply(this, arguments); }
 var SvgFolderIcon = function SvgFolderIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+    width: 12,
+    height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3391,6 +3439,8 @@ var _path$g, _defs$1;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : 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$i.apply(this, arguments); }
 var SvgTemplates = function SvgTemplates(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+    width: 26,
+    height: 26,
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -3418,6 +3468,8 @@ var _path$f, _defs;
 function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : 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$h.apply(this, arguments); }
 var SvgTemplatesActive = function SvgTemplatesActive(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+    width: 26,
+    height: 26,
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -3669,6 +3721,8 @@ var _path$e;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : 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$g.apply(this, arguments); }
 var SvgPlus = function SvgPlus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -3981,6 +4035,8 @@ function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : func
 var SvgPlayFill = function SvgPlayFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3994,6 +4050,8 @@ function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : func
 var SvgPauseFill = function SvgPauseFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
@@ -4019,6 +4077,8 @@ var _path$c, _path2$5, _path3$1;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : 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$d.apply(this, arguments); }
 var SvgForwardSecondsFill = function SvgForwardSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4040,6 +4100,8 @@ var _path$b, _path2$4, _path3;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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$c.apply(this, arguments); }
 var SvgBackSecondsFill = function SvgBackSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4062,6 +4124,8 @@ function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : func
 var SvgPreviousFill = function SvgPreviousFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 24 24"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4170,6 +4234,8 @@ function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : func
 var SvgVolumeMutedFill = function SvgVolumeMutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4187,6 +4253,8 @@ function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : func
 var SvgVolumeUnmutedFill = function SvgVolumeUnmutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4246,6 +4314,8 @@ function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : func
 var SvgMaximizeFill = function SvgMaximizeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4523,6 +4593,8 @@ function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : func
 var SvgExit = function SvgExit(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4540,6 +4612,8 @@ var _path$5;
 function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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$6.apply(this, arguments); }
 var SvgThumbsUp = function SvgThumbsUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4556,6 +4630,8 @@ function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : func
 var SvgLockLockedFill = function SvgLockLockedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
   }, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
@@ -4682,6 +4758,8 @@ var _path$3;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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$4.apply(this, arguments); }
 var SvgQuestionMark = function SvgQuestionMark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4696,6 +4774,8 @@ var _path$2;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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$3.apply(this, arguments); }
 var SvgCopy = function SvgCopy(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    width: 12,
+    height: 16,
     viewBox: "0 0 12 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4711,6 +4791,8 @@ var _path$1;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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$2.apply(this, arguments); }
 var SvgInfoFill = function SvgInfoFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4808,6 +4890,8 @@ const HelpItem = (props) => {
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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$1.apply(this, arguments); }
 var SvgEmpty = function SvgEmpty(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "#68737D",
     xmlns: "http://www.w3.org/2000/svg"
@@ -4818,6 +4902,8 @@ var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 SvgTranslationExists = function SvgTranslationExists(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
     viewBox: "0 0 16 16",
     fill: "#68737D",
     xmlns: "http://www.w3.org/2000/svg"
@@ -5233,7 +5319,7 @@ const Row = (props) => jsxRuntime.jsx(UgRow, Object.assign({}, props));
 const Cell = (props) => jsxRuntime.jsx(UgCell, Object.assign({}, props));
 const Caption = (props) => (jsxRuntime.jsx(reactTables.Caption, Object.assign({}, props)));
 
-const StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div) `
+const StyledAnimatedToggle = styled__default["default"].div `
   display: inline-block;
   float: right;
 `;
@@ -5270,16 +5356,8 @@ const UgGroupRow = styled__default["default"](reactTables.GroupRow) `
 `;
 const GroupRow = (props) => jsxRuntime.jsx(UgGroupRow, Object.assign({}, props));
 const GroupRowComponent = (props) => {
-    const toggleIconAnimation = reactSpring.useSpring({
-        config: { duration: 120 },
-        transform: props.group.items.length > 0
-            ? props.open
-                ? "rotate(180deg)"
-                : "rotate(0deg)"
-            : "rotate(0deg)",
-    });
     return (jsxRuntime.jsx(GroupRow, Object.assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
-        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: toggleIconAnimation }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
+        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
 };
 const AnimatedRow = styled__default["default"](Row) `
   &.render {
@@ -5343,6 +5421,7 @@ const StyledTabPanel = styled__default["default"].div `
   display: ${({ hidden }) => (hidden ? "none" : "block")};
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 `;
 const TabPanel = (_a) => {
     var { hidden, children } = _a, rest = __rest(_a, ["hidden", "children"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.0.4-alpha",
+  "version": "3.0.4-svgr-beta",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -9,7 +9,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "yarn run clean && rollup -c",
-    "clean": "rimraf build"
+    "clean": "rimraf build",
+    "release": "npx auto shipit --base-branch=master",
+    "type:check": "tsc"
   },
   "repository": {
     "type": "git",
@@ -57,7 +59,6 @@
     "@zendeskgarden/react-tooltips": "^8.49.0",
     "@zendeskgarden/react-typography": "^8.49.0",
     "react-slick": "^0.29.0",
-    "react-spring": "^9.4.4",
     "react-window": "^1.8.6",
     "ua-parser-js": "^1.0.2"
   },