@propelinc/citrus-ui 0.2.8 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -14,7 +14,7 @@
     "lint:css": "stylelint \"src/**/*.(vue|less)\"",
     "lint:js": "vue-cli-service lint",
     "publish:dist": "npm run build:dist && npm publish",
-    "publish:storybook": "storybook-to-aws-s3 --script=\"storybook:build\" --bucket-path=citrus-ui-storybook",
+    "publish:storybook": "storybook-to-aws-s3 --script=\"build:storybook\" --bucket-path=citrus-ui-storybook",
     "serve:storybook": "vue-cli-service storybook:serve -p 6006 -c .storybook",
     "test:unit": "vue-cli-service test:unit"
   },

package/src/colors/colors.json

@@ -1,37 +1,34 @@
 {
-  "color-white": "#FFF",
-
-  "color-navy": "#1B2538",
-  "color-navy-tint-1": "#495160",
-  "color-navy-tint-2": "#767C88",
-  "color-navy-tint-3": "#A4A8AF",
-  "color-navy-tint-4": "#D1D3D7",
-
-  "color-providers-green": "#B3F6A2",
-  "color-providers-green-tint-1": "#D1FAC7",
   "color-providers-green-tint-2": "#ECFDE8",
-
-  "color-accent-green": "#61D866",
+  "color-providers-green-tint-1": "#D1FAC7",
+  "color-providers-green": "#B3F6A2",
+  "color-accent-green": "#51D156",
   "color-accent-green-shade-1": "#49A24C",
   "color-accent-green-shade-2": "#3A823D",
 
-  "color-blue": "#A3B0F9",
-  "color-blue-tint-1": "#D1D7FC",
-  "color-blue-tint-2": "#E8EBFD",
+  "color-providers-blue-tint-2": "#E8EBFD",
+  "color-providers-blue-tint-1": "#D1D7FC",
+  "color-providers-blue": "#A3B0F9",
+  "color-accent-blue": "#5560CB",
+  "color-accent-blue-shade-1": "#404898",
+  "color-accent-blue-shade-2": "#2F3570",
 
-  "color-blue-accent": "#5560CB",
-  "color-blue-accent-shade-1": "#404898",
-  "color-blue-accent-shade-2": "#2F3570",
+  "color-navy-tint-4": "#D1D3D7",
+  "color-navy-tint-3": "#A4A8AF",
+  "color-navy-tint-2": "#767C88",
+  "color-navy-tint-1": "#495160",
+  "color-navy": "#1B2538",
 
-  "color-neutral": "#F5F2ED",
+  "color-neutral": "#FAF8F6",
   "color-neutral-shade": "#E9E6E1",
-  "color-neutral-tint": "#FAF8F6",
+  "color-white": "#FFF",
 
-  "color-peach": "#FDCAB7",
-  "color-orange": "#FC8247",
+  "color-purple": "#7C3872",
   "color-pink": "#F6A0D1",
-  "color-purple": "#79386F",
+  "color-orange": "#FC8247",
+  "color-peach": "#FDCAB7",
+  "color-yellow": "#FFC200",
+  "color-lemon": "#FEE69A",
 
-  "color-red": "#C34459",
-  "color-yellow": "#F2C94C"
+  "color-alert-red": "#C34459"
 }

package/src/colors/theme.ts

@@ -1,33 +1,19 @@
 import { VuetifyThemeVariant } from 'vuetify/types/services/theme';
 
-import PROVIDERS_COLORS from './colors.json';
+import COLORS from './colors.json';
 
-const Theme = {
-  'primary': PROVIDERS_COLORS['color-blue-accent'],
-  'secondary': PROVIDERS_COLORS['color-accent-green'],
-
-  'info': PROVIDERS_COLORS['color-blue'],
-  'success': PROVIDERS_COLORS['color-blue-accent'],
-  'warning': PROVIDERS_COLORS['color-yellow'],
-  'error': PROVIDERS_COLORS['color-red'],
-
-  'navy': PROVIDERS_COLORS['color-navy'],
-  'navy-tint-4': PROVIDERS_COLORS['color-navy-tint-4'],
-  'navy-tint-3': PROVIDERS_COLORS['color-navy-tint-3'],
-  'navy-tint-2': PROVIDERS_COLORS['color-navy-tint-2'],
-  'navy-tint-1': PROVIDERS_COLORS['color-navy-tint-1'],
-  'neutral': PROVIDERS_COLORS['color-neutral'],
-
-  'providers-green': PROVIDERS_COLORS['color-providers-green'],
-  'providers-green-tint-1': PROVIDERS_COLORS['color-providers-green-tint-1'],
-  'accent-green': PROVIDERS_COLORS['color-accent-green'],
-  'blue': PROVIDERS_COLORS['color-blue'],
-  'blue-tint-1': PROVIDERS_COLORS['color-blue-tint-1'],
-
-  'peach': PROVIDERS_COLORS['color-peach'],
-  'orange': PROVIDERS_COLORS['color-orange'],
-  'pink': PROVIDERS_COLORS['color-pink'],
-  'purple': PROVIDERS_COLORS['color-purple'],
+const VuetifyConfig = {
+  primary: COLORS['color-accent-blue'],
+  secondary: COLORS['color-accent-green'],
+  info: COLORS['color-providers-blue'],
+  success: COLORS['color-accent-blue'],
+  warning: COLORS['color-yellow'],
+  error: COLORS['color-alert-red'],
 } as Partial<VuetifyThemeVariant>;
 
-export default Theme;
+const CitrusTheme = Object.entries(COLORS).reduce((theme, [colorName, hex]) => {
+  theme[colorName.replace('color-', '')] = hex;
+  return theme;
+}, {} as Partial<VuetifyThemeVariant>);
+
+export default { ...CitrusTheme, ...VuetifyConfig };

package/src/components/CAlert.vue

@@ -72,7 +72,7 @@ export default class CAlert extends Vue {
 
 .c-alert--error {
   & /deep/ .v-snack__wrapper {
-    background-color: @color-red;
+    background-color: @color-alert-red;
   }
 }
 

package/src/components/CBanner.vue

@@ -23,7 +23,7 @@ export default class CBanner extends Vue {
       return 'peach';
     }
 
-    return 'blue';
+    return 'providers-blue';
   }
 }
 </script>

package/src/components/CButton.vue

@@ -79,7 +79,7 @@ export default class CButton extends Vue {
 }
 
 .button--primary {
-  .button-theme(@color-white, @color-blue-accent);
+  .button-theme(@color-white, @color-accent-blue);
 }
 
 .button--primary.button--dark {
@@ -91,7 +91,7 @@ export default class CButton extends Vue {
 }
 
 .button--secondary {
-  .button-theme(@color-blue-accent, @color-white);
+  .button-theme(@color-accent-blue, @color-white);
 
   border: @border !important;
 }
@@ -105,7 +105,7 @@ export default class CButton extends Vue {
 }
 
 .button--tertiary {
-  .button-theme(@color-blue-accent, transparent);
+  .button-theme(@color-accent-blue, transparent);
 }
 
 .button--tertiary.button--dark {

package/src/components/CCard.vue

@@ -1,9 +1,26 @@
 <template>
-  <div class="card">
-    <div v-if="title" data-test="card-title" class="card__title">{{ title }}</div>
+  <div class="card" :class="{ [color]: !!color }">
+    <div v-if="shouldShowHeader" class="card__header" :class="{ 'card__header--divided': divided }">
+      <div class="card__header__title-container">
+        <span data-test="card-title" class="card__header__title">
+          <slot name="header:title">
+            {{ title }}
+          </slot>
+        </span>
+      </div>
+
+      <div class="card__header__append">
+        <slot name="header:append" />
+      </div>
+    </div>
+
     <div data-test="card-body" class="card__body" :class="{ 'card__body--fluid': fluid }">
       <slot />
     </div>
+
+    <div class="card__footer" :class="{ 'card__footer--divided': divided }">
+      <slot name="footer" />
+    </div>
   </div>
 </template>
 
@@ -13,38 +30,88 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 @Component({ name: 'CCard' })
 export default class CCard extends Vue {
   @Prop(String) title?: string;
+  /** Removes padding from card body */
   @Prop({ type: Boolean, default: false }) fluid!: boolean;
+  /** Shows borders between header, body, and footer */
+  @Prop({ type: Boolean, default: false }) divided!: boolean;
+  /** Sets background color */
+  @Prop(String) color?: string;
+
+  get shouldShowHeader(): boolean {
+    return (
+      !!this.title ||
+      !!this.$slots['header:append'] ||
+      !!this.$scopedSlots['header:append'] ||
+      !!this.$slots['header:title'] ||
+      !!this.$scopedSlots['header:title']
+    );
+  }
 }
 </script>
 
 <style lang="less" scoped>
 @import '~@/styles/variables.less';
+@import '~@/styles/mixins/buttons.less';
 
 .card {
   background: @color-white;
   border: @border;
   border-radius: @border-radius;
+  overflow: hidden;
 
   & + & {
     margin-top: 12px;
   }
 }
 
-.card__title {
-  .overline;
+.card__header {
+  align-items: flex-start;
+  display: flex;
+  padding: @card-header-v-spacing @card-h-spacing 0;
+}
 
-  padding: 12px 16px 0;
+.card__header__title-container {
+  flex: 1 1 100%;
 }
 
-.card__body {
-  padding: 16px 16px 12px;
+.card__header__title {
+  .title();
 
-  .card__title + & {
-    padding-top: 8px;
-  }
+  vertical-align: -4px;
+  word-break: break-word;
+}
+
+.card__header__append:not(:empty) {
+  flex: none;
+  margin: -6px -12px -8px @card-h-spacing;
+}
+
+.card__header--divided {
+  border-bottom: @border;
+  padding-bottom: @card-header-v-spacing;
+}
+
+.card__body {
+  padding: @card-body-v-spacing @card-h-spacing;
 }
 
 .card__body--fluid {
   padding: 0;
 }
+
+.card__footer {
+  .button-container();
+
+  &:not(:empty) {
+    margin-top: -1 * @card-body-v-spacing;
+    padding: 0 @card-h-spacing;
+  }
+}
+
+.card__footer--divided {
+  &:not(:empty) {
+    border-top: @border;
+    margin-top: 0;
+  }
+}
 </style>

package/src/components/CListItem.vue

@@ -77,7 +77,7 @@ export default class CListItem extends Vue {
 }
 
 .list-item__action {
-  color: @color-blue-accent;
+  color: @color-accent-blue;
   flex: none;
   padding-left: 12px;
 }

package/src/components/CModal.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-dialog
+    :width="loading ? '160' : undefined"
+    :persistent="!dismissible || !!loading"
+    no-click-animation
+    :value="value"
+    @input="(value) => $emit('input', value)"
+  >
+    <c-card v-if="loading" key="loading" data-test="modal-loading">
+      <div class="modal__loading">
+        <div class="modal__loading__icon-container">
+          <font-awesome-icon :icon="faSync" class="fa-spin modal__loading__icon" />
+        </div>
+
+        <div
+          v-if="hasLoadingMessage"
+          data-test="modal-loading-message"
+          class="modal__loading__message"
+        >
+          {{ loading }}
+        </div>
+      </div>
+    </c-card>
+    <c-card v-else key="default" data-test="modal">
+      <template #header:title>
+        <span class="modal__header__title" data-test="modal-title">{{ title }}</span>
+      </template>
+
+      <template #header:append>
+        <c-icon-button
+          v-if="dismissible"
+          data-test="modal-dismiss"
+          :icon="faTimes"
+          @click="$emit('input', false)"
+        />
+      </template>
+
+      <slot />
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </c-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import CCard from '@/components/CCard.vue';
+import CIconButton from '@/components/CIconButton.vue';
+
+@Component({ name: 'CModal', components: { CCard, CIconButton } })
+export default class CModal extends Vue {
+  faSync = faSync;
+  faTimes = faTimes;
+
+  @Prop({ type: Boolean, default: false }) value!: boolean;
+  @Prop(String) title?: string;
+  /** Shows loading state + sets loading message if string */
+  @Prop([String, Boolean]) loading?: string | boolean;
+  /** Allows modal to be dismissed */
+  @Prop({ type: Boolean, default: true }) dismissible!: boolean;
+
+  get hasLoadingMessage(): boolean {
+    return typeof this.loading === 'string';
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.modal__header__title {
+  .subheadline();
+
+  vertical-align: -4px;
+}
+
+.modal__loading {
+  text-align: center;
+}
+
+.modal__loading__icon-container {
+  padding: 12px 0;
+}
+
+.modal__loading__icon {
+  color: @color-accent-blue;
+  font-size: @font-size-2x-large;
+}
+
+.modal__loading__message {
+  font-weight: @font-weight-bold;
+}
+
+/deep/ .card__footer:not(:empty) {
+  margin-top: -12px;
+  padding-bottom: 4px;
+}
+</style>

package/src/components/CModalLoading.vue

@@ -1,54 +1,16 @@
 <template>
-  <v-dialog
-    data-test="modal-loading"
-    width="160"
-    persistent
-    no-click-animation
-    :value="value"
-    @input="(value) => $emit('input', value)"
-  >
-    <v-card class="modal-loading__content">
-      <font-awesome-icon :icon="faSync" class="fa-spin modal-loading__icon" />
-
-      <div data-test="modal-loading-message" class="modal-loading__content__message">
-        <slot>
-          {{ message }}
-        </slot>
-      </div>
-    </v-card>
-  </v-dialog>
+  <c-modal :loading="message || true" :value="value" @input="(value) => $emit('input', value)" />
 </template>
 
 <script lang="ts">
-import { faSync } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CModalLoading', components: { FontAwesomeIcon } })
-export default class CModalLoading extends Vue {
-  faSync = faSync;
+import CModal from '@/components/CModal.vue';
 
+@Component({ name: 'CModalLoading', components: { FontAwesomeIcon, CModal } })
+export default class CModalLoading extends Vue {
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop({ type: String }) message?: string;
 }
 </script>
-
-<style lang="less" scoped>
-@import '~@/styles/variables.less';
-
-.modal-loading__icon {
-  color: @color-blue-accent;
-  font-size: @font-size-2x-large;
-}
-
-.modal-loading__content {
-  border-radius: @border-radius !important; // Override Vuetify styles
-  padding: 28px 16px 20px;
-  text-align: center;
-}
-
-.modal-loading__content__message {
-  font-weight: @font-weight-bold;
-  margin: 12px 0 0;
-}
-</style>

package/src/components/CSegmentedButtonOption.vue

@@ -40,6 +40,6 @@ export default class CSegmentedButtonOption extends Vue {
 
 // This class is applied by the CSegmentedButton component.
 .segmented-button__option--active {
-  background-color: @color-blue !important;
+  background-color: @color-providers-blue !important;
 }
 </style>

package/src/styles/mixins/buttons.less

@@ -0,0 +1,22 @@
+.button-container() {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  
+  & /deep/ .button--primary,
+  & /deep/ .button--secondary {
+    margin-top: 12px;
+
+    &:last-child {
+      margin-bottom: 12px;
+    }
+  }
+
+  & /deep/ .button--tertiary {
+    margin-top: 8px;
+
+    &:last-child {
+      margin-bottom: 8px;
+    }
+  }
+}

package/src/styles/variables.less

@@ -98,6 +98,11 @@
   text-transform: uppercase;
 }
 
+// CARDS
+@card-body-v-spacing: 16px;
+@card-h-spacing: 16px;
+@card-header-v-spacing: 12px;
+
 // SKELETON LOADER
 @skeleton-loader-animation-duration: 3s;
 @skeleton-loader-animation: skeleton-loader-animation @skeleton-loader-animation-duration infinite;

package/storybook-static/css/main.cce46705.css

@@ -0,0 +1 @@
+@-webkit-keyframes skeleton-loader-animation{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation{0%{background-position:150%}to{background-position:-50%}}@font-face{font-family:ObjectSans;font-style:normal;font-weight:100;src:url(../fonts/ObjectSans-Thin.86d44227.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:100;src:url(../fonts/ObjectSans-ThinSlanted.20342160.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:400;src:url(../fonts/ObjectSans-Regular.e4ea0b90.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:400;src:url(../fonts/ObjectSans-Slanted.57a90be9.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:700;src:url(../fonts/ObjectSans-Bold.5492f3d5.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:700;src:url(../fonts/ObjectSans-BoldSlanted.29e2a87e.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:800;src:url(../fonts/ObjectSans-Heavy.d0b2f035.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:800;src:url(../fonts/ObjectSans-HeavySlanted.45e9c063.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:900;src:url(../fonts/ObjectSans-Black.314082dd.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:900;src:url(../fonts/ObjectSans-BlackSlanted.d3163c50.woff2) format("woff2")}.providers.providers-theme{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%}.providers.providers-theme .balance{font-family:ObjectSans!important;font-size:32px!important;font-weight:100;line-height:100%}.providers.providers-theme .large-headline{font-family:ObjectSans!important;font-size:32px!important;font-weight:900;line-height:85%;text-transform:uppercase}.providers.providers-theme .large-headline-script{font-family:Blitz!important;font-size:44px!important;font-weight:400;line-height:85%}.providers.providers-theme .headline{font-family:ObjectSans!important;font-size:23px!important;font-weight:800;line-height:130%}.providers.providers-theme .subheadline{font-family:ObjectSans!important;font-size:18px!important;font-weight:800;line-height:130%}.providers.providers-theme .title{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;font-weight:800}.providers.providers-theme .body,.providers.providers-theme p{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%}.providers.providers-theme .caption{font-weight:400;line-height:150%}.providers.providers-theme .caption,.providers.providers-theme .overline{font-family:ObjectSans!important;font-size:12px!important;letter-spacing:0!important}.providers.providers-theme .overline{font-weight:800;line-height:100%;text-transform:uppercase}.providers.providers-theme .font-family-blitz{font-family:Blitz}.storybook-preview.v-application{background:transparent}.storybook-preview .v-application--wrap{min-height:unset}@-webkit-keyframes skeleton-loader-animation-data-v-cf2d75ac{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-cf2d75ac{0%{background-position:150%}to{background-position:-50%}}.c-alert[data-v-cf2d75ac]{left:16px;margin-top:24px;right:16px}.c-alert[data-v-cf2d75ac] .v-snack__wrapper{border-radius:8px}.c-alert[data-v-cf2d75ac] .v-snack__content{padding:12px 16px}.c-alert--error[data-v-cf2d75ac] .v-snack__wrapper{background-color:#c34459}.c-alert--success[data-v-cf2d75ac] .v-snack__wrapper{background-color:#49a24c}.banner[data-v-24d3d1aa]{align-items:flex-start;display:flex;padding:12px 16px}.banner__icon[data-v-24d3d1aa]{margin-right:12px}.banner__message[data-v-24d3d1aa]{flex:auto;margin:0}@-webkit-keyframes skeleton-loader-animation-data-v-66d795f0{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-66d795f0{0%{background-position:150%}to{background-position:-50%}}.button[data-v-66d795f0]{font-weight:800;letter-spacing:0;text-transform:none}.button[data-v-66d795f0] .v-btn__content{line-height:1}.button--primary[data-v-66d795f0]{background-color:#5560cb!important;color:#fff!important}.button--primary.button--dark[data-v-66d795f0]{background-color:#1b2538!important;color:#fff!important}.button--primary.button--light[data-v-66d795f0]{background-color:#fff!important;color:#1b2538!important}.button--secondary[data-v-66d795f0]{background-color:#fff!important;color:#5560cb!important;border:1px solid #e9e6e1!important}.button--secondary.button--dark[data-v-66d795f0]{background-color:#fff!important;color:#1b2538!important}.button--secondary.button--light[data-v-66d795f0]{background-color:#1b2538!important;color:#fff!important}.button--tertiary[data-v-66d795f0]{background-color:transparent!important;color:#5560cb!important}.button--tertiary.button--dark[data-v-66d795f0]{background-color:transparent!important;color:#1b2538!important}.button--tertiary.button--light[data-v-66d795f0]{background-color:transparent!important;color:#fff!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--primary[data-v-66d795f0]{background-color:#d1d3d7!important;color:#495160!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--secondary[data-v-66d795f0]{background-color:#fff!important;color:#767c88!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--tertiary[data-v-66d795f0]{background-color:transparent!important;color:#767c88!important}.button--large[data-v-66d795f0]{font-size:16px}.button__icon[data-v-66d795f0]{font-size:23px;height:24px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:24px}@-webkit-keyframes skeleton-loader-animation-data-v-4c61df64{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-4c61df64{0%{background-position:150%}to{background-position:-50%}}.card[data-v-4c61df64]{background:#fff;border:1px solid #e9e6e1;border-radius:8px}.card+.card[data-v-4c61df64]{margin-top:12px}.card__title[data-v-4c61df64]{font-family:ObjectSans!important;font-size:12px!important;font-weight:800;letter-spacing:0!important;line-height:100%;text-transform:uppercase;padding:12px 16px 0}.card__body[data-v-4c61df64]{padding:16px 16px 12px}.card__title+.card__body[data-v-4c61df64]{padding-top:8px}.card__body--fluid[data-v-4c61df64]{padding:0}@-webkit-keyframes skeleton-loader-animation-data-v-0b4b1e4f{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0b4b1e4f{0%{background-position:150%}to{background-position:-50%}}[data-v-0b4b1e4f] label.v-label{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;color:#1b2538;margin-bottom:0}@-webkit-keyframes skeleton-loader-animation-data-v-0bf0ae44{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0bf0ae44{0%{background-position:150%}to{background-position:-50%}}.list-item[data-v-0bf0ae44]{color:#1b2538;display:flex;padding:16px;text-align:left;text-decoration:none;width:100%}.list-item+.list-item[data-v-0bf0ae44]{border-top:1px solid #e9e6e1}.list-item__icon[data-v-0bf0ae44]{flex:none;padding-right:12px}.list-item__content[data-v-0bf0ae44]{flex:auto}.list-item__action[data-v-0bf0ae44]{color:#5560cb;flex:none;padding-left:12px}@-webkit-keyframes skeleton-loader-animation-data-v-0558ab0a{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0558ab0a{0%{background-position:150%}to{background-position:-50%}}.modal-loading__icon[data-v-0558ab0a]{color:#5560cb;font-size:32px}.modal-loading__content[data-v-0558ab0a]{border-radius:8px!important;padding:28px 16px 20px;text-align:center}.modal-loading__content__message[data-v-0558ab0a]{font-weight:700;margin:12px 0 0}@-webkit-keyframes skeleton-loader-animation-data-v-dfca0d72{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-dfca0d72{0%{background-position:150%}to{background-position:-50%}}.segmented-button__option[data-v-dfca0d72]{border:1px solid #e9e6e1!important;color:#1b2538;flex:1 1 0;font-weight:800;letter-spacing:0;text-transform:none}.segmented-button__option[data-v-dfca0d72]:before{color:transparent}.segmented-button__option--active[data-v-dfca0d72]{background-color:#a3b0f9!important}@-webkit-keyframes skeleton-loader-animation-data-v-31bb230e{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-31bb230e{0%{background-position:150%}to{background-position:-50%}}.segmented-button[data-v-31bb230e]{width:100%}@-webkit-keyframes skeleton-loader-animation-data-v-1c8ad0b1{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-1c8ad0b1{0%{background-position:150%}to{background-position:-50%}}.form-field__label[data-v-1c8ad0b1]{font-weight:700;margin:0 0 4px 2px}.form-field__label--disabled[data-v-1c8ad0b1]{color:#767c88}@-webkit-keyframes skeleton-loader-animation-data-v-392ad8f0{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-392ad8f0{0%{background-position:150%}to{background-position:-50%}}select[data-v-392ad8f0]{color:#1b2538;cursor:pointer;height:100%;position:absolute;width:100%;z-index:1}select[data-v-392ad8f0]:focus{outline:none}.select-input--placeholder[data-v-392ad8f0]{color:#a4a8af}@-webkit-keyframes skeleton-loader-animation-data-v-e8c6fcdc{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-e8c6fcdc{0%{background-position:150%}to{background-position:-50%}}.select__field[data-v-e8c6fcdc] legend{display:none}.select__field.v-input--has-state[data-v-e8c6fcdc] fieldset,.select__field.v-input--is-focused[data-v-e8c6fcdc] fieldset{border-color:currentColor;border-width:1px}.select__field[data-v-e8c6fcdc] .v-input__slot{min-height:48px;padding:0 16px!important}.select__field[data-v-e8c6fcdc] input,.select__field[data-v-e8c6fcdc] select{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;line-height:20px}.select__field[data-v-e8c6fcdc] fieldset{background:#fff;border-color:#e9e6e1;border-radius:8px;top:0}.select__field--disabled[data-v-e8c6fcdc] fieldset{background:#e9e6e1}.select__field--disabled[data-v-e8c6fcdc] input,.select__field--disabled[data-v-e8c6fcdc] select{color:#767c88}.select__field__icon[data-v-e8c6fcdc]{z-index:1}@-webkit-keyframes skeleton-loader-animation-data-v-059ff40c{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-059ff40c{0%{background-position:150%}to{background-position:-50%}}.skeleton-loader-circle[data-v-059ff40c]{-webkit-animation:skeleton-loader-animation-data-v-059ff40c 3s infinite;animation:skeleton-loader-animation-data-v-059ff40c 3s infinite;background:linear-gradient(75deg,#a4a8af 30%,#d1d3d7 50%,#a4a8af 70%);background-size:200% 150%;border-radius:18px;height:36px;width:36px}@-webkit-keyframes skeleton-loader-animation-data-v-2d331031{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-2d331031{0%{background-position:150%}to{background-position:-50%}}.skeleton-loader-text[data-v-2d331031]{width:100%}.skeleton-loader-text__line[data-v-2d331031]{-webkit-animation:skeleton-loader-animation-data-v-2d331031 3s infinite;animation:skeleton-loader-animation-data-v-2d331031 3s infinite;background:linear-gradient(75deg,#a4a8af 30%,#d1d3d7 50%,#a4a8af 70%);background-size:200% 150%;border-radius:2px;height:14px;width:100%}.skeleton-loader-text__line+.skeleton-loader-text__line[data-v-2d331031]{margin-top:4px}.skeleton-loader-text__line[data-v-2d331031]:last-child{width:calc(100% - 32px)}@-webkit-keyframes skeleton-loader-animation-data-v-19b5e9e8{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-19b5e9e8{0%{background-position:150%}to{background-position:-50%}}.text-field__field[data-v-19b5e9e8] legend{display:none}.text-field__field.v-input--has-state[data-v-19b5e9e8] fieldset,.text-field__field.v-input--is-focused[data-v-19b5e9e8] fieldset{border-color:currentColor;border-width:1px}.text-field__field[data-v-19b5e9e8] .v-input__slot{min-height:48px;padding:0 16px!important}.text-field__field[data-v-19b5e9e8] input,.text-field__field[data-v-19b5e9e8] select{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;line-height:20px}.text-field__field[data-v-19b5e9e8] fieldset{background:#fff;border-color:#e9e6e1;border-radius:8px;top:0}.text-field__field--disabled[data-v-19b5e9e8] fieldset{background:#e9e6e1}.text-field__field--disabled[data-v-19b5e9e8] input,.text-field__field--disabled[data-v-19b5e9e8] select{color:#767c88}

package/storybook-static/iframe.html

@@ -123,11 +123,11 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="css/vendors~main.ec1b1c6e.css" rel="stylesheet"><link href="css/main.918ac2bc.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="css/vendors~main.ec1b1c6e.css" rel="stylesheet"><link href="css/main.cce46705.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";
             
         
             
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.b29ddaa7.iframe.bundle.js"></script><script src="vendors~main.4d3a0ad4.iframe.bundle.js"></script><script src="main.4c454d37.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.b29ddaa7.iframe.bundle.js"></script><script src="vendors~main.1d6c6a41.iframe.bundle.js"></script><script src="main.0da2f130.iframe.bundle.js"></script></body></html>