')\n\n return this.landscape ? landscapeFormatter : titleDateFormatter\n },\n },\n\n watch: {\n internalActivePicker: {\n immediate: true,\n handler (val: ActivePicker) {\n this.$emit('update:active-picker', val)\n },\n },\n activePicker (val: ActivePicker) {\n this.internalActivePicker = val\n },\n tableDate (val: string, prev: string) {\n // Make a ISO 8601 strings from val and prev for comparision, otherwise it will incorrectly\n // compare for example '2000-9' and '2000-10'\n const sanitizeType = this.type === 'month' ? 'year' : 'month'\n this.isReversing = sanitizeDateString(val, sanitizeType) < sanitizeDateString(prev, sanitizeType)\n this.$emit('update:picker-date', val)\n },\n pickerDate (val: string | null) {\n if (val) {\n this.tableDate = val\n } else if (this.lastValue && this.type === 'date') {\n this.tableDate = sanitizeDateString(this.lastValue, 'month')\n } else if (this.lastValue && this.type === 'month') {\n this.tableDate = sanitizeDateString(this.lastValue, 'year')\n }\n },\n value (newValue: DatePickerValue, oldValue: DatePickerValue) {\n this.checkMultipleProp()\n this.setInputDate()\n\n if (\n (!this.isMultiple && this.value && !this.pickerDate) ||\n (this.isMultiple && this.multipleValue.length && (!oldValue || !oldValue.length) && !this.pickerDate)\n ) {\n this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')\n }\n },\n type (type: DatePickerType) {\n this.internalActivePicker = type.toUpperCase()\n\n if (this.value && this.value.length) {\n const output = this.multipleValue\n .map((val: string) => sanitizeDateString(val, type))\n .filter(this.isDateAllowed)\n this.$emit('input', this.isMultiple ? output : output[0])\n }\n },\n },\n\n created () {\n this.checkMultipleProp()\n\n if (this.pickerDate !== this.tableDate) {\n this.$emit('update:picker-date', this.tableDate)\n }\n this.setInputDate()\n },\n\n methods: {\n emitInput (newInput: string) {\n if (this.range) {\n if (this.multipleValue.length !== 1) {\n this.$emit('input', [newInput])\n } else {\n const output = [this.multipleValue[0], newInput]\n this.$emit('input', output)\n this.$emit('change', output)\n }\n return\n }\n\n const output = this.multiple\n ? (\n this.multipleValue.indexOf(newInput) === -1\n ? this.multipleValue.concat([newInput])\n : this.multipleValue.filter(x => x !== newInput)\n )\n : newInput\n\n this.$emit('input', output)\n this.multiple || this.$emit('change', newInput)\n },\n checkMultipleProp () {\n if (this.value == null) return\n const valueType = this.value.constructor.name\n const expected = this.isMultiple ? 'Array' : 'String'\n if (valueType !== expected) {\n consoleWarn(`Value must be ${this.isMultiple ? 'an' : 'a'} ${expected}, got ${valueType}`, this)\n }\n },\n isDateAllowed (value: string): boolean {\n return isDateAllowed(value, this.min, this.max, this.allowedDates)\n },\n yearClick (value: number) {\n this.inputYear = value\n if (this.type === 'month') {\n this.tableDate = `${value}`\n } else {\n this.tableDate = `${value}-${pad((this.tableMonth || 0) + 1)}`\n }\n this.internalActivePicker = 'MONTH'\n if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {\n this.$emit('input', this.inputDate)\n }\n },\n monthClick (value: string) {\n const [year, month] = value.split('-')\n\n this.inputYear = parseInt(year, 10)\n this.inputMonth = parseInt(month, 10) - 1\n\n if (this.type === 'date') {\n if (this.inputDay) {\n this.inputDay = Math.min(this.inputDay, daysInMonth(this.inputYear, this.inputMonth + 1))\n }\n\n this.tableDate = value\n this.internalActivePicker = 'DATE'\n if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {\n this.$emit('input', this.inputDate)\n }\n } else {\n this.emitInput(this.inputDate)\n }\n },\n dateClick (value: string) {\n const [year, month, day] = value.split('-')\n\n this.inputYear = parseInt(year, 10)\n this.inputMonth = parseInt(month, 10) - 1\n this.inputDay = parseInt(day, 10)\n\n this.emitInput(this.inputDate)\n },\n genPickerTitle (): VNode {\n return this.$createElement(VDatePickerTitle, {\n props: {\n date: this.value ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.value) : '',\n disabled: this.disabled,\n readonly: this.readonly,\n selectingYear: this.internalActivePicker === 'YEAR',\n year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),\n yearIcon: this.yearIcon,\n value: this.multipleValue[0],\n },\n slot: 'title',\n on: {\n 'update:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),\n },\n })\n },\n genTableHeader (): VNode {\n return this.$createElement(VDatePickerHeader, {\n props: {\n nextIcon: this.nextIcon,\n color: this.color,\n dark: this.dark,\n disabled: this.disabled,\n format: this.headerDateFormat,\n light: this.light,\n locale: this.locale,\n min: this.internalActivePicker === 'DATE' ? this.minMonth : this.minYear,\n max: this.internalActivePicker === 'DATE' ? this.maxMonth : this.maxYear,\n nextAriaLabel: this.internalActivePicker === 'DATE' ? this.nextMonthAriaLabel : this.nextYearAriaLabel,\n prevAriaLabel: this.internalActivePicker === 'DATE' ? this.prevMonthAriaLabel : this.prevYearAriaLabel,\n prevIcon: this.prevIcon,\n readonly: this.readonly,\n value: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,\n },\n on: {\n toggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),\n input: (value: string) => this.tableDate = value,\n },\n })\n },\n genDateTable (): VNode {\n return this.$createElement(VDatePickerDateTable, {\n props: {\n allowedDates: this.allowedDates,\n color: this.color,\n current: this.current,\n dark: this.dark,\n disabled: this.disabled,\n events: this.events,\n eventColor: this.eventColor,\n firstDayOfWeek: this.firstDayOfWeek,\n format: this.dayFormat,\n light: this.light,\n locale: this.locale,\n localeFirstDayOfYear: this.localeFirstDayOfYear,\n min: this.min,\n max: this.max,\n range: this.range,\n readonly: this.readonly,\n scrollable: this.scrollable,\n showAdjacentMonths: this.showAdjacentMonths,\n showWeek: this.showWeek,\n tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,\n value: this.value,\n weekdayFormat: this.weekdayFormat,\n },\n ref: 'table',\n on: {\n input: this.dateClick,\n 'update:table-date': (value: string) => this.tableDate = value,\n ...createItemTypeListeners(this, ':date'),\n },\n })\n },\n genMonthTable (): VNode {\n return this.$createElement(VDatePickerMonthTable, {\n props: {\n allowedDates: this.type === 'month' ? this.allowedDates : null,\n color: this.color,\n current: this.current ? sanitizeDateString(this.current, 'month') : null,\n dark: this.dark,\n disabled: this.disabled,\n events: this.type === 'month' ? this.events : null,\n eventColor: this.type === 'month' ? this.eventColor : null,\n format: this.monthFormat,\n light: this.light,\n locale: this.locale,\n min: this.minMonth,\n max: this.maxMonth,\n range: this.range,\n readonly: this.readonly && this.type === 'month',\n scrollable: this.scrollable,\n value: this.selectedMonths,\n tableDate: `${pad(this.tableYear, 4)}`,\n },\n ref: 'table',\n on: {\n input: this.monthClick,\n 'update:table-date': (value: string) => this.tableDate = value,\n ...createItemTypeListeners(this, ':month'),\n },\n })\n },\n genYears (): VNode {\n return this.$createElement(VDatePickerYears, {\n props: {\n color: this.color,\n format: this.yearFormat,\n locale: this.locale,\n min: this.minYear,\n max: this.maxYear,\n value: this.tableYear,\n },\n on: {\n input: this.yearClick,\n ...createItemTypeListeners(this, ':year'),\n },\n })\n },\n genPickerBody (): VNode {\n const children = this.internalActivePicker === 'YEAR' ? [\n this.genYears(),\n ] : [\n this.genTableHeader(),\n this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable(),\n ]\n\n return this.$createElement('div', {\n key: this.internalActivePicker,\n }, children)\n },\n setInputDate () {\n if (this.lastValue) {\n const array = this.lastValue.split('-')\n this.inputYear = parseInt(array[0], 10)\n this.inputMonth = parseInt(array[1], 10) - 1\n if (this.type === 'date') {\n this.inputDay = parseInt(array[2], 10)\n }\n } else {\n this.inputYear = this.inputYear || this.now.getFullYear()\n this.inputMonth = this.inputMonth == null ? this.inputMonth : this.now.getMonth()\n this.inputDay = this.inputDay || this.now.getDate()\n }\n },\n },\n\n render (): VNode {\n return this.genPicker('v-picker--date')\n },\n})\n","import { render, staticRenderFns } from \"./FormPanel.vue?vue&type=template&id=34e88ace&scoped=true\"\nimport script from \"./FormPanel.vue?vue&type=script&lang=js\"\nexport * from \"./FormPanel.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"34e88ace\",\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCard } from 'vuetify/lib/components/VCard';\nimport { VDatePicker } from 'vuetify/lib/components/VDatePicker';\nimport { VMenu } from 'vuetify/lib/components/VMenu';\nimport { VRadio } from 'vuetify/lib/components/VRadioGroup';\nimport { VRadioGroup } from 'vuetify/lib/components/VRadioGroup';\ninstallComponents(component, {VCard,VDatePicker,VMenu,VRadio,VRadioGroup})\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('fragment',[_c('h2',{staticClass:\"mb-2\"},[_vm._v(\"Spacing\")]),_c('div',[_c('div',[_vm._v(\" Your current breakpoint: \"),_c('span',{staticClass:\"dynamic-value\"},[_vm._v(_vm._s(_vm.$vuetify.breakpoint.name))])]),_c('div',[_vm._v(\" Your current viewport width: \"),_c('span',{staticClass:\"dynamic-value\"},[_vm._v(_vm._s(_vm.$vuetify.breakpoint.width))])]),_c('h3',{staticClass:\"mt-4 mb-1\"},[_vm._v(\"Gap Variables Values\")]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-xxsmall: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-xxsmall\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-xxsmall)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-xsmall: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-xsmall\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-xsmall)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-small: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-small\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-small)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-large: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-large\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-large)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-xlarge: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-xlarge\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-xlarge)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container\"},[_c('div',[_vm._v(\"--gap-xxlarge: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-xxlarge\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-xxlarge)\",\"background\":\"var(--color-primary)\"}})]),_c('div',{staticClass:\"gap-container mt-8\"},[_c('div',[_vm._v(\"--gap-page-side: \"),_c('css-var-value',{attrs:{\"css-var\":\"--gap-page-side\"}})],1),_c('div',{staticStyle:{\"height\":\"var(--gap-page-side)\",\"background\":\"var(--color-primary)\"}})])]),_c('div',{staticClass:\"demo-container\"},[_c('div',{staticClass:\"intro-box\"},[_c('h1',[_vm._v(\"Spacing Variables Demo\")]),_c('p',{staticClass:\"h-heading-h4\"},[_vm._v(\"Subheader Text ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")])]),_c('div',{staticClass:\"hello-card-box\"},[_c('div',{staticStyle:{\"width\":\"50%\",\"min-width\":\"300px\"}},[_c('h2',[_vm._v(\"Your Hello Card\")]),_c('p',[_vm._v(\"You need to apply for your Hello Visa card. All your balances will be automatically transferred and you will be able to use them in stores with the card as you usually do with your credit or debit card.\")]),_c('h-btn',{attrs:{\"color\":\"primary\",\"inverted\":\"\"}},[_vm._v(\"Get my card\")])],1)]),_c('div',{staticClass:\"border-box\"},[_c('h2',[_vm._v(\"Border Box Title\")]),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")]),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")])]),_c('h2',{staticClass:\"full-width-header\"},[_vm._v(\"Here is a liste of stuff\")]),_c('ul',{staticClass:\"demo-list\"},[_c('li',{staticClass:\"demo-list-item\"},[_c('h3',[_vm._v(\"First item of the list\")]),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")])]),_c('li',{staticClass:\"demo-list-item\"},[_c('h3',[_vm._v(\"Second item of the list\")]),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")])]),_c('li',{staticClass:\"demo-list-item\"},[_c('h3',[_vm._v(\"Third item of the list\")]),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")])])]),_c('h2',{staticClass:\"full-width-header\"},[_vm._v(\"Here is a grid of cards\")]),_c('div',{staticClass:\"demo-grid\"},[_c('div',{staticClass:\"demo-card\"},[_c('img',{attrs:{\"src\":\"https://via.placeholder.com/400x180.png?text=Placeholder+Image\"}}),_c('div',{staticClass:\"demo-card-content\"},[_c('div',{staticClass:\"demo-card-inner\"},[_c('h3',[_vm._v(\"Card Title\")]),_c('div',{staticClass:\"content-gap\"}),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")]),_c('div',{staticClass:\"content-gap\"}),_c('h-btn',{attrs:{\"block\":\"\"}},[_vm._v(\"See offer\")])],1)])]),_c('div',{staticClass:\"demo-card\"},[_c('img',{attrs:{\"src\":\"https://via.placeholder.com/400x180.png?text=Placeholder+Image\"}}),_c('div',{staticClass:\"demo-card-content\"},[_c('div',{staticClass:\"demo-card-inner\"},[_c('h3',[_vm._v(\"Card Title\")]),_c('div',{staticClass:\"content-gap\"}),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")]),_c('div',{staticClass:\"content-gap\"}),_c('h-btn',{attrs:{\"block\":\"\"}},[_vm._v(\"See offer\")])],1)])]),_c('div',{staticClass:\"demo-card\"},[_c('img',{attrs:{\"src\":\"https://via.placeholder.com/400x180.png?text=Placeholder+Image\"}}),_c('div',{staticClass:\"demo-card-content\"},[_c('div',{staticClass:\"demo-card-inner\"},[_c('h3',[_vm._v(\"Card Title\")]),_c('div',{staticClass:\"content-gap\"}),_c('p',[_vm._v(\"Lorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!\")]),_c('div',{staticClass:\"content-gap\"}),_c('h-btn',{attrs:{\"block\":\"\"}},[_vm._v(\"See offer\")])],1)])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n
Spacing
\n\n
\n\n \n Your current breakpoint: {{ $vuetify.breakpoint.name }}\n
\n \n Your current viewport width: {{ $vuetify.breakpoint.width }}\n
\n\n Gap Variables Values
\n\n
\n --gap-xxsmall:
\n \n \n
\n --gap-xsmall:
\n \n \n
\n --gap-small:
\n \n \n
\n --gap:
\n \n \n
\n --gap-large:
\n \n \n
\n --gap-xlarge:
\n \n \n
\n\n --gap-xxlarge:
\n \n \n
\n --gap-page-side:
\n \n \n
\n \n
\n\n Spacing Variables Demo
\nSubheader Text ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n\n
\n\n \n Get my card \n
\n Your Hello Card
\nYou need to apply for your Hello Visa card. All your balances will be automatically transferred and you will be able to use them in stores with the card as you usually do with your credit or debit card.
\n\n
\n\n Border Box Title
\nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\nHere is a liste of stuff
\n- \n
- \n
First item of the list
\nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n - \n
Second item of the list
\nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n - \n
Third item of the list
\nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n
Here is a grid of cards
\n\n
\n \n ![](\"https://via.placeholder.com/400x180.png?text=Placeholder+Image\")
\n
\n \n \n
\n \n See offer \n
\n Card Title
\n \nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n\n \n
\n \n \n
\n \n See offer \n
\n Card Title
\n \nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n\n \n
\n \n \n
\n \n See offer \n
\n Card Title
\n \nLorem ipsum dolor sit amet. Non unde incidunt et repellat dolore aut iste obcaecati ea sunt nulla et nemo dolores. Et soluta saepe et commodi provident non mollitia eius et error!
\n \n\n \n \n
\n\n\n\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TypographyPanel.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TypographyPanel.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./TypographyPanel.vue?vue&type=template&id=24bd7026\"\nimport script from \"./TypographyPanel.vue?vue&type=script&lang=js\"\nexport * from \"./TypographyPanel.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCard } from 'vuetify/lib/components/VCard';\ninstallComponents(component, {VCard})\n","\n Typography
\n\n Your current breakpoint: {{ $vuetify.breakpoint.name }}\n
\n \n Your current viewport width: {{ $vuetify.breakpoint.width }}\n
\n\n --HEADERS--
\n\nThis is the H1 typography.
\nAutomatically applied to H1 elements or with the \"h-heading-h1\" class.
\nAt your current breakpoint, it has a font-size of
This is the H2 typography.
\nAutomatically applied to H2 elements or with the \"h-heading-h2\" class.
\nAt your current breakpoint, it has a font-size of
This is the H3 typography.
\nAutomatically applied to H3 elements or with the \"h-heading-h3\" class.
\nAt your current breakpoint, it has a font-size of
This is the H4 typography.
\nAutomatically applied to H3 elements or with the \"h-heading-h4\" class.
\nAt your current breakpoint, it has a font-size of
--LABELS--
\n\nThis is the Label 1 typography.
\nApplied with the \"h-label-1\" class.
\nAt your current breakpoint, it has a font-size of
This is the Label 2 typography.
\nApplied with the \"h-label-2\" class.
\nAt your current breakpoint, it has a font-size of
This is the Label 3 - SB typography.
\nApplied with the \"h-label-3-sb\" class.
\nAt your current breakpoint, it has a font-size of
This is the Label 3 - Bold typography.
\nApplied with the \"h-label-3-bold\" class.
\nAt your current breakpoint, it has a font-size of
This is the Label 4 - Bold typography.
\nApplied with the \"h-label-4-bold\" class.
\nAt your current breakpoint, it has a font-size of
This is the Label 4 - Med Italic typography.
\nApplied with the \"h-label-4-med-italic\" class.
\nAt your current breakpoint, it has a font-size of
--Text--
\n\nThis is the Text 1 typography.
\nApplied with the \"h-text-1\" class.
\nAt your current breakpoint, it has a font-size of
This is the Text 2 typography.
\nApplied with the \"h-text-2\" class.
\nAt your current breakpoint, it has a font-size of
This is the Text 3 typography.
\nApplied with the \"h-text-3\" class.
\nAt your current breakpoint, it has a font-size of
This is the Text 4 typography.
\nApplied with the \"h-text-4\" class.
\nAt your current breakpoint, it has a font-size of
--OTHER--
\n\nThis is the Caption typography.
\nApplied with the \"h-caption\" class.
\nAt your current breakpoint, it has a font-size of
\n \n Colors \n Buttons \n Form Elements \n Spacing \n Typography \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n
\n\n\n\n\n\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StyleguideView.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StyleguideView.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./StyleguideView.vue?vue&type=template&id=4e179525&scoped=true\"\nimport script from \"./StyleguideView.vue?vue&type=script&lang=js\"\nexport * from \"./StyleguideView.vue?vue&type=script&lang=js\"\nimport style0 from \"./StyleguideView.vue?vue&type=style&index=0&id=4e179525&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"4e179525\",\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VTab } from 'vuetify/lib/components/VTabs';\nimport { VTabItem } from 'vuetify/lib/components/VTabs';\nimport { VTabs } from 'vuetify/lib/components/VTabs';\nimport { VTabsItems } from 'vuetify/lib/components/VTabs';\ninstallComponents(component, {VTab,VTabItem,VTabs,VTabsItems})\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpacingPanel.vue?vue&type=style&index=0&id=0033f016&prod&lang=scss&scoped=true\"","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorPanel.vue?vue&type=style&index=0&id=6a186725&prod&lang=scss&scoped=true\""],"sourceRoot":""}