@woosmap/ui 3.13.0 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.13.0",
+  "version": "3.17.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Button/ButtonGroup.js

@@ -4,17 +4,15 @@ import PropTypes from 'prop-types';
 
 export default class ButtonGroup extends Component {
     render() {
-        const { children, isLight, isTooltipBtn, testId, ...rest } = this.props;
+        const { children, isLight, isTooltipBtn, testId, className, ...rest } = this.props;
+        const classes = cl(
+            'btn--group-container',
+            { 'btn--group-container--light': isLight },
+            { 'btn--group-container--btn-tooltip': isTooltipBtn },
+            className
+        );
         return (
-            <div
-                className={cl(
-                    'btn--group-container',
-                    { 'btn--group-container--light': isLight },
-                    { 'btn--group-container--btn-tooltip': isTooltipBtn }
-                )}
-                {...rest}
-                data-testid={testId}
-            >
+            <div className={classes} {...rest} data-testid={testId}>
                 {children}
             </div>
         );
@@ -26,6 +24,7 @@ ButtonGroup.defaultProps = {
     children: null,
     isLight: false,
     isTooltipBtn: false,
+    className: '',
 };
 
 ButtonGroup.propTypes = {
@@ -33,4 +32,5 @@ ButtonGroup.propTypes = {
     children: PropTypes.array,
     isLight: PropTypes.bool,
     isTooltipBtn: PropTypes.bool,
+    className: PropTypes.string,
 };

package/src/components/Demo/AddressDemo.js

@@ -259,9 +259,10 @@ export default class AddressDemo extends Component {
             ),
         };
         const filterGeometry = {
-            label: tr('Geometry only'),
+            label: false,
             component: (
                 <Input
+                    label={tr('Geometry only')}
                     type="checkbox"
                     key="geometry"
                     checked={geometry}
@@ -275,7 +276,7 @@ export default class AddressDemo extends Component {
         const filterCountries = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight key="language">
+                <ButtonGroup className="language" isLight key="language">
                     {languages.map((item) => (
                         <Button
                             type="group"

package/src/components/Demo/DistanceDemo.js

@@ -262,7 +262,7 @@ export default class DistanceDemo extends Component {
         const filterTravelMode = {
             key: 'travelmode',
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="transportation" isLight>
                     {travelModes.map((item) => (
                         <Button
                             type="group"
@@ -300,7 +300,7 @@ export default class DistanceDemo extends Component {
         const filterLanguage = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="language" isLight>
                     {languages.map((item) => (
                         <Button
                             type="group"
@@ -319,9 +319,10 @@ export default class DistanceDemo extends Component {
         };
 
         const filterAlternatives = {
-            label: tr('Alternative routes'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Alternative routes')}
                     type="checkbox"
                     checked={alternatives}
                     onChange={(e) => {
@@ -331,7 +332,7 @@ export default class DistanceDemo extends Component {
             ),
         };
 
-        return [filterTravelMode, filterUnit, filterLanguage, filterAlternatives];
+        return [filterAlternatives, filterTravelMode, filterUnit, filterLanguage];
     };
 
     render() {

package/src/components/Demo/GeolocationDemo.js

@@ -116,9 +116,10 @@ export default class GeolocationDemo extends Component {
         }
 
         const filterStores = {
-            label: tr('Display Geolocation POIs'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Geolocation POIs')}
                     type="checkbox"
                     key="stores"
                     checked={showStores}

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -208,9 +208,10 @@ export default class LocalitiesAddressDemo extends Component {
             ),
         };
         const filterGeometry = {
-            label: tr('Geometry only'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Geometry only')}
                     type="checkbox"
                     key="geometry"
                     checked={geometry}

package/src/components/Demo/LocalitiesDemo.js

@@ -224,28 +224,26 @@ export default class LocalitiesDemo extends Component {
         const filterTypes = {
             label: tr('Filter by'),
             component: (
-                <div className="demo__input-container--inline">
+                <>
                     <CountrySelect
                         isMulti
-                        size="small"
                         placeholder={tr('Country')}
                         filter={['fr', 'gb', 'sp', 'it', 'de', 'nl']}
                         onChange={(items) => this.setState({ countries: items }, this.requestLocalities)}
                     />
                     <Select
-                        size="small"
                         placeholder={tr('Point of interest')}
                         options={this.types}
                         isMulti
                         onChange={(items) => this.setState({ localitiesTypes: items }, this.requestLocalities)}
                     />
-                </div>
+                </>
             ),
         };
         const filterCountries = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="language" isLight>
                     {languages.map((item) => (
                         <Button
                             size="small"

package/src/components/Demo/MapDemo.js

@@ -145,9 +145,10 @@ storesOverlay.setMap(map);
     renderFooterFilters = () => {
         const { hasStores, hasPois } = this.state;
         const filterPois = {
-            label: tr('Display Map POIs'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Map POIs')}
                     type="checkbox"
                     key="pois"
                     checked={hasPois}
@@ -159,9 +160,10 @@ storesOverlay.setMap(map);
         };
 
         const filterStores = {
-            label: tr('Display Woosmap Stores overlay'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Woosmap Stores overlay')}
                     type="checkbox"
                     key="stores"
                     checked={hasStores}

package/src/components/Demo/SkeletonDemo.js

@@ -148,14 +148,14 @@ export default class SkeletonDemo extends Component {
             return null;
         }
         return (
-            <div className="demo__content-footer">
+            <>
                 {footerFilters.map((filter) => (
                     <div className="demo__input-container" key={filter.label || filter.key}>
-                        {filter.label ? <p className="demo__label--filter">{filter.label}</p> : false}
+                        {filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
                         {filter.component}
                     </div>
                 ))}
-            </div>
+            </>
         );
     };
 

package/src/components/Icon/Icon.js

@@ -52,12 +52,15 @@ import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
 import { ReactComponent as Chat } from '../../icons/chat.svg';
 import { ReactComponent as Check } from '../../icons/check.svg';
+import { ReactComponent as Checked } from '../../icons/checked.svg';
 import { ReactComponent as CheckCircle } from '../../icons/check-circle.svg';
 import { ReactComponent as Clock } from '../../icons/clock.svg';
 import { ReactComponent as ClockReversed } from '../../icons/clock-reversed.svg';
 import { ReactComponent as Close } from '../../icons/close.svg';
 import { ReactComponent as CloseThick } from '../../icons/close-thick.svg';
+import { ReactComponent as Company } from '../../icons/company.svg';
 import { ReactComponent as Copy } from '../../icons/copy.svg';
+import { ReactComponent as CreditCard } from '../../icons/credit-card.svg';
 import { ReactComponent as Cube } from '../../icons/cube.svg';
 import { ReactComponent as Dashboard } from '../../icons/dashboard.svg';
 import { ReactComponent as Delete } from '../../icons/delete.svg';
@@ -99,6 +102,7 @@ import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Prize } from '../../icons/prize.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
@@ -194,12 +198,15 @@ const Icons = {
     charts: Charts,
     chat: Chat,
     check: Check,
+    checked: Checked,
     'check-circle': CheckCircle,
     clock: Clock,
     'clock-reversed': ClockReversed,
     close: Close,
     'close-thick': CloseThick,
+    company: Company,
     copy: Copy,
+    'credit-card': CreditCard,
     cube: Cube,
     dashboard: Dashboard,
     delete: Delete,
@@ -241,6 +248,7 @@ const Icons = {
     organizations: Organizations,
     phone: Phone,
     platform: Platform,
+    prize: Prize,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,

package/src/icons/checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.972 15.447a.789.789 0 0 1-.559-.231L7.156 11.96a.791.791 0 0 1 1.117-1.119l2.7 2.7 4.755-4.753A.79.79 0 1 1 16.844 9.9l-5.314 5.315a.784.784 0 0 1-.558.232Z"/><path d="M12 21.487A9.487 9.487 0 1 1 21.487 12 9.5 9.5 0 0 1 12 21.487ZM12 4.1a7.905 7.905 0 1 0 7.905 7.9A7.914 7.914 0 0 0 12 4.1Z"/></svg>

package/src/icons/company.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.476 8.737h-1.541v-2.51a2.686 2.686 0 0 0-2.684-2.683H6.119a2.686 2.686 0 0 0-2.684 2.683V19.9a.56.56 0 0 0 .56.56h16.01a.56.56 0 0 0 .56-.56v-7.075a4.094 4.094 0 0 0-4.089-4.088ZM4.555 6.227a1.565 1.565 0 0 1 1.564-1.564h6.132a1.565 1.565 0 0 1 1.564 1.564v2.51h-5.01a.56.56 0 1 0 0 1.119h5.01V12.1h-5.01a.56.56 0 1 0 0 1.119h5.01v2.241h-5.01a.56.56 0 1 0 0 1.119h5.01v2.76h-9.26Zm10.38 13.11V9.856h1.541a2.967 2.967 0 0 1 2.868 2.244h-2.259a.56.56 0 1 0 0 1.119h2.36v2.241h-2.36a.56.56 0 1 0 0 1.119h2.36v2.76Z"/></svg>

package/src/icons/credit-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.581 5.373H4.235a1.493 1.493 0 0 0-1.491 1.491v10.272a1.493 1.493 0 0 0 1.491 1.491h15.346a1.493 1.493 0 0 0 1.491-1.491V6.864a1.493 1.493 0 0 0-1.491-1.491ZM4.235 6.492h15.346a.373.373 0 0 1 .372.372v1.279H3.863V6.864a.373.373 0 0 1 .372-.372Zm15.346 11.016H4.235a.373.373 0 0 1-.372-.372v-5.218h16.09v5.218a.373.373 0 0 1-.372.372Z"/><path d="M18.4 14.108h-7.549a.56.56 0 1 0 0 1.12H18.4a.56.56 0 0 0 0-1.12Z"/></svg>

package/src/icons/email.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.8 6C14.4 4.6 9.6 4.6 5.2 6c-1 .3-1.7 1.3-1.7 2.4v7.4c0 1.1.7 2.1 1.8 2.4 2.1.5 4.4.8 6.7.8s4.6-.3 6.8-.9c1.1-.3 1.8-1.3 1.8-2.4V8.4c0-1.1-.7-2.1-1.8-2.4zM5.5 7.1c4.2-1.3 8.8-1.3 13 0 .6.2 1 .7 1 1.3L14.1 12c-1.4.9-3.2.9-4.5 0l-5-3.6c0-.6.3-1.2.9-1.3zm13 9.9c-4.2 1.2-8.7 1.2-12.9 0-.6-.2-1-.7-1-1.3v-6L9 12.9c1.7 1.2 4 1.2 5.8 0l4.7-3.2v6c-.1.6-.5 1.2-1 1.3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.123 4.562a62.619 62.619 0 0 0-14.247 0 2.408 2.408 0 0 0-2.132 2.394v10.026a2.408 2.408 0 0 0 2.133 2.394l1.065.122a53.1 53.1 0 0 0 6.058.347 53.06 53.06 0 0 0 6.057-.347l1.066-.122a2.408 2.408 0 0 0 2.132-2.394V6.956a2.408 2.408 0 0 0-2.132-2.394ZM5 5.676a61.219 61.219 0 0 1 14 0 1.288 1.288 0 0 1 1.142 1.28v1.2L13.91 12.71a3.229 3.229 0 0 1-3.82 0L3.863 8.159v-1.2A1.288 1.288 0 0 1 5 5.676Zm14 12.587-1.067.122a51.912 51.912 0 0 1-11.859 0l-1.065-.122a1.289 1.289 0 0 1-1.142-1.281V9.546l5.563 4.068a4.339 4.339 0 0 0 5.14 0l5.567-4.068v7.436A1.289 1.289 0 0 1 19 18.263Z"/></svg>

package/src/icons/prize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.749 5.605h-2.534l.221-2.205a.561.561 0 0 0-.558-.615H6.574a.56.56 0 0 0-.557.615l.22 2.208H3.7a.559.559 0 0 0-.559.56v1.025a3.9 3.9 0 0 0 3.843 3.9 5.049 5.049 0 0 0 3.3 3.042v3.312a3.059 3.059 0 0 0-2.953 3.05.559.559 0 0 0 .56.56h7.674a.559.559 0 0 0 .56-.56 3.059 3.059 0 0 0-2.953-3.05v-3.315a5.049 5.049 0 0 0 3.3-3.042 3.9 3.9 0 0 0 3.844-3.9V6.165a.559.559 0 0 0-.567-.56ZM4.263 7.193v-.468h2.086l.3 3.046c.006.059.026.112.033.169a2.778 2.778 0 0 1-2.419-2.747Zm7.788 10.241H11.4V14.68h.65Zm2.87 2.5h-6.39a1.944 1.944 0 0 1 1.859-1.382h2.672a1.944 1.944 0 0 1 1.859 1.383Zm-3.194-6.694A3.964 3.964 0 0 1 7.77 9.66L7.193 3.9h9.066l-.576 5.76a3.965 3.965 0 0 1-3.956 3.581Zm7.462-6.048a2.777 2.777 0 0 1-2.424 2.748c.008-.057.027-.11.033-.169l.302-3.046h2.086Z"/></svg>

package/src/styles/console/variables.styl

@@ -1,24 +1,66 @@
-$fontFamily = "Lato", arial, sans-serif
-$fontSize = 1.4rem
+$fontFamily = "Poppins", arial, sans-serif
+$fontSize = 1.8rem
+$lineHeight = $fontSize * 2 - .8
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
+$fontSizeNano  = $fontSize - .6
 $fontWeight = 400
+$fontSizeHeader = 1.3rem
+$fontSizeFooter = 1.6rem
 
 
-$title = $fontSize + .6
-$title2 = $fontSize + .4
-$title3 = $fontSize + .3
-$title4 = $fontSize + .2
-$title5 = $fontSize + .1
-$title6 = $fontSize
+$title = 4.6rem
+$title2 = 4rem
+$title3 = 3.6rem
+$title4 = 3rem
+$title5 = 2.6rem
+$title6 = 2rem
 
 $borderRadius = .6rem
 
+
+// Layout
+$wrapperWidth = 125rem
+$wrapperReducedWidth = 96rem
+$headerHeight = 6.7rem
+$headerBannerHeight = 5.2rem
+$sectionPadding = 18.5rem
+$topRainbowHeight = 3.8rem
+$gutter2c = 3rem
+$quoteIcon = 44rem
+$quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding + 1 )
+
+$col2 = 58rem
+$col3 = 31.5rem
+$col4 = 22rem
+
+// card articles
+$cardHeaderHeight = 21rem
+$cardFontSize = 1.6rem
+$cardTitle = 1.8rem
+$cardTitleLineHeight = 2.6rem
+$cardLineHeight = $cardFontSize * 2 - 1
+$cardPadding = 2rem
+
+// card pricing
+$pricingCardWidth = 30.2rem
+$pricingCardpadding = 3.4rem
+$pricingCardHeaderHeight = 6.2rem
+$pricingCardCtaHeight = 5.2rem
+$pricingCardTitleSize = $title6
+$pricingCardAmountSize = $title2 * 2
+$pricingCardUnitSize = $title6
+$pricingCardPeriodSize = $fontSizeSmall
+$pricingCardPriceSize = $title2
+$pricingCardPriceUnitSize = $fontSizeSmall
+
 // Buttons & Inputs
 
-$padding = 1.2rem
+$padding = 2rem
 $contentPadding = 2.8rem
 
+
+
 $sidebarButtonSize = 5rem
 
 $buttonHeight = 3.8rem
@@ -41,9 +83,9 @@ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
 $buttonFontSizeNano = $fontSize  - .3
 $buttonLineHeightNano = $buttonFontSizeNano * 2
 
-$buttonHeightLarge = $buttonHeight  + .8
-$buttonPaddingLarge = 0 $padding + .4 0 $padding + .4
-$buttonFontSizeLarge = $fontSize + .1
+$buttonHeightLarge = $buttonHeight  + 1.2
+$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
+$buttonFontSizeLarge = $fontSize - .2
 $buttonLineHeightLarge = $buttonFontSizeLarge * 2
 
 

package/src/styles/next-website/button.styl

@@ -340,4 +340,77 @@
 					padding-left $padding
 					disableHoverEffect()
 					.icon
-						sq(3.2)
+						sq(3.2)
+	&--group
+		btn()
+		color $secondary-medium40
+		background-color $light
+		border .1rem solid $inputBorderColor
+		&.btn--has-icon
+			&:not(.btn--mini):not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			color $secondary
+			background-color $primary10
+		&.active
+			color $light
+			border-color $secondary
+			background-color $secondary
+			.icon
+				fill $light
+			&:hover
+				background-color $secondary
+			&:disabled
+				background-color $secondary60
+				border-color $secondary-medium15
+				color $light70
+				.icon
+					fill $light70
+		&:disabled:not(.active)
+			color $secondary30
+			cursor default
+			.icon
+				fill $secondary30
+			&:hover
+				border-color $inputBorderColor
+				color $secondary30
+				background-color transparent
+				.icon
+					fill $secondary30
+		&-container
+			flexMiddle()
+			.btn
+				&:first-child
+					border-radius $borderRadius 0 0 $borderRadius
+					border-width .1rem 0 .1rem .1rem
+				&:not(:first-child):not(:last-child)
+					border-width .1rem 0 .1rem .1rem
+					border-radius 0
+				&:last-child
+					border-radius 0 $borderRadius $borderRadius 0
+					border-width .1rem
+			&--light
+				.btn
+					&.active
+						border-color $inputBorderColor
+						background-color $primary20
+						color $secondary
+						&:hover
+							background-color $primary20
+			&--btn-tooltip
+				.tooltip
+					&:first-child
+						.btn
+							border-radius $borderRadius 0 0 $borderRadius
+					&:not(:first-child):not(:last-child)
+						.btn
+							border-width .1rem .1rem .1rem 0
+							border-radius 0
+					&:last-child
+						.btn
+							border-radius 0 $borderRadius $borderRadius 0
+							border-width .1rem .1rem .1rem 0

package/src/styles/next-website/demo.styl

@@ -1,56 +1,82 @@
-$demoResultHeaders = 6rem
 $demofilterWidth = 27.4rem
+$fontSizeDemo = 1.3rem
+$demoPadding = 1.6rem
+$demoBr = .3rem
+$inputFontSizeDemo = 1.1rem
+$inputDemoHeight = 3rem
+$inputBgColor = #f6f7f8
+$inputBorderColor = #bcc4d7
+$inputPlaceholderColor = #818ca5
+
+$activeColor = #7f98b3
+$activeColorDark = #4c657e
+$footerHeight = 4rem
+
+inputFont()
+	font-family 'Roboto Mono', monospace
+
 .demo
 	fullwh()
 	margin 6rem auto
 	.title
 		font-size $title3
+	pre
+	code
+		font-size $fontSizeDemo - .1
 	&__header
 		fullw()
 		position relative
 	&__content
 		fullw()
 		br()
+		font-size $fontSizeDemo
 		overflow hidden
 		position relative
-		box-shadow 0 0 3rem rgba($logo2, .15)
-		color #fff
+		// box-shadow 0 0 3rem rgba($logo2, .15)
+		box-shadow 0 .3rem 1rem rgba($secondary, .15)
 	&__showcase
 	&__data
 		display flex
 	&__filters
-		font-size 1.5rem
-		font-weight 700
-		padding 3.2rem 2.6rem
+		border-right .1rem solid rgba($secondary, .1)
+		padding $demoPadding + .4 $demoPadding
 		width $demofilterWidth
-		min-height 71rem
-		background-color rgba($logo2, .82)
+		background-color $light// rgba($logo2, .82)
+		padding-bottom 2.6rem
+		mbib(1.6)
+	&__data
+		max-height 45rem
+	&__showcase
+		min-height 50rem
+		max-height 71rem
 	&__map
 		flex-grow 1
-		background-color $logo2
+		background-color $light
 	&__results
-		font-size 1.5rem
-		font-weight 700
 		width $demofilterWidth
 		display flex
 		flex-direction column
+		border-right .1rem solid rgba($secondary, .1)
+		flex-shrink 0
 		&__header
 			display flex
 			align-items center
 			flex-shrink 0
-			padding 0 2.6rem
-			height $demoResultHeaders
-			background-color $logo2
+			font-size $fontSizeDemo - .1
+			padding 0 $demoPadding
+			height $footerHeight
+			background-color rgba($secondary, .05)
+			font-weight 600
 		&__content
 			font-weight 400
 			color $textColor
-			padding 3.2rem 2.6rem
-			min-height $demofilterWidth
-			background-color #eff3ff
+			padding $demoPadding
+			
+			background-color $light
+			overflow-y auto
 	&__code
-		flex-grow 1
-		display flex
-		flex-direction column
+		font()
+		width 100%
 		&__header
 			display flex
 			align-items center
@@ -62,4 +88,148 @@ $demofilterWidth = 27.4rem
 			padding 2.6rem
 			background-color #fff
 			height 100%
+			
+	&__input-container
+		mbib(.6)
+	&__label
+		font-weight 500
+		margin-bottom .6rem
 
+	input
+		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
+			inputFont()
+			br($demoBr)
+			background-color $inputBgColor !important
+			border-color $inputBorderColor
+			font-size $inputFontSizeDemo
+			height $inputDemoHeight
+			padding 0 1rem 0 1rem
+	.mbi
+		mbi(.6)
+	.input
+		&__label
+			inputFont()
+			font-size $inputFontSizeDemo
+	.select
+	.asyncselect
+		inputFont()
+		font-size $inputFontSizeDemo
+		&__control
+			border-radius $demoBr !important
+			background-color $inputBgColor !important
+			min-height 2.4rem !important
+			height auto !important
+			&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
+				border-color $inputBorderColor !important
+		.css-g1d714-ValueContainer
+		.css-tlfecz-indicatorContainer
+			padding 0
+		.css-g1d714-ValueContainer
+			height 100%
+		.css-tlfecz-indicatorContainer
+			cursor pointer
+		&__input
+			input
+				height auto !important
+		&__placeholder
+			color $inputPlaceholderColor
+		&__dropdown-indicator
+		&__clear-indicator
+			padding 0
+		&__value-container
+			padding-left .6rem !important
+		&__indicator
+			padding-left .5rem !important
+			padding-right .5rem !important
+			svg
+				fill $activeColor
+		&__indicator-separator
+			background-color $activeColor
+		&__multi-value
+			background-color $activeColorDark !important
+			&__label
+				inputFont() !important
+				height 2.1rem
+				line-height 1.1rem
+				font-size $inputFontSizeDemo - .1 !important
+			&__remove
+				padding .2rem !important
+				
+			.flag
+				width 1.6rem
+				height 1.1rem
+		&__option
+			padding .6rem
+			.flag
+				margin 0 .6rem 0 0
+	&__filters
+		.btn
+			br(.2)
+			font-size $inputFontSizeDemo
+			line-height 2.2rem
+			padding 0 .8rem
+			height $inputDemoHeight
+			inputFont()
+			border-color $inputBorderColor
+			.active
+			&--primary
+				background-color $activeColor
+				border-color $activeColor
+			&--group
+				height 2.8rem
+				&-container
+					color $inputBgColor
+					.btn
+						&:first-child
+							border-radius 2rem 0 0 2rem
+						&:last-child
+							border-radius 0 2rem 2rem 0
+					&--light
+						.btn.active
+							background-color $activeColorDark
+							border-color $activeColorDark
+							color $inputBgColor
+					&.language
+					&.transportation
+						mbi(.4)
+						.btn
+							br(.3)
+							border 0
+							height 1.9rem
+							padding .2rem
+							&.active
+								background-color $light
+								box-shadow 0 0 .1rem .1rem $activeColorDark
+						.flag
+							width 2.2rem
+							height 1.5rem
+						&.transportation
+							.btn
+								height 2.8rem
+							img
+								max-width 2.4rem
+	&__code
+		.tab
+			&__header
+				height $footerHeight
+				background-color rgba($secondary, .05)
+			&__content
+				padding $demoPadding
+				overflow auto
+				max-height 40rem
+		.btn
+			font-size $fontSizeDemo
+			&--tab
+				position relative
+				font-size $fontSizeDemo - .1
+				color rgba($secondary, .4)
+				&.active
+					font-weight 600
+					color $secondary
+				&--action
+					br(2)
+					inputFont()
+					padding 0 1rem
+					font-size $inputFontSizeDemo
+					border .1rem solid $activeColor
+					color darken($activeColor, 20%)

package/src/styles/next-website/font.styl

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');