@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.91

package/src/stories/{Introduction.mdx → Introduction.stories.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from '@storybook/addon-docs';
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';
@@ -10,104 +10,7 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Policy Studio" />
 
-#Welcome to UI Explorer
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
-
-<style>
-{`
+<style>{`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -207,5 +110,102 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     font-size: 12px;
     display: inline-block;
   }
-`}
-</style>
+
+  
+`}</style>
+
+# Welcome to UI Explorer
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/{RadioButtonSimple.stories.ts → RadioButtonSimple.stories.js}

@@ -5,7 +5,7 @@ export default {
     component: PsRadioButtonSimple,
   }
 
-  const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
+  const defaultTemplate = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsRadioButtonSimple },
     data: () => ({

package/src/stories/{Toggle.stories.ts → Toggle.stories.js}

@@ -34,7 +34,7 @@ window.addEventListener('click', (ev) => {
 })
 
 function copyText(textToCopy) {
-  const myTemporaryInputElement = document.createElement('input')
+  var myTemporaryInputElement = document.createElement('input')
   myTemporaryInputElement.type = 'text'
   myTemporaryInputElement.value = textToCopy
   document.body.appendChild(myTemporaryInputElement)

package/src/stories/{Tooltip.stories.ts → Tooltip.stories.js}

@@ -8,7 +8,7 @@ export default {
     subcomponents: {PsRichTooltip, PsDialogTooltip}
 }
 
-const TemplateDialog = (args:any, {argTypes}:{argTypes:any}) => ({
+const TemplateDialog = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: {PsDialogTooltip},
     template: `
@@ -41,7 +41,7 @@ const TemplateDialog = (args:any, {argTypes}:{argTypes:any}) => ({
     `,
 })
 
-const TemplateRich = (args:any, {argTypes}:{argTypes:any})=>({
+const TemplateRich = (args,{argTypes})=>({
     props: Object.keys(argTypes),
     components: {PsRichTooltip},
     template: `
@@ -74,7 +74,7 @@ const TemplateRich = (args:any, {argTypes}:{argTypes:any})=>({
 `
 })
 
-const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
+const TemplateDefault = (args, {argTypes}) => ({
 props: Object.keys(argTypes),
 components: {PsTooltip},
 template: `

package/src/stories/{Typography.mdx → Typography.stories.mdx}

@@ -1,111 +1,8 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Typography" />
 
-# Typography
-Typography serves to present your design and content as clearly and efficiently as possible.
-
-## 1. Introduction
-We use only one font for all product experiences. This ensures that the UI is optimized to be highly readable, perform well and not cause disorientation as you browse the system.
-
-### 1.1. Font family
-We use the Lato typographic family: https://fonts.google.com/specimen/Lato
-
-### 1.2. Font sizes
-Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.
-
- <table>
-  <tr>
-    <td class="psui-w-48">
-      <p class="psui-font-bold">Headline 1</p>
-      psui-text-h1
-    </td>
-    <td class="psui-text-h1 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h1">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Headline 2</p>
-      psui-text-h2
-    </td>
-    <td class="psui-text-h2 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h2">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Headline 3</p>
-      psui-text-h3
-    </td>
-    <td class="psui-text-h3 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h3">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Headline 4</p>
-      psui-text-h4
-    </td>
-    <td class="psui-text-h4 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h4">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Headline 5</p>
-      psui-text-h5
-    </td>
-    <td class="psui-text-h5 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h5">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold" >Headline 6</p>
-      psui-text-h6
-    </td>
-    <td class="psui-text-h6 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h6">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Paragraph</p>
-      psui-text-p
-    </td>
-    <td class="psui-text-p psui-cursor-pointer click-to-copy" data-to-copy="psui-text-p">
-      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.    
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">Small</p>
-      psui-text-small
-    </td>
-    <td class="psui-text-small psui-cursor-pointer click-to-copy" data-to-copy="psui-text-small">
-      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <p class="psui-font-bold">XSmall</p>
-      psui-text-xsmall
-    </td>
-    <td class="psui-text-xsmall psui-cursor-pointer click-to-copy" data-to-copy="psui-text-xsmall">
-      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
-    </td>
-  </tr>
-  <tr>
-    <td class="psui-flex psui-flex-col">
-      <span class="psui-font-bold">Accent</span>
-      <span>psui-text-accent</span>
-      <span>psui-uppercase</span>
-      <span>psui-font-bold</span>
-    </td>
-    <td class="psui-text-accent psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accent psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
-  </tr>
-  <tr>
-    <td class="psui-flex psui-flex-col">
-      <span class="psui-font-bold">Accent Small</span>
-      <span>psui-text-accentSmall</span>
-      <span>psui-uppercase</span>
-      <span>psui-font-bold</span>
-    </td>
-    <td class="psui-text-accentSmall psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accentSmall psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
-  </tr>
-</table> 
-
-<style>
-{`
+<style>{`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -205,8 +102,109 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
     font-size: 12px;
     display: inline-block;
   }
-`}
-</style>
 
+  
+`}</style>
+
+# Typography
+Typography serves to present your design and content as clearly and efficiently as possible.
+
+## 1. Introduction
+We use only one font for all product experiences. This ensures that the UI is optimized to be highly readable, perform well and not cause disorientation as you browse the system.
+
+### 1.1. Font family
+We use the Lato typographic family: https://fonts.google.com/specimen/Lato
+
+### 1.2. Font sizes
+Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.
 
+ <table>
+  <tr>
+    <td class="psui-w-48">
+      <p class="psui-font-bold">Headline 1</p>
+      psui-text-h1
+    </td>
+    <td class="psui-text-h1 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h1">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 2</p>
+      psui-text-h2
+    </td>
+    <td class="psui-text-h2 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h2">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 3</p>
+      psui-text-h3
+    </td>
+    <td class="psui-text-h3 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h3">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 4</p>
+      psui-text-h4
+    </td>
+    <td class="psui-text-h4 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h4">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 5</p>
+      psui-text-h5
+    </td>
+    <td class="psui-text-h5 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h5">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold" >Headline 6</p>
+      psui-text-h6
+    </td>
+    <td class="psui-text-h6 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h6">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Paragraph</p>
+      psui-text-p
+    </td>
+    <td class="psui-text-p psui-cursor-pointer click-to-copy" data-to-copy="psui-text-p">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.    
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Small</p>
+      psui-text-small
+    </td>
+    <td class="psui-text-small psui-cursor-pointer click-to-copy" data-to-copy="psui-text-small">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">XSmall</p>
+      psui-text-xsmall
+    </td>
+    <td class="psui-text-xsmall psui-cursor-pointer click-to-copy" data-to-copy="psui-text-xsmall">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
+    </td>
+  </tr>
+  <tr>
+    <td class="psui-flex psui-flex-col">
+      <span class="psui-font-bold">Accent</span>
+      <span>psui-text-accent</span>
+      <span>psui-uppercase</span>
+      <span>psui-font-bold</span>
+    </td>
+    <td class="psui-text-accent psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accent psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td class="psui-flex psui-flex-col">
+      <span class="psui-font-bold">Accent Small</span>
+      <span>psui-text-accentSmall</span>
+      <span>psui-uppercase</span>
+      <span>psui-font-bold</span>
+    </td>
+    <td class="psui-text-accentSmall psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accentSmall psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
+  </tr>
+</table> 
 

package/src/util/{GeneralFunctions.ts → GeneralFunctions.js}

@@ -1,9 +1,9 @@
 export const randomString = (length) => {
-  let result = ''
-  const characters =
+  var result = ''
+  var characters =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  const charactersLength = characters.length
-  for (let i = 0; i < length; i++) {
+  var charactersLength = characters.length
+  for (var i = 0; i < length; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength))
   }
   return result

package/src/util/{imageLoader.ts → imageLoader.js}

@@ -1,14 +1,14 @@
 export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
   return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    let notifiedNotComputable = false
+    var xhr = new XMLHttpRequest()
+    var notifiedNotComputable = false
 
     xhr.open('GET', imageUrl, true)
     xhr.responseType = 'arraybuffer'
 
     xhr.onprogress = (ev) => {
       if (ev.lengthComputable) {
-        const progress = parseInt((ev.loaded / ev.total) * 100)
+        let progress = parseInt((ev.loaded / ev.total) * 100)
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
@@ -30,11 +30,11 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
         if(!returnsBase64) {
           resolve()
         } else {
-          const options = {}
-          const headers = xhr.getAllResponseHeaders()
-          const mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
+          var options = {}
+          var headers = xhr.getAllResponseHeaders()
+          var mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
           if (mime && mime[1]) options.type = mime[1]
-          const blob = new Blob([xhr.response], options)
+          var blob = new Blob([xhr.response], options)
           resolve(window.URL.createObjectURL(blob))
         }
       }

package/tailwind.config.js

@@ -1,16 +1,7 @@
-/** @type {import('tailwindcss').Config} */
-
 module.exports = {
   prefix: 'psui-',
-  content: [
-    './index.html',
-    './src/**/*.vue',
-    './src/**/*.js',
-    './src/**/*.ts',
-    './src/**/*.jsx',
-    './src/**/*.tsx',
-  ],
-  darkMode: 'media', // or 'media' or 'class'
+  purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     colors: {
       'white': '#ffffff ',

package/.eslintignore

@@ -1 +0,0 @@
-.storybook

package/.storybook/PolicyStudio.ts

@@ -1,11 +0,0 @@
-import { create } from '@storybook/theming'
-import PolicyStudioUiLogo from '../src/assets/images/policy-studio.svg'
-
-
-export default create({
-  base: 'light',
-  brandTitle: 'Policy Studio UI Vue',
-  brandUrl: 'https://policystudio.co/',
-  brandImage: PolicyStudioUiLogo,
-  brandTarget: '_blank',
-});

package/.storybook/eventBus.ts

@@ -1,26 +0,0 @@
-// this was a vue2 syntax
-// import Vue from 'vue';
-// export const eventBus = new Vue();
-
-// import { createApp } from 'vue';
-
-// export const app = createApp({});
-// const emitter = app.config.globalProperties.$emitter = {};
-
-// export const eventBus = {
-//   on(event, callback) {
-//     if (!emitter[event]) {
-//       emitter[event] = [];
-//     }
-//     emitter[event].push(callback);
-//   },
-//   emit(event, ...args) {
-//     if (emitter[event]) {
-//       emitter[event].forEach(callback => {
-//         callback(...args);
-//       });
-//     }
-//   },
-// };
-
-// app.mount('#app');

package/.storybook/main.ts

@@ -1,21 +0,0 @@
-/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/vue3-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/manager.ts

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/manager-api'
-
-import PolicyStudio from './PolicyStudio'
-
-addons.setConfig({
-  theme: PolicyStudio,
-});

package/scripts/kill-port.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Find the process using port 3000
-PROCESS_ID=$(lsof -t -i:6006)
-
-# Check if a process is using the port
-if [ -n "$PROCESS_ID" ]; then
-  echo "Killing process on port 6006 (PID: $PROCESS_ID)"
-  kill -9 $PROCESS_ID
-else
-  echo "Port 6006 is not in use"
-fi

package/src/App.vue

@@ -1,30 +0,0 @@
-<template>
-  <img
-    alt="Vue logo"
-    src="./assets/logo.png"
-  >
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-})
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>