@rypen-dev/shared-components 2.1.86 → 3.0.1

package/scss/vendor/_foundation-settings.scss

@@ -70,9 +70,15 @@
 $contrast-warnings: false;
 
 $global-font-size: 100%;
-$global-width: rem-calc(1430);
+$global-width: rem-calc(1370);
 $global-lineheight: 1.5;
-$foundation-palette: ( primary: $primary, secondary: $secondary, success: $success, warning: $warning, alert: $alert, );
+$foundation-palette: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "warning": $warning,
+  "alert": $alert,
+);
 $light-gray: $light-gray;
 $medium-gray: $medium-gray;
 $dark-gray: $dark-gray;
@@ -81,27 +87,43 @@ $white: $white;
 $body-background: $body-bg-color;
 $body-font-color: $body-font-color;
 $body-font-family: $body-font-family;
+$body-safe-padding: false;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
 $global-position: 1rem;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
-$global-radius: 5px;
+$global-radius: $global-border-radius;
 $global-menu-padding: 0.7rem 1rem;
 $global-menu-nested-margin: 1rem;
 $global-text-direction: ltr;
 $global-flexbox: true;
 $global-prototype-breakpoints: false;
+$global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
-$print-transparent-backgrounds: false;
+$print-transparent-backgrounds: true;
+$print-hrefs: false;
 
 @include add-foundation-colors;
 
 // 2. Breakpoints
 // --------------
 
-$breakpoints: ( small: $breakpoint-small, medium: $breakpoint-medium, large: $breakpoint-large, xlarge: $breakpoint-xlarge, xxlarge: $breakpoint-xxlarge, );
+$breakpoints: (
+  "small": 0,
+  "medium": 640px,
+  "large": 1024px,
+  "xlarge": 1200px,
+  "xxlarge": 1440px,
+);
+$breakpoints-hidpi: (
+  "hidpi-1": 1,
+  "hidpi-1-5": 1.5,
+  "hidpi-2": 2,
+  "retina": 2,
+  "hidpi-3": 3
+);
 $print-breakpoint: large;
 $breakpoint-classes: (small medium large);
 
@@ -110,7 +132,10 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-gutter: ( small: 20px, medium: 30px, );
+$grid-column-gutter: (
+  "small": 20px,
+  "medium": 30px,
+);
 $grid-column-align-edge: true;
 $grid-column-alias: 'columns';
 $block-grid-max: 8;
@@ -125,23 +150,35 @@ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
 $header-color: inherit;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.5rem;
-$header-styles: ( small: ( 'h1': ('font-size': 24), 'h2': ('font-size': 20), 'h3': ('font-size': 19), 'h4': ('font-size': 18), 'h5': ('font-size': 17), 'h6': ('font-size': 16), ), medium: ( 'h1': ('font-size': 48), 'h2': ('font-size': 40), 'h3': ('font-size': 31), 'h4': ('font-size': 25), 'h5': ('font-size': 20), 'h6': ('font-size': 16), ), );
+$header-styles: (
+  "small": (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  "medium": (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+);
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
 $paragraph-lineheight: 1.6;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
-$anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
-$anchor-text-decoration: none;
-$anchor-text-decoration-hover: none;
+$enable-code-inline: true;
+$anchor-color: $link-color;
+$anchor-color-hover: $link-hover-color;
+$anchor-text-decoration: $link-decoration;
+$anchor-text-decoration-hover: $link-hover-decoration;
 $hr-width: $global-width;
 $hr-border: 1px solid $medium-gray;
 $hr-margin: rem-calc(20) auto;
@@ -157,9 +194,7 @@ $defnlist-term-margin-bottom: 0.3rem;
 $blockquote-color: $dark-gray;
 $blockquote-padding: rem-calc(9 20 0 19);
 $blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
+$enable-cite-block: true;
 $keystroke-font: $font-family-monospace;
 $keystroke-color: $black;
 $keystroke-background: $light-gray;
@@ -178,6 +213,17 @@ $subheader-font-weight: $global-weight-normal;
 $subheader-margin-top: 0.2rem;
 $subheader-margin-bottom: 0.5rem;
 $stat-font-size: 2.5rem;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
 
 // 6. Abide
 // --------
@@ -195,6 +241,8 @@ $input-error-font-weight: $global-weight-bold;
 
 $accordion-background: $white;
 $accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
 $accordion-title-font-size: rem-calc(12);
 $accordion-item-color: $primary-color;
 $accordion-item-background-hover: $light-gray;
@@ -249,22 +297,30 @@ $breadcrumbs-item-separator-color: $medium-gray;
 // 11. Button
 // ----------
 
-$button-font-family: $button-font-family;
+$button-font-family: inherit;
+$button-font-weight: null;
 $button-padding: 0.85em 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
-$button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-background: $button-bg-color;
+$button-background-hover: $button-hover-bg-color;
 $button-color: $white;
 $button-color-alt: $white;
-$button-radius: $dealer-button-radius;
+$button-radius: $global-radius;
+$button-border: 1px solid transparent;
 $button-hollow-border-width: 1px;
-$button-sizes: ( tiny: 0.6rem, small: 0.75rem, default: 0.9rem, large: 1.25rem, );
+$button-sizes: (
+  "tiny": 0.6rem,
+  "small": 0.75rem,
+  "default": 0.9rem,
+  "large": 1.25rem,
+);
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.5;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
 
 // 12. Button Group
 // ----------------
@@ -282,7 +338,11 @@ $callout-background: $white;
 $callout-background-fade: 85%;
 $callout-border: 1px solid rgba($black, 0.25);
 $callout-margin: 0 0 1rem 0;
-$callout-padding: 1rem;
+$callout-sizes: (
+  "small": 0.5rem,
+  "default": 1rem,
+  "large": 3rem,
+);
 $callout-font-color: $body-font-color;
 $callout-font-color-alt: $body-background;
 $callout-radius: $global-radius;
@@ -304,9 +364,20 @@ $card-margin-bottom: $global-margin;
 // ----------------
 
 $closebutton-position: right top;
-$closebutton-offset-horizontal: ( small: 0.66rem, medium: 1rem, );
-$closebutton-offset-vertical: ( small: 0.33em, medium: 0.5rem, );
-$closebutton-size: ( small: 1.5em, medium: 2em, );
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
+$closebutton-offset-horizontal: (
+  "small": 0.66rem,
+  "medium": 1rem,
+);
+$closebutton-offset-vertical: (
+  "small": 0.33em,
+  "medium": 0.5rem,
+);
+$closebutton-size: (
+  "small": 1.5em,
+  "medium": 2em,
+);
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
 $closebutton-color-hover: $black;
@@ -333,7 +404,11 @@ $dropdown-border: 1px solid $medium-gray;
 $dropdown-font-size: 1rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
-$dropdown-sizes: ( tiny: 100px, small: 200px, large: 400px, );
+$dropdown-sizes: (
+  "tiny": 100px,
+  "small": 200px,
+  "large": 400px,
+);
 
 // 18. Dropdown Menu
 // -----------------
@@ -365,40 +440,40 @@ $fieldset-border: 1px solid $medium-gray;
 $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
-$form-spacing: rem-calc(16);
+$form-spacing: $global-form-spacing;
 $helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
-$input-prefix-color: $black;
-$input-prefix-background: $light-gray;
-$input-prefix-border: 1px solid $medium-gray;
-$input-prefix-padding: 1rem;
-$form-label-color: $dealer-form-label-color;
-$form-label-font-size: rem-calc(14);
+$input-prefix-color: $form-input-prefix-color;
+$input-prefix-background: $form-input-prefix-bg-color;
+$input-prefix-border: 1px solid $form-input-border-color;
+$input-prefix-padding: $form-input-padding;
+$form-label-color: $form-label-color;
+$form-label-font-size: $label-font-size;
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
-$select-background: $white;
-$select-triangle-color: $dark-gray;
-$select-radius: $global-radius;
-$input-color: $black;
-$input-placeholder-color: $text-gray;
+$select-background: $form-input-bg-color;
+$select-triangle-color: $form-input-select-triangle-color;
+$select-radius: $form-input-radius;
+$input-color: $form-input-color;
+$input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
-$input-font-size: rem-calc(16);
+$input-font-size: $form-input-font-size;
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: $white;
-$input-background-focus: $white;
-$input-background-disabled: $light-gray;
-$input-border: 1px solid $medium-gray;
-$input-border-focus: 1px solid $dark-gray;
-$input-padding: $form-spacing / 2;
-$input-shadow: inset 0 1px 2px rgba($black, 0.1);
-$input-shadow-focus: 0 0 5px $medium-gray;
+$input-background: $form-input-bg-color;
+$input-background-focus: $form-input-bg-color;
+$input-background-disabled: $form-input-disabled-bg-color;
+$input-border: 1px solid $form-input-border-color;
+$input-border-focus: 1px solid $form-input-focus-border-color;
+$input-padding: $form-input-padding;
+$input-shadow: $form-input-shadow;
+$input-shadow-focus: $form-input-focus-shadow;
 $input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
-$input-radius: $global-radius;
-$form-button-radius: $global-radius;
+$input-radius: $form-input-radius;
+$form-button-radius: $form-input-radius;
 
 // 21. Label
 // ---------
@@ -409,7 +484,7 @@ $label-color-alt: $white;
 $label-palette: $foundation-palette;
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
-$label-radius: $dealer-badge-radius;
+$label-radius: $global-radius;
 
 // 22. Media Object
 // ----------------
@@ -426,9 +501,9 @@ $menu-nested-margin: $global-menu-nested-margin;
 $menu-items-padding: $global-menu-padding;
 $menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
 $menu-item-background-active: get-color(primary);
 $menu-icon-spacing: 0.25rem;
-$menu-item-background-hover: $light-gray;
 $menu-state-back-compat: true;
 $menu-centered-back-compat: true;
 $menu-icons-back-compat: true;
@@ -446,8 +521,12 @@ $meter-fill-bad: $alert-color;
 // 25. Off-canvas
 // --------------
 
-$offcanvas-sizes: ( small: 250px, );
-$offcanvas-vertical-sizes: ( small: 250px, );
+$offcanvas-sizes: (
+  "small": 250px,
+);
+$offcanvas-vertical-sizes: (
+  "small": 250px,
+);
 $offcanvas-background: $light-gray;
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
 $offcanvas-inner-shadow-size: 20px;
@@ -494,6 +573,8 @@ $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
 $pagination-mobile-current-item: false;
 $pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
 
 // 28. Progress Bar
 // ----------------
@@ -507,7 +588,12 @@ $progress-radius: $global-radius;
 // 29. Prototype Arrow
 // -------------------
 
-$prototype-arrow-directions: ( down, up, right, left );
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+);
 $prototype-arrow-size: 0.4375rem;
 $prototype-arrow-color: $black;
 
@@ -533,7 +619,13 @@ $prototype-border-color: $medium-gray;
 // ---------------------
 
 $prototype-display-breakpoints: $global-prototype-breakpoints;
-$prototype-display: ( inline, inline-block, block, table, table-cell );
+$prototype-display: (
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
+);
 
 // 34. Prototype Font-Styling
 // --------------------------
@@ -547,20 +639,41 @@ $prototype-font-bold: $global-weight-bold;
 // -----------------------------
 
 $prototype-list-breakpoints: $global-prototype-breakpoints;
-$prototype-style-type-unordered: ( disc, circle, square );
-$prototype-style-type-ordered: ( decimal, lower-alpha, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman );
+$prototype-style-type-unordered: (
+  disc,
+  circle,
+  square
+);
+$prototype-style-type-ordered: (
+  decimal,
+  lower-alpha,
+  lower-latin,
+  lower-roman,
+  upper-alpha,
+  upper-latin,
+  upper-roman
+);
 
 // 36. Prototype Overflow
 // ----------------------
 
 $prototype-overflow-breakpoints: $global-prototype-breakpoints;
-$prototype-overflow: ( visible, hidden, scroll );
+$prototype-overflow: (
+  visible,
+  hidden,
+  scroll
+);
 
 // 37. Prototype Position
 // ----------------------
 
 $prototype-position-breakpoints: $global-prototype-breakpoints;
-$prototype-position: ( static, relative, absolute, fixed );
+$prototype-position: (
+  static,
+  relative,
+  absolute,
+  fixed
+);
 $prototype-position-z-index: 975;
 
 // 38. Prototype Rounded
@@ -583,14 +696,22 @@ $prototype-separator-margin-top: $global-margin;
 // --------------------
 
 $prototype-shadow-breakpoints: $global-prototype-breakpoints;
-$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
 // 41. Prototype Sizing
 // --------------------
 
 $prototype-sizing-breakpoints: $global-prototype-breakpoints;
-$prototype-sizing: ( width, height );
-$prototype-sizes: ( 25: 25%, 50: 50%, 75: 75%, 100: 100% );
+$prototype-sizing: (
+  width,
+  height
+);
+$prototype-sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+);
 
 // 42. Prototype Spacing
 // ---------------------
@@ -602,13 +723,21 @@ $prototype-spacers-count: 3;
 // -----------------------------
 
 $prototype-decoration-breakpoints: $global-prototype-breakpoints;
-$prototype-text-decoration: ( overline, underline, line-through, );
+$prototype-text-decoration: (
+  overline,
+  underline,
+  line-through,
+);
 
 // 44. Prototype Text-Transformation
 // ---------------------------------
 
 $prototype-transformation-breakpoints: $global-prototype-breakpoints;
-$prototype-text-transformation: ( lowercase, uppercase, capitalize );
+$prototype-text-transformation: (
+  lowercase,
+  uppercase,
+  capitalize
+);
 
 // 45. Prototype Text-Utilities
 // ----------------------------
@@ -620,19 +749,22 @@ $prototype-text-overflow: ellipsis;
 // --------------------
 
 $responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: ( default: 4 by 3, widescreen: 16 by 9, );
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+);
 
 // 47. Reveal
 // ----------
 
-$reveal-background: $white;
+$reveal-background: $modal-bg-color;
 $reveal-width: 600px;
 $reveal-max-width: $global-width;
 $reveal-padding: $global-padding;
-$reveal-border: 1px solid $medium-gray;
-$reveal-radius: $global-radius;
+$reveal-border: 1px solid $modal-border-color;
+$reveal-radius: $modal-radius;
 $reveal-zindex: 1005;
-$reveal-overlay-background: rgba($black, 0.45);
+$reveal-overlay-background: $modal-overlay-color;
 
 // 48. Slider
 // ----------
@@ -663,6 +795,8 @@ $switch-paddle-background: $white;
 $switch-paddle-offset: 0.25rem;
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: 0.5;
+$switch-cursor-disabled: not-allowed;
 
 // 50. Table
 // ---------
@@ -677,7 +811,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
 $table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
@@ -697,7 +831,6 @@ $tab-active-color: $primary-color;
 $tab-item-font-size: rem-calc(12);
 $tab-item-background-hover: $white;
 $tab-item-padding: 1.25rem 1.5rem;
-$tab-expand-max: 6;
 $tab-content-background: $white;
 $tab-content-border: $light-gray;
 $tab-content-color: $body-font-color;
@@ -706,7 +839,7 @@ $tab-content-padding: 1rem;
 // 52. Thumbnail
 // -------------
 
-$thumbnail-border: solid 4px $white;
+$thumbnail-border: 4px solid $white;
 $thumbnail-margin-bottom: $global-margin;
 $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
 $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
@@ -755,10 +888,12 @@ $topbar-unstack-breakpoint: medium;
 $xy-grid: true;
 $grid-container: $global-width;
 $grid-columns: 12;
-$grid-margin-gutters: ( small: 20px, medium: 30px );
+$grid-margin-gutters: (
+  "small": 20px,
+  "medium": 30px
+);
 $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
-$block-grid-max: 8;
-
+$xy-block-grid-max: 8;
 

package/src/components/icons/IconApprove.vue

@@ -4,9 +4,3 @@
 	<path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M13.39,20.36l7.68,7.69L47.93,2.42"/>
 </g>
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/components/icons/IconCaret.vue

@@ -1,9 +1,3 @@
 <template>
     <path fill="none" fill-rule="evenodd" class="stroke-target" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10l6.119 6L18 10" />
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/components/icons/IconClose.vue

@@ -4,9 +4,3 @@
         <rect width="20" height="3" x="-1" y="7" rx="1" transform="scale(-1 1) rotate(45 0 -13.228)"/>
     </g>
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/components/icons/IconQrCode.vue

@@ -676,9 +676,3 @@
         </g>
     </g>
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/components/icons/IconSave.vue

@@ -14,9 +14,3 @@
         </g>
     </g>
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/components/icons/IconShare.vue

@@ -14,9 +14,3 @@
         </g>
     </g>
 </template>
-
-<script>
-    export default {
-        
-    }
-</script>

package/src/index.js

@@ -12,13 +12,13 @@ import timespanInput from "./components/TimespanInput.vue";
 import successCheckmark from "./components/SuccessCheckmark.vue";
 import alertTriangle from "./components/AlertTriangle.vue";
 
-import iconBase from "./components/icons/IconBase.vue";
-import iconClose from "./components/icons/IconClose.vue";
-import iconCaret from "./components/icons/iconCaret.vue";
-import iconApprove from "./components/icons/IconApprove.vue";
-import iconSave from "./components/icons/IconSave.vue";
-import iconShare from "./components/icons/IconShare.vue";
-import iconQrCode from "./components/icons/iconQrCode.vue";
+import IconBaseFile from "./components/icons/IconBase.vue";
+import IconCloseFile from "./components/icons/IconClose.vue";
+import IconCaretFile from "./components/icons/IconCaret.vue";
+import IconApproveFile from "./components/icons/IconApprove.vue";
+import IconSaveFile from "./components/icons/IconSave.vue";
+import IconShareFile from "./components/icons/IconShare.vue";
+import IconQrCodeFile from "./components/icons/IconQrCode.vue";
 
 import money from "./components/v-money";
 
@@ -36,13 +36,13 @@ const Components = {
 	TimespanInput: timespanInput,
 	SuccessCheckmark: successCheckmark,
 	AlertTriangle: alertTriangle,
-	IconBase: iconBase,
-	IconClose: iconClose,
-	IconCaret: iconCaret,
-	IconApprove: iconApprove,
-	IconSave: iconSave,
-	IconShare: iconShare,
-	IconQrCode: iconQrCode,
+	IconBase: IconBaseFile,
+	IconClose: IconCloseFile,
+	IconCaret: IconCaretFile,
+	IconApprove: IconApproveFile,
+	IconSave: IconSaveFile,
+	IconShare: IconShareFile,
+	IconQrCode: IconQrCodeFile,
 	Money: money,
 };
 
@@ -59,13 +59,13 @@ export var SwitchInput = switchInput;
 export var TimespanInput = timespanInput;
 export var SuccessCheckmark = successCheckmark;
 export var AlertTriangle = alertTriangle;
-export var IconBase = iconBase;
-export var IconClose = iconClose;
-export var IconCaret = iconCaret;
-export var IconApprove = iconApprove;
-export var IconSave = iconSave;
-export var IconShare = iconShare;
-export var IconQrCode = iconQrCode;
+export var IconBase = IconBaseFile;
+export var IconClose = IconCloseFile;
+export var IconCaret = IconCaretFile;
+export var IconApprove = IconApproveFile;
+export var IconSave = IconSaveFile;
+export var IconShare = IconShareFile;
+export var IconQrCode = IconQrCodeFile;
 export var Money = money;
 
 export default Components;