wave-ui 2.24.0 → 2.28.0

package/src/wave-ui/scss/_icons.scss

@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'wave-ui';
-  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
+  // Base64 encoded woff font (https://hellogreg.github.io/woff2base).
+  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -41,3 +42,5 @@
 .wi-star:before {content: "\e013";}
 .wi-search:before {content: "\e014";}
 .wi-wave:before {content: "\e015";}
+.wi-file:before {content: "\e016";}
+.wi-spinner:before {content: "\e017";}

package/src/wave-ui/scss/_layout.scss

@@ -1,204 +1,214 @@
-// The CSS variables are used in the dynamic-css in order to reuse the same SCSS variable presets.
+// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
+// variable presets.
 :root {
   --base-increment: #{$base-increment};
   --css-scope: #{$css-scope};
 }
 
-#{$css-scope} {
-  // Layout classes.
-  // ----------------------------------------------
-  .show {display: block;}
-  .hide {display: none;}
-  .spacer {flex-grow: 1;}
-
-  .grow {flex-grow: 1;flex-basis: auto;}
-  .no-grow {flex-grow: 0;}
-  .shrink {flex-shrink: 1;margin-left: auto;margin-right: auto;}
-  .no-shrink {flex-shrink: 0;}
-  .fill-width {width: 100%;}
-  .fill-height {height: 100%;}
-  .basis-zero {flex-basis: 0;}
-
-  .align-start {align-items: flex-start;}
-  .align-center {align-items: center;}
-  .align-end {align-items: flex-end;}
-  .align-self-start {align-self: flex-start;}
-  .align-self-center {align-self: center;}
-  .align-self-end {align-self: flex-end;}
-  .align-self-stretch {align-self: stretch;}
-  .justify-start {justify-content: flex-start;}
-  .justify-center {justify-content: center;}
-  .justify-end {justify-content: flex-end;}
-  // There is no justify-self in Flexbox.
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
-  .justify-space-between {justify-content: space-between;}
-  .justify-space-around {justify-content: space-around;}
-  .justify-space-evenly {justify-content: space-evenly;}
-
-  .text-left {text-align: left;}
-  .text-center {text-align: center;}
-  .text-right {text-align: right;}
-  .text-nowrap {white-space: nowrap;}
-
-  .lh0 {line-height: 1;}
-  .lh1 {line-height: 1.2;}
-  .lh2 {line-height: 1.4;}
-  .lh3 {line-height: 1.6;}
-  .lh4 {line-height: 1.8;}
-  .lh5 {line-height: 2;}
-
-  .d-flex {display: flex;}
-  .d-iflex {display: inline-flex;}
-  .d-block {display: block;}
-  .d-iblock {display: inline-block;}
-  // ----------------------------------------------
-
-  // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
-  // ----------------------------------------------
-  @for $i from 1 through 6 {
-    .bd#{$i} {border: $i + px solid $border-color;}
-  }
-  .bd0 {border: none;}
-
-  @for $i from 1 through 6 {
-    .bdrs#{$i} {border-radius: round($i * $base-increment);}
-  }
-  .bdrsr {border-radius: 999em;}
-  .bdrsm {border-radius: 100%;}
-  .bdrs0 {border-radius: 0;}
-  // ----------------------------------------------
-
-  // Shadows (from -6 to 6).
-  // ----------------------------------------------
-  @for $i from -6 through -1 {
-    .sh#{$i} {
-      box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+// All these CSS classes will not be generated if the $use-layout-classes is set to false.
+@if $use-layout-classes {
+  #{$css-scope} {
+    // Layout classes.
+    // ----------------------------------------------
+    .show {display: block;}
+    .hide {display: none;}
+    .spacer {flex-grow: 1;}
+
+    .grow {flex-grow: 1;flex-basis: auto;}
+    .no-grow {flex-grow: 0;}
+    .shrink {flex-shrink: 1;margin-left: auto;margin-right: auto;}
+    .no-shrink {flex-shrink: 0;}
+    .fill-width {width: 100%;}
+    .fill-height {height: 100%;}
+    .basis-zero {flex-basis: 0;}
+
+    .align-start {align-items: flex-start;}
+    .align-center {align-items: center;}
+    .align-end {align-items: flex-end;}
+    .align-self-start {align-self: flex-start;}
+    .align-self-center {align-self: center;}
+    .align-self-end {align-self: flex-end;}
+    .align-self-stretch {align-self: stretch;}
+    .justify-start {justify-content: flex-start;}
+    .justify-center {justify-content: center;}
+    .justify-end {justify-content: flex-end;}
+    // There is no justify-self in Flexbox.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+    .justify-space-between {justify-content: space-between;}
+    .justify-space-around {justify-content: space-around;}
+    .justify-space-evenly {justify-content: space-evenly;}
+
+    .text-left {text-align: left;}
+    .text-center {text-align: center;}
+    .text-right {text-align: right;}
+    .text-nowrap {white-space: nowrap;}
+
+    .lh0 {line-height: 1;}
+    .lh1 {line-height: 1.2;}
+    .lh2 {line-height: 1.4;}
+    .lh3 {line-height: 1.6;}
+    .lh4 {line-height: 1.8;}
+    .lh5 {line-height: 2;}
+
+    .d-flex {display: flex;}
+    .d-iflex {display: inline-flex;}
+    .d-block {display: block;}
+    .d-iblock {display: inline-block;}
+    // ----------------------------------------------
+
+    // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
+    // ----------------------------------------------
+    @for $i from 1 through 6 {
+      .bd#{$i} {border: $i + px solid $border-color;}
     }
-  }
-  @for $i from 1 through 6 {
-    .sh#{$i} {
-      box-shadow: 0 0 1px rgba(#000, 0.1),
-                  round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
+    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
+    .bdl1 {border-left: 1px solid $border-color;}
+    .bdr1 {border-right: 1px solid $border-color;}
+    .bdt1 {border-top: 1px solid $border-color;}
+    .bdb1 {border-bottom: 1px solid $border-color;}
+    .bd0 {border: none;}
+
+    @for $i from 1 through 6 {
+      .bdrs#{$i} {border-radius: round($i * $base-increment);}
     }
-  }
-  .sh0 {box-shadow: none;}
-  // ----------------------------------------------
-
-  // Spaces.
-  // ----------------------------------------------
-  // Margin.
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .ma#{$i} {margin: $number;}
-    @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
-  }
-  .maa {margin: auto;}
-  .ma0 {margin: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .mx#{$i} {margin-left: $number;margin-right: $number;}
-    .my#{$i} {margin-top: $number;margin-bottom: $number;}
-    @if ($i > 0) {
-      .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
-      .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+    .bdrsr {border-radius: 999em;}
+    .bdrsm {border-radius: 100%;}
+    .bdrs0 {border-radius: 0;}
+    // ----------------------------------------------
+
+    // Shadows (from -6 to 6).
+    // ----------------------------------------------
+    @for $i from -6 through -1 {
+      .sh#{$i} {
+        box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+      }
     }
-  }
-  .mxa {margin-left: auto;margin-right: auto;}
-  .mya {margin-top: auto;margin-bottom: auto;}
-  .mx0 {margin-left: 0;margin-right: 0;}
-  .my0 {margin-top: 0;margin-bottom: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .mt#{$i} {margin-top: $number;}
-    .mr#{$i} {margin-right: $number;}
-    .mb#{$i} {margin-bottom: $number;}
-    .ml#{$i} {margin-left: $number;}
-    @if ($i > 0) {
-      .mt-#{$i} {margin-top: -$number;}
-      .mr-#{$i} {margin-right: -$number;}
-      .mb-#{$i} {margin-bottom: -$number;}
-      .ml-#{$i} {margin-left: -$number;}
+    @for $i from 1 through 6 {
+      .sh#{$i} {
+        box-shadow: 0 0 1px rgba(#000, 0.1),
+                    round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+      }
     }
-  }
-  .mta {margin-top: auto;}
-  .mra {margin-right: auto;}
-  .mba {margin-bottom: auto;}
-  .mla {margin-left: auto;}
-  .mt0 {margin-top: 0;}
-  .mr0 {margin-right: 0;}
-  .mb0 {margin-bottom: 0;}
-  .ml0 {margin-left: 0;}
-
-  // Padding.
-  @for $i from 1 through 12 {
-    $number: round($i * $base-increment);
-    .pa#{$i} {padding: $number;}
-  }
-  .pa0 {padding: 0;}
+    .sh0 {box-shadow: none;}
+    // ----------------------------------------------
+
+    // Spaces.
+    // ----------------------------------------------
+    // Margin.
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .ma#{$i} {margin: $number;}
+      @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
+    }
+    .maa {margin: auto;}
+    .ma0 {margin: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .mx#{$i} {margin-left: $number;margin-right: $number;}
+      .my#{$i} {margin-top: $number;margin-bottom: $number;}
+      @if ($i > 0) {
+        .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
+        .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+      }
+    }
+    .mxa {margin-left: auto;margin-right: auto;}
+    .mya {margin-top: auto;margin-bottom: auto;}
+    .mx0 {margin-left: 0;margin-right: 0;}
+    .my0 {margin-top: 0;margin-bottom: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .mt#{$i} {margin-top: $number;}
+      .mr#{$i} {margin-right: $number;}
+      .mb#{$i} {margin-bottom: $number;}
+      .ml#{$i} {margin-left: $number;}
+      @if ($i > 0) {
+        .mt-#{$i} {margin-top: -$number;}
+        .mr-#{$i} {margin-right: -$number;}
+        .mb-#{$i} {margin-bottom: -$number;}
+        .ml-#{$i} {margin-left: -$number;}
+      }
+    }
+    .mta {margin-top: auto;}
+    .mra {margin-right: auto;}
+    .mba {margin-bottom: auto;}
+    .mla {margin-left: auto;}
+    .mt0 {margin-top: 0;}
+    .mr0 {margin-right: 0;}
+    .mb0 {margin-bottom: 0;}
+    .ml0 {margin-left: 0;}
+
+    // Padding.
+    @for $i from 1 through 12 {
+      $number: round($i * $base-increment);
+      .pa#{$i} {padding: $number;}
+    }
+    .pa0 {padding: 0;}
 
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .px#{$i} {padding-left: $number;padding-right: $number;}
-    .py#{$i} {padding-top: $number;padding-bottom: $number;}
-  }
-  .px0 {padding-left: 0;padding-right: 0;}
-  .py0 {padding-top: 0;padding-bottom: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .pt#{$i} {padding-top: $number;}
-    .pr#{$i} {padding-right: $number;}
-    .pb#{$i} {padding-bottom: $number;}
-    .pl#{$i} {padding-left: $number;}
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .px#{$i} {padding-left: $number;padding-right: $number;}
+      .py#{$i} {padding-top: $number;padding-bottom: $number;}
+    }
+    .px0 {padding-left: 0;padding-right: 0;}
+    .py0 {padding-top: 0;padding-bottom: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .pt#{$i} {padding-top: $number;}
+      .pr#{$i} {padding-right: $number;}
+      .pb#{$i} {padding-bottom: $number;}
+      .pl#{$i} {padding-left: $number;}
+    }
+    .pt0 {padding-top: 0;}
+    .pr0 {padding-right: 0;}
+    .pb0 {padding-bottom: 0;}
+    .pl0 {padding-left: 0;}
+    // ----------------------------------------------
+
+    // Sizes.
+    // ----------------------------------------------
+    // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
+    // Different heights with a mix of odd and even numbers will misalign
+    // when vertically centering (vertical-align or align-items center).
+    .size--xs {font-size: round(0.85 * $base-font-size);}
+    .size--sm {font-size: round(1 * $base-font-size);}
+    .size--md {font-size: round(1.1 * $base-font-size);}
+    .size--lg {font-size: round(1.4 * $base-font-size);}
+    .size--xl {font-size: round(1.65 * $base-font-size);}
+    // ----------------------------------------------
+
+    // Grid system.
+    // ----------------------------------------------
+    // CSS variables are not supported in media queries yet
+    // (https://www.w3.org/TR/css-variables-1/#using-variables),
+    // the grid system is done dynamically in dynamic-css.js.
+
+    // @media screen and (min-width: var(--breakpoint-xs)) {
+    //   @for $i from 0 through $grid-base {
+    //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-sm)) {
+    //   @for $i from 0 through $grid-base {
+    //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-md)) {
+    //   @for $i from 0 through $grid-base {
+    //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-lg)) {
+    //   @for $i from 0 through $grid-base {
+    //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+    // ----------------------------------------------
   }
-  .pt0 {padding-top: 0;}
-  .pr0 {padding-right: 0;}
-  .pb0 {padding-bottom: 0;}
-  .pl0 {padding-left: 0;}
-  // ----------------------------------------------
-
-  // Sizes.
-  // ----------------------------------------------
-  // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
-  // Different heights with a mix of odd and even numbers will misalign
-  // when vertically centering (vertical-align or align-items center).
-  .size--xs {font-size: round(0.85 * $base-font-size);}
-  .size--sm {font-size: round(1 * $base-font-size);}
-  .size--md {font-size: round(1.1 * $base-font-size);}
-  .size--lg {font-size: round(1.4 * $base-font-size);}
-  .size--xl {font-size: round(1.65 * $base-font-size);}
-  // ----------------------------------------------
-
-  // Grid system.
-  // ----------------------------------------------
-  // CSS variables are not supported in media queries yet
-  // (https://www.w3.org/TR/css-variables-1/#using-variables),
-  // the grid system is done dynamically in dynamic-css.js.
-
-  // @media screen and (min-width: var(--breakpoint-xs)) {
-  //   @for $i from 0 through $grid-base {
-  //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-sm)) {
-  //   @for $i from 0 through $grid-base {
-  //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-md)) {
-  //   @for $i from 0 through $grid-base {
-  //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-lg)) {
-  //   @for $i from 0 through $grid-base {
-  //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-  // ----------------------------------------------
 }

package/src/wave-ui/scss/_mixins.scss

@@ -0,0 +1,100 @@
+@mixin default-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay ease-in-out;
+}
+
+@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+/**
+ * Generates a triangle arrow on the edge of an element.
+ *
+ * @param $color: the color to apply to the triangle.
+ * @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
+ * @param $size: the triangle size at the base.
+ * @param $thickness: the border thickness, 0 to remove the border.
+ */
+@mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
+  @if ($thickness > 0) {
+    // The underneath border triangle.
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: $size solid transparent;
+    }
+
+    &#{$selector}--top:before {
+      top: 100%;
+      left: 50%;
+      border-top-color: inherit;
+      transform: translateX(-50%);
+      margin-top: 0;
+    }
+    &#{$selector}--bottom:before {
+      bottom: 100%;
+      left: 50%;
+      border-bottom-color: inherit;
+      transform: translateX(-50%);
+      margin-bottom: 0;
+    }
+    &#{$selector}--left:before {
+      left: 100%;
+      top: 50%;
+      border-left-color: inherit;
+      transform: translateY(-50%);
+      margin-left: 0;
+    }
+    &#{$selector}--right:before {
+      right: 100%;
+      top: 50%;
+      border-right-color: inherit;
+      transform: translateY(-50%);
+      margin-right: 0;
+    }
+
+    &#{$selector}--align-top:before {transform: none;top: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-bottom:before {transform: none;top: auto;bottom: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-left:before {transform: none;left: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-right:before {transform: none;left: auto;right: (2 * $base-increment) - 1px;}
+  }
+
+  // The colored triangle on top of `:before`.
+  &:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: ($size - $thickness) solid transparent;
+  }
+  &#{$selector}--top:after {
+    top: 100%;
+    left: 50%;
+    border-top-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--bottom:after {
+    bottom: 100%;
+    left: 50%;
+    border-bottom-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--left:after {
+    left: 100%;
+    top: 50%;
+    border-left-color: $color;
+    transform: translateY(-50%);
+  }
+  &#{$selector}--right:after {
+    right: 100%;
+    top: 50%;
+    border-right-color: $color;
+    transform: translateY(-50%);
+  }
+
+  &#{$selector}--align-top:after {transform: none;top: 2 * $base-increment;}
+  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: 2 * $base-increment;}
+  &#{$selector}--align-left:after {transform: none;left: 2 * $base-increment;}
+  &#{$selector}--align-right:after {transform: none;left: auto;right: 2 * $base-increment;}
+}

package/src/wave-ui/scss/_transitions.scss

@@ -142,11 +142,11 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Twist.
 // --------------------------------------------------------
-.twist-enter-active {animation: w-twist $transition-duration;}
-.twist-leave-active {animation: w-twist $transition-duration reverse;}
+.twist-enter-active {animation: w-twist ($transition-duration + 0.25s);}
+.twist-leave-active {animation: w-twist ($transition-duration + 0.25s) reverse;}
 @keyframes w-twist {
-  0% {transform: scale(0) rotate(-30deg);}
-  60% {transform: scale(1.03) rotate(5deg);}
+  0% {transform: scale(0) rotate(-70deg);}
+  60% {transform: scale(1.03) rotate(6deg);}
   100% {transform: scale(1) rotate(0deg);}
 }
 // --------------------------------------------------------

package/src/wave-ui/scss/_variables.scss

@@ -8,6 +8,8 @@
 // GLOBAL DEFAULTS.
 // ========================================================
 $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
+// True by default. False allows you to use an external CSS library (like Tailwind).
+$use-layout-classes: true !default;
 
 $base-font-size: 14px !default;
 $base-increment: round(divide($base-font-size, 4)) !default;
@@ -15,7 +17,7 @@ $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap t
 $border-radius: 3px !default;
 $border-color: rgba(0, 0, 0, 0.15);
 $border: 1px solid $border-color !default;
-$transition-duration: 0.2s !default;
+$transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;
 $box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.15),
@@ -26,15 +28,6 @@ $form-field-height: round(2 * $base-font-size) !default;
 // Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
 $small-form-el-size: round(divide(1.3 * $base-font-size, 2)) * 2 !default;
 
-// Mixins.
-@mixin default-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay ease-in-out;
-}
-
-@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
-}
-
 // COMPONENTS DEFAULTS.
 // ========================================================
 // w-drawer.
@@ -64,3 +57,7 @@ $textarea-line-height: 1.2;
 $tooltip-bg-color: #fff;
 $tooltip-color: rgba(0, 0, 0, 0.7);
 // --------------------------------------------------------
+
+// Mixins.
+// --------------------------------------------------------
+@import './mixins';

package/src/wave-ui/utils/index.js

@@ -0,0 +1,11 @@
+/**
+ * Takes CSS classes as a string array or object and turn them into an object.
+ *
+ * @param {String|Array|Object} classes the CSS classes to merge into an object
+ * @return {Object}
+ */
+export const objectifyClasses = (classes = {}) => {
+  if (typeof classes === 'string') classes = { [classes]: true }
+  else if (typeof classes === 'array') classes = { [classes.join(' ')]: true }
+  return classes
+}