@dative-gpi/foundation-shared-components 0.0.12 → 0.0.14

package/icons/flags/UnitedStates.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+    <g fill-rule="evenodd">
+      <g stroke-width="1pt">
+        <path fill="#bd3d44" d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z" transform="scale(.9375)"/>
+        <path fill="#fff" d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z" transform="scale(.9375)"/>
+      </g>
+      <path fill="#192f5d" d="M0 0h389.1v275.7H0z" transform="scale(.9375)"/>
+      <path fill="#fff" d="M32.4 11.8 36 22.7h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57 74 67.9l-9-6.7-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5L330 57l3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 66.9 36 78h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 122.1 36 133h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7H29zm64.9 0 3.5 10.9h11.5L103 250l3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9H177l-9 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.5z" transform="scale(.9375)"/>
+    </g>
+  </svg>
+</template>

package/icons/sets.ts

@@ -0,0 +1,17 @@
+import France from "./flags/France.vue";
+import Germany from "./flags/Germany.vue";
+import GreatBritain from "./flags/GreatBritain.vue";
+import Italy from "./flags/Italy.vue";
+import Portugal from "./flags/Portugal.vue";
+import Spain from "./flags/Spain.vue";
+import UnitedStates from "./flags/UnitedStates.vue";
+
+export const Flags = {
+  france: France,
+  germany: Germany,
+  greatBritain: GreatBritain,
+  italy: Italy,
+  portugal: Portugal,
+  spain: Spain,
+  unitedStates: UnitedStates
+};

package/models/rules.ts

@@ -1,6 +1,8 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import { getTimeBestString } from "../utils";
+
 const { epochToLongDateFormat } = useTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
@@ -48,4 +50,10 @@ export const AutocompleteRules = {
     required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
     max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
+};
+
+export const TimeRules = {
+    required: (message: string) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
+    max: (max: number, message: string) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.12",
-    "@dative-gpi/foundation-shared-services": "0.0.12",
+    "@dative-gpi/foundation-shared-domain": "0.0.14",
+    "@dative-gpi/foundation-shared-services": "0.0.14",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "73c686b3b0343ac4b42d34c2aa7cf7604ad0d298"
+  "gitHead": "e0e44041b264a555d7eccfb49ae4deaf933bd436"
 }

package/styles/components/fs_autocomplete_field.scss

@@ -1,5 +1,6 @@
 .fs-autocomplete-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -24,6 +25,8 @@
         & > .v-field__field > .v-field__input {
             @extend .text-body;
         
+            flex-wrap: nowrap;
+            overflow: hidden;
             padding-inline: 0 !important;
             color: var(--fs-autocomplete-field-color);
             cursor: var(--fs-autocomplete-field-cursor) !important;
@@ -37,32 +40,6 @@
                 min-height: 34px !important;
                 height: 34px !important;
             }
-
-            & > .v-autocomplete__selection {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -15px;
-                    height: 34px !important;
-                }
-            }
-
-            & > input {
-                @include web {
-                    top: 16px;
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    top: 17px;
-                    margin-top: -17px;
-                    height: 34px !important;
-                }
-            }
         }
 
         & > .v-field__clearable {
@@ -71,40 +48,6 @@
 
         & > .v-field__append-inner {
             color: var(--fs-autocomplete-field-color);
-
-            & > i {
-                margin-inline-start: 0px;
-            }
-        }
-    }
-}
-
-.fs-autocomplete-multiple-field {
-    & > .v-input__control > .v-field {
-        & > .v-field__field > .v-field__input {
-            & > .v-autocomplete__selection {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -15px;
-                    height: 34px !important;
-                }
-            }
-
-            & > input {
-                @include web {
-                    margin-top: -16px;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    margin-top: -17px;
-                    height: 34px !important;
-                }
-            }
         }
     }
 }

package/styles/components/fs_clock.scss

@@ -1,3 +1,7 @@
+.fs-clock-date {
+    max-width: calc(100% - 198px);
+}
+
 .fs-clock-field {
     padding: 0px !important;
     width: 72px !important;

package/styles/components/fs_color_field.scss

@@ -0,0 +1,21 @@
+.fs-color-field {
+  min-width:190px;
+}
+
+.fs-color-field-opacity {
+  min-width: 150px;
+}
+
+.fs-color-field .v-field__prepend-inner > .v-icon {
+  opacity: 1 !important;
+}
+
+.fs-color-field-picker {
+  background: none !important;
+  min-width: auto !important;
+  width: 100% !important;
+}
+
+.fs-color-field-description {
+    color: var(--fs-color-field-color);
+}

package/styles/components/fs_data_table.scss

@@ -80,13 +80,18 @@
     background-color: var(--fs-data-table-background-color);
 }
 
+.fs-data-table-rows-per-page > .fs-select-field {
+    min-width: 120px !important;
+    width: 120px !important;
+}
+
 .fs-data-table-pagination {
     @include web {
-        width: 172px;
+        max-width: 200px;
     }
 
     @include mobile {
-        width: 172px;
+        max-width: 194px;
     }
 }
 

package/styles/components/fs_divider.scss

@@ -2,4 +2,9 @@
     width: var(--fs-divider-width);
     border-bottom: 1.3px solid var(--fs-divider-color);
     border-radius: 3px;
+}
+
+.fs-divider-around {
+    border-bottom: 1.3px solid var(--fs-divider-color);
+    border-radius: 3px;
 }

package/styles/components/fs_image.scss

@@ -1,5 +1,16 @@
+.fs-load-image {
+    border-radius: var(--fs-image-border-radius);
+    max-height: 100%;
+    height: 100%;
+
+    & > .v-skeleton-loader__image {
+        max-height: 100%;
+        height: 100%;
+    }
+}
+
 .fs-image {
-    border-radius: 4px;
+    border-radius: var(--fs-image-border-radius);
 
     &.v-responsive {
         flex: 0 0 auto !important;

package/styles/components/fs_label.scss

@@ -0,0 +1,86 @@
+.fs-label {
+    color: var(--fs-label-color);
+
+    @extend .fs-span;
+}
+
+.fs-load-label {
+    & > .v-skeleton-loader__text {
+        margin: 0px;
+        height: 100%;
+    }
+
+    &.text-h1 {
+        width: calc(50% - 32px);
+
+        @include web {
+            height: 36px;
+        }
+    
+        @include mobile {
+            height: 29px;
+        }
+    }
+
+    &.text-h2 {
+        width: calc(60% - 32px);
+
+        @include web {
+            height: 27px;
+        }
+    
+        @include mobile {
+            height: 22px;
+        }
+    }
+
+    &.text-h3 {
+        width: calc(65% - 32px);
+
+        @include web {
+            height: 21px;
+        }
+    
+        @include mobile {
+            height: 17px;
+        }
+    }
+
+    &.text-h4 {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 16px;
+        }
+    
+        @include mobile {
+            height: 14px;
+        }
+    }
+
+    &.text-body,
+    &.text-button {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 14px;
+        }
+    
+        @include mobile {
+            height: 12px;
+        }
+    }
+
+    &.text-overline,
+    &.text-underline {
+        width: calc(75% - 32px);
+
+        @include web {
+            height: 12px;
+        }
+    
+        @include mobile {
+            height: 10px;
+        }
+    }
+}

package/styles/components/fs_pagination.scss

@@ -1,11 +1,11 @@
-.fs-pagination {
+.fs-pagination-page {
     height: 4px;
-    min-width: 12%;
     border-radius: 4px;
+    min-width: var(--fs-pagination-page-width);
     background-color: var(--fs-pagination-background-color);
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &.fs-pagination-active {
+    &.fs-pagination-active-page {
         background-color: var(--fs-pagination-active-background-color);
     }
 }

package/styles/components/fs_rich_text_field.scss

@@ -1,5 +1,6 @@
 .fs-rich-text-field {
     width: 100%;
+    min-width: 240px;
     outline: none !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
@@ -63,5 +64,4 @@
 
 .editor-link {
     color: var(--fs-rich-text-field-link-color);
-    text-decoration: underline;
 }

package/styles/components/fs_select_field.scss

@@ -1,5 +1,6 @@
 .fs-select-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -24,6 +25,8 @@
         & > .v-field__field > .v-field__input {
             @extend .text-body;
         
+            flex-wrap: nowrap;
+            overflow: hidden;
             padding-inline: 0 !important;
             color: var(--fs-select-field-color);
             cursor: var(--fs-select-field-cursor) !important;
@@ -49,10 +52,6 @@
 
         & > .v-field__append-inner {
             color: var(--fs-select-field-color);
-
-            & > i {
-                margin-inline-start: 0px;
-            }
         }
     }
 }

package/styles/components/fs_switch.scss

@@ -1,4 +1,5 @@
 .fs-switch-size {
+    min-width: 40px !important;
     width: 40px !important;
     min-height: 24px !important;
     height: 24px !important;
@@ -37,11 +38,10 @@
     color: var(--fs-switch-color) !important;
 }
 
-.v-switch__track {
-    width: 40px !important;
-    height: 24px !important;
-    background-color: var(--fs-switch-track-color) !important;
+.v-switch--inset .v-switch__track {
+    @extend .fs-switch-size;
 
+    background-color: var(--fs-switch-track-color) !important;
 }
 
 .v-switch__thumb {

package/styles/components/fs_text_area.scss

@@ -1,5 +1,6 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {
@@ -47,6 +48,7 @@
 
 .fs-text-area-auto-grow {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {

package/styles/components/fs_text_field.scss

@@ -1,5 +1,6 @@
 .fs-text-field {
     padding: 0px !important;
+    min-width: 240px;
     width: 100%;
 
     & > .v-input__control > .v-field {

package/styles/components/fs_time_field.scss

@@ -0,0 +1,16 @@
+.fs-time-field-select {
+    min-width: 180px;
+}
+
+.fs-time-field-label {
+    color: var(--fs-time-field-color);
+}
+
+.fs-time-field-messages {
+    align-self: stretch;
+    color: var(--fs-time-field-error-color);
+}
+
+.fs-time-field-description {
+    color: var(--fs-time-field-color);
+}

package/styles/components/fs_timeslot_field.scss

@@ -0,0 +1,12 @@
+.fs-time-slot-field-label {
+    color: var(--fs-time-slot-field-color);
+}
+
+.fs-time-slot-field-messages {
+    align-self: stretch;
+    color: var(--fs-time-slot-field-error-color);
+}
+
+.fs-time-slot-field-description {
+    color: var(--fs-time-slot-field-color);
+}

package/styles/components/index.scss

@@ -8,6 +8,7 @@
 @import "fs_chip.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
+@import "fs_color_field.scss";
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
 @import "fs_container.scss";
@@ -23,6 +24,7 @@
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_label.scss";
 @import "fs_link.scss";
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
@@ -44,5 +46,7 @@
 @import "fs_text_field.scss";
 @import "fs_text.scss";
 @import "fs_tile.scss";
+@import "fs_time_field.scss";
+@import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/overrides.scss

@@ -17,6 +17,14 @@
     margin-inline-start: 8px !important;
 }
 
+// Clearable icon is always centered vertically
+.v-input__control > .v-field > .v-field__clearable {
+    align-items: center;
+    padding-top: 0px;
+    height: 100%;
+}
+
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -56,12 +64,6 @@ input[type=number]::-webkit-outer-spin-button {
     color: var(--fs-group-hover-color);
 }
 
-// remove arrows when disabled
-.v-slide-group__prev--disabled,
-.v-slide-group__next--disabled {
-    display: none !important;
-}
-
 // Badges are totally overriden
 .v-badge__badge {
     align-items: center !important;

package/styles/globals/text_fonts.scss

@@ -56,6 +56,24 @@
     }
 }
 
+.text-h4 {
+    font-family: 'Montserrat', sans-serif !important;
+    font-style: normal !important;
+    font-weight: 500 !important;
+
+    @include web {
+        font-size: 16px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.48px !important;
+    }
+
+    @include mobile {
+        font-size: 14px !important;
+        line-height: 16px !important;
+        letter-spacing: -0.41px !important;
+    }
+}
+
 .text-body {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;

package/utils/color.ts

@@ -0,0 +1,7 @@
+export const getPercentageFromHex = (hex: string): number => { 
+  return parseInt(hex, 16) / 255;
+}
+
+export const getHexFromPercentage = (percentage: number): string => {
+  return Math.round(percentage * 255).toString(16).padStart(2, "0");
+}

package/utils/css.ts

@@ -2,7 +2,8 @@ export const sizeToVar = (value: string | number | null, nullValue: string = "fi
     if (value == null) {
         return nullValue;
     }
-    return typeof value === 'string' ? value : `${value}${unit}`;
+
+    return typeof value === 'string' && isNaN(+value) ? value : `${value}${unit}`;
 };
 
 export const varToSize = (value: string): number => {

package/utils/icons.ts

@@ -1,3 +1,5 @@
+import { Flags } from "../icons/sets";
+
 const MdiIcons = [
     {
         "name": "ab-testing",
@@ -75408,9 +75410,93 @@ const MdiIcons = [
         "styles": [],
         "tags": []
     }
-]
+];
+
+const FlagIcons = [
+    {
+        "name": "france",
+        "aliases": [
+            "french-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "France"
+        ]
+    },
+    {
+        "name": "germany",
+        "aliases": [
+            "german-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Allemagne"
+        ] 
+    },
+    {
+        "name": "greatBritain",
+        "aliases": [
+            "great-britain-flag",
+            "united-kingdom-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Royaume-Uni"
+        ] 
+    },
+    {
+        "name": "italy",
+        "aliases": [
+            "italien-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Italie"
+        ] 
+    },
+    {
+        "name": "portugal",
+        "aliases": [
+            "portuguese-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Portugal"
+        ] 
+    },
+    {
+        "name": "spain",
+        "aliases": [
+            "spanish-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Espagne"
+        ] 
+    },
+    {
+        "name": "unitedStates",
+        "aliases": [
+            "united-states-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Etats-Unis"
+        ] 
+    }
+];
 
 export const Icons: { name: string, fullText: string }[] = MdiIcons.map((icon) => ({
     name: "mdi-" + icon.name,
     fullText: icon.name + icon.name.split("-").join(" ") + " " + icon.aliases.join(" ") + " " + icon.tags.join(" ") + " " + icon.styles.join(" ")
-}));
+})).concat(FlagIcons.map((icon) => ({
+    name: "$" + icon.name,
+    fullText: icon.name + icon.name.split("-").join(" ") + " " + icon.aliases.join(" ") + " " + icon.tags.join(" ") + " " + icon.styles.join(" ")
+})));

package/utils/index.ts

@@ -1,5 +1,7 @@
+export * from "./color";
 export * from "./css";
 export * from "./icons";
 export * from "./levenshtein";
 export * from "./lexical";
-export * from "./sort";
+export * from "./sort";
+export * from "./time";