@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/{index-cb0544e5.js → index-fe74a1a3.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-d34cd464.js');
+var index = require('./index-036fe55d.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var utils = require('./utils-524bda7c.js');
-var index$1 = require('./index-05f106c2.js');
-var index$2 = require('./index-def9867a.js');
-var defaultClassWrapper = require('./defaultClassWrapper-e87ca8ef.js');
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var miscTheme = require('./miscTheme.js');
+var utils = require('./utils-928b4701.js');
+var index$1 = require('./index-df9447b3.js');
+var index$2 = require('./index-a8c1c011.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -80,13 +80,13 @@ const renderNotificationStyles = (type, size, hasIcon, color) => {
     switch (color) {
         case 'primary':
             notificationColor = `
-      background: ${theme.theme.colors.primary50};
-      color: ${theme.theme.colors.primary600};  
+      background: ${miscTheme.theme.colors.primary50};
+      color: ${miscTheme.theme.colors.primary600};  
     `;
             break;
         case 'error':
             notificationColor = `
-        background: ${theme.theme.colors.error};
+        background: ${miscTheme.theme.colors.error};
         color: white;
       `;
             break;
@@ -121,7 +121,7 @@ const StyledBadge = styled__default["default"].div `
   }
 
   span {
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -159,7 +159,7 @@ const StyledBorderHeading = styled__default["default"].h4 `
     left: 0;
     width: 4px;
     height: 18px;
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     content: '';
   }
 
@@ -179,10 +179,10 @@ const StyledBorderHeading = styled__default["default"].h4 `
   }
 
   &[data-type='bold'] {
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
   &[data-type='semiBold'] {
-    font-weight: ${theme.theme.sizes.fwSemiBold};
+    font-weight: ${miscTheme.theme.sizes.fwSemiBold};
   }
 
   &[data-uppercase] {
@@ -201,14 +201,14 @@ const BorderHeading = ({ style, children, className, size = 'lg', type = 'bold',
 const StyledDropdown = styled__default["default"].div `
   position: relative;
   box-sizing: border-box;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
   background-position: right 16px center;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
 
   &[data-has-icons='true'] {
     border: none;
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
 
     img,
     svg {
@@ -246,7 +246,7 @@ const StyledDropdown = styled__default["default"].div `
   }
 
   &:hover {
-    box-shadow: 0 0 2px 2px ${theme.theme.colors.primary200};
+    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
   }
 `;
 const StyledDropdownName = styled__default["default"].div `
@@ -254,9 +254,9 @@ const StyledDropdownName = styled__default["default"].div `
   cursor: pointer;
   &[data-dropdown-open] {
     padding: 11px 15px 11px 15px;
-    border: 1px solid ${theme.theme.colors.primaryBase};
-    border-radius: ${theme.theme.borderRadius};
-    box-shadow: 0 0 2px 2px ${theme.theme.colors.primary200};
+    border: 1px solid ${miscTheme.theme.colors.primaryBase};
+    border-radius: ${miscTheme.theme.borderRadius};
+    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
   }
 
   & > svg {
@@ -271,8 +271,8 @@ const StyledDropdownList = styled__default["default"].ul `
   left: 0;
   display: block;
   margin-top: 4px;
-  background: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
+  background: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
   box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
     -2px 2px 5px rgba(67, 86, 100, 0.123689);
   cursor: pointer;
@@ -280,18 +280,18 @@ const StyledDropdownList = styled__default["default"].ul `
   &[data-has-icons='true'] {
     background: white;
     box-shadow: none;
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
   }
 `;
 const StyledDropdownOption = styled__default["default"].li `
   margin: 8px;
   padding: 12px 18px 12px 16px;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   display: flex;
   &:hover,
   :active {
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
   }
 `;
 const StyledIcon = styled__default["default"].div `
@@ -386,11 +386,11 @@ const StyledPagination = styled__default["default"].div `
     transition: all 0.3s ease;
   }
   [data-page-active] {
-    background: ${theme.theme.colors.primaryBase};
-    color: ${theme.theme.colors.white};
+    background: ${miscTheme.theme.colors.primaryBase};
+    color: ${miscTheme.theme.colors.white};
 
     > a {
-      color: ${theme.theme.colors.white};
+      color: ${miscTheme.theme.colors.white};
     }
   }
 `;
@@ -401,23 +401,23 @@ const StyledPageBlock = styled__default["default"].div `
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   margin: 0 2px;
   border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
+  color: ${miscTheme.theme.colors.gray800};
   cursor: pointer;
   font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
 
   &[data-last-page] {
     border: none;
-    background-color: ${theme.theme.colors.gray100};
+    background-color: ${miscTheme.theme.colors.gray100};
     cursor: not-allowed;
     pointer-events: none;
 
     svg {
       path {
-        stroke: ${theme.theme.colors.gray300};
+        stroke: ${miscTheme.theme.colors.gray300};
       }
     }
   }
@@ -430,13 +430,13 @@ const StyledPaginationBlock = styled__default["default"].li `
   justify-content: center;
   margin: 0 2px;
   border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
+  color: ${miscTheme.theme.colors.gray800};
   cursor: pointer;
   font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
 
   > a {
-    color: ${theme.theme.colors.gray800};
+    color: ${miscTheme.theme.colors.gray800};
     text-decoration: unset;
     display: block;
     width: 100%;
@@ -533,72 +533,72 @@ const Radio = ({ size = 'small', label, name, checked, value, className, isDisab
 const getTag = (tag, isLight) => {
     switch (tag) {
         case 'yellow': {
-            const color = isLight ? theme.theme.colors.yellow50 : theme.theme.colors.yellow600;
+            const color = isLight ? miscTheme.theme.colors.yellow50 : miscTheme.theme.colors.yellow600;
             return `
         background: ${color};
         p {
           color: var(
             --text-props-color,
-            ${theme.theme.colors.gray800}
+            ${miscTheme.theme.colors.gray800}
           );
         }
       `;
         }
         case 'standard': {
             return `
-      background: ${theme.theme.colors.white};
-      border: 1px solid ${theme.theme.colors.gray200};
+      background: ${miscTheme.theme.colors.white};
+      border: 1px solid ${miscTheme.theme.colors.gray200};
   
       p {
         color: var(
           --text-props-color,
-          ${theme.theme.colors.gray800}
+          ${miscTheme.theme.colors.gray800}
         );
       }
   
       &:hover {
-        background: ${theme.theme.colors.gray100};
+        background: ${miscTheme.theme.colors.gray100};
       }
       `;
         }
         case 'red': {
-            const color = isLight ? theme.theme.colors.red50 : theme.theme.colors.red500;
+            const color = isLight ? miscTheme.theme.colors.red50 : miscTheme.theme.colors.red500;
             return `
          background: ${color};
         `;
         }
         case 'green': {
-            const color = isLight ? theme.theme.colors.green50 : theme.theme.colors.green500;
+            const color = isLight ? miscTheme.theme.colors.green50 : miscTheme.theme.colors.green500;
             return `
          background: ${color};
       `;
         }
         case 'blue': {
-            const color = isLight ? theme.theme.colors.primary50 : theme.theme.colors.primaryBase;
+            const color = isLight ? miscTheme.theme.colors.primary50 : miscTheme.theme.colors.primaryBase;
             return `
          background: ${color};
       `;
         }
         case 'teal': {
-            const color = isLight ? theme.theme.colors.teal100 : theme.theme.colors.teal600;
+            const color = isLight ? miscTheme.theme.colors.teal100 : miscTheme.theme.colors.teal600;
             return `
          background: ${color};
       `;
         }
         case 'pink': {
-            const color = isLight ? theme.theme.colors.pink200 : theme.theme.colors.pink800;
+            const color = isLight ? miscTheme.theme.colors.pink200 : miscTheme.theme.colors.pink800;
             return `
          background: ${color};
       `;
         }
         case 'violet': {
-            const color = isLight ? theme.theme.colors.violet100 : theme.theme.colors.violet500;
+            const color = isLight ? miscTheme.theme.colors.violet100 : miscTheme.theme.colors.violet500;
             return `
           background: ${color};
       `;
         }
         case 'grey': {
-            const color = isLight ? theme.theme.colors.gray100 : theme.theme.colors.gray600;
+            const color = isLight ? miscTheme.theme.colors.gray100 : miscTheme.theme.colors.gray600;
             return `
           background: ${color};
       `;
@@ -626,15 +626,15 @@ const StyledTag = styled__default["default"].div `
     border-radius: 0 4px 18px 0;
     height: 24px;
     width: 90px;
-    border-left: var(--offset-size) solid ${theme.theme.colors.accentLight};
+    border-left: var(--offset-size) solid ${miscTheme.theme.colors.accentLight};
     padding: 0;
     margin-left: calc(var(--offset-size) * -1);
 
     p {
-      font-weight: ${theme.theme.sizes.fwBold};
+      font-weight: ${miscTheme.theme.sizes.fwBold};
       color: var(
         --text-props-color,
-        ${theme.theme.colors.secondaryDark}
+        ${miscTheme.theme.colors.secondaryDark}
       );
       font-size: 11px;
       margin-left: calc(var(--offset-size) * -1);
@@ -643,7 +643,7 @@ const StyledTag = styled__default["default"].div `
     &::after {
       width: calc(var(--offset-size) * 2);
       height: var(--offset-size);
-      background: ${theme.theme.colors.accentMain};
+      background: ${miscTheme.theme.colors.accentMain};
       position: absolute;
       left: calc(var(--offset-size) * -1);
       bottom: calc(var(--offset-size) * -1);
@@ -670,7 +670,7 @@ const StyledTag = styled__default["default"].div `
       color: var(--text-props-color, #000);
       `
     : `
-      color: var(--text-props-color, ${theme.theme.colors.white});
+      color: var(--text-props-color, ${miscTheme.theme.colors.white});
         `}
   }
 
@@ -689,7 +689,7 @@ const StyledTag = styled__default["default"].div `
 
   &[data-is-selected],
   &:active {
-    background: ${theme.theme.colors.primary50};
+    background: ${miscTheme.theme.colors.primary50};
   }
 `;
 
@@ -704,7 +704,7 @@ const Tag = ({ type, children, style, isInline, isSquared = false, className, is
 };
 
 const heightIcon = '24px';
-const StyledToggleIcon = defaultClassWrapper.setDefaultClass(styled__default["default"].span `
+const StyledToggleIcon = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].span `
     position: relative;
     display: block;
     width: 40px;
@@ -740,11 +740,11 @@ const StyledToggle = styled__default["default"].div `
   label {
     cursor: pointer;
     display: inline-flex;
-    color: ${theme.theme.colors.gray600};
+    color: ${miscTheme.theme.colors.gray600};
   }
 
   input:checked + label ${StyledToggleIcon.classSelector} {
-    background: ${theme.theme.colors.primaryBase};
+    background: ${miscTheme.theme.colors.primaryBase};
     &:after {
       left: calc(100% - 2px);
       transform: translateX(-100%);