@operato/shell 2.0.0-alpha.8 → 2.0.0-alpha.81

package/dist/src/entries/public/home.d.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 export declare class HomePage extends LitElement {
     static styles: import("lit").CSSResult;
@@ -8,7 +7,7 @@ export declare class HomePage extends LitElement {
         title: string;
         description: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     get applicationMeta(): {
         icon: string;
         title: string;

package/dist/src/entries/public/home.js

@@ -1,13 +1,12 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon-button';
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 let HomePage = class HomePage extends LitElement {
     render() {
-        var { icon, title, description } = this.applicationMeta;
+        var { title, description } = this.applicationMeta;
         return html `
-      <mwc-icon-button home icon="home" @click=${() => (window.location.href = '/')}></mwc-icon-button>
+      <md-icon home @click=${() => (window.location.href = '/')}>home</md-icon>
 
       <div message>
         <strong>${title}</strong>
@@ -37,7 +36,7 @@ HomePage.styles = css `
       display: block;
       position: relative;
 
-      --mdc-theme-primary: white;
+      --md-theme-primary: white;
     }
 
     [home] {
@@ -54,17 +53,19 @@ HomePage.styles = css `
       color: #fff;
       text-align: center;
       font-size: 20px;
-    }
-    [message] strong {
-      display: block;
-      font-size: 2.5rem;
-    }
-    [message] img {
-      width: 450px;
-      max-width: 90%;
-      display: block;
-      margin: auto;
-      margin-top: 20px;
+
+      strong {
+        display: block;
+        font-size: 2.5rem;
+      }
+
+      img {
+        width: 450px;
+        max-width: 90%;
+        display: block;
+        margin: auto;
+        margin-top: 20px;
+      }
     }
 
     @media screen and (max-width: 460px) {

package/dist/src/entries/public/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../../src/entries/public/home.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IA0DtC,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;iDACkC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;;;kBAGjE,KAAK;UACb,WAAW;;;KAGhB,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAoB,CAAA;YACxF,IAAI,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAoB,CAAA;YAC1F,IAAI,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAoB,CAAA;YAEvG,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AArFM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDlB,AAjDY,CAiDZ;AAlDU,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuFpB","sourcesContent":["import '@material/mwc-icon-button'\nimport '@material/mwc-button'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('home-page')\nexport class HomePage extends LitElement {\n  static styles = css`\n    :host {\n      background-color: var(--main-section-background-color);\n\n      display: block;\n      position: relative;\n\n      --mdc-theme-primary: white;\n    }\n\n    [home] {\n      position: absolute;\n      left: 20px;\n      top: 20px;\n      font-size: 2em;\n      color: white;\n    }\n\n    [message] {\n      background-color: rgba(50, 66, 97, 0.8);\n      padding: 60px 50px 0 50px;\n      color: #fff;\n      text-align: center;\n      font-size: 20px;\n    }\n    [message] strong {\n      display: block;\n      font-size: 2.5rem;\n    }\n    [message] img {\n      width: 450px;\n      max-width: 90%;\n      display: block;\n      margin: auto;\n      margin-top: 20px;\n    }\n\n    @media screen and (max-width: 460px) {\n      [message] {\n        padding: 60px 30px 0 30px;\n        color: #fff;\n        text-align: center;\n        font-size: 15px;\n      }\n\n      [message] strong {\n        font-size: 1.6rem;\n      }\n    }\n  `\n\n  _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <mwc-icon-button home icon=\"home\" @click=${() => (window.location.href = '/')}></mwc-icon-button>\n\n      <div message>\n        <strong>${title}</strong>\n        ${description}\n        <img src=\"/assets/images/home.png\" />\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink = document.querySelector('link[rel=\"application-icon\"]') as HTMLLinkElement\n      var titleMeta = document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement\n      var descriptionMeta = document.querySelector('meta[name=\"application-description\"]') as HTMLMetaElement\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../../src/entries/public/home.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAG1C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IA4DtC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEjD,OAAO,IAAI,CAAA;6BACc,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;;;kBAG7C,KAAK;UACb,WAAW;;;KAGhB,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAoB,CAAA;YACxF,IAAI,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAoB,CAAA;YAC1F,IAAI,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAoB,CAAA;YAEvG,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAvFM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDlB,AAnDY,CAmDZ;AApDU,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyFpB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('home-page')\nexport class HomePage extends LitElement {\n  static styles = css`\n    :host {\n      background-color: var(--main-section-background-color);\n\n      display: block;\n      position: relative;\n\n      --md-theme-primary: white;\n    }\n\n    [home] {\n      position: absolute;\n      left: 20px;\n      top: 20px;\n      font-size: 2em;\n      color: white;\n    }\n\n    [message] {\n      background-color: rgba(50, 66, 97, 0.8);\n      padding: 60px 50px 0 50px;\n      color: #fff;\n      text-align: center;\n      font-size: 20px;\n\n      strong {\n        display: block;\n        font-size: 2.5rem;\n      }\n\n      img {\n        width: 450px;\n        max-width: 90%;\n        display: block;\n        margin: auto;\n        margin-top: 20px;\n      }\n    }\n\n    @media screen and (max-width: 460px) {\n      [message] {\n        padding: 60px 30px 0 30px;\n        color: #fff;\n        text-align: center;\n        font-size: 15px;\n      }\n\n      [message] strong {\n        font-size: 1.6rem;\n      }\n    }\n  `\n\n  _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  render() {\n    var { title, description } = this.applicationMeta\n\n    return html`\n      <md-icon home @click=${() => (window.location.href = '/')}>home</md-icon>\n\n      <div message>\n        <strong>${title}</strong>\n        ${description}\n        <img src=\"/assets/images/home.png\" />\n      </div>\n    `\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink = document.querySelector('link[rel=\"application-icon\"]') as HTMLLinkElement\n      var titleMeta = document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement\n      var descriptionMeta = document.querySelector('meta[name=\"application-description\"]') as HTMLMetaElement\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -3,3 +3,4 @@ export * from './store';
 export * from './actions';
 export * from './app/pages/page-view';
 export * from './object-store';
+export * from './custom-alert';

package/dist/src/index.js

@@ -3,4 +3,5 @@ export * from './store';
 export * from './actions';
 export * from './app/pages/page-view';
 export * from './object-store';
+export * from './custom-alert';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './types'\nexport * from './store'\nexport * from './actions'\nexport * from './app/pages/page-view'\nexport * from './object-store'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './types'\nexport * from './store'\nexport * from './actions'\nexport * from './app/pages/page-view'\nexport * from './object-store'\nexport * from './custom-alert'\n"]}

package/dist/src/store.js

@@ -7,6 +7,14 @@ import busy from './reducers/busy';
 // Sets up a Chrome extension for time travel debugging.
 // See https://github.com/zalmoxisus/redux-devtools-extension for more information.
 const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+// Only for providing test environment - combineReducers 에서 process.env.NODE_ENV를 접근하기 때문에.
+if (typeof window.process == 'undefined') {
+    window.process = {
+        env: {
+            NODE_ENV: JSON.stringify('development')
+        }
+    };
+}
 export const store = createStore(state => state, devCompose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
 // Initially loaded reducers.
 store.addReducers({

package/dist/src/store.js.map

@@ -1 +1 @@
-{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAa,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAU,eAAe,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAS,MAAM,OAAO,CAAA;AAC7F,OAAO,KAAK,MAAM,aAAa,CAAA;AAE/B,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,KAAK,MAAM,kBAAkB,CAAA;AACpC,OAAO,IAAI,MAAM,iBAAiB,CAAA;AAMlC,wDAAwD;AACxD,mFAAmF;AACnF,MAAM,UAAU,GAAG,MAAM,CAAC,oCAAoC,IAAI,OAAO,CAAA;AAEzE,MAAM,CAAC,MAAM,KAAK,GAA4C,WAAW,CACvE,KAAK,CAAC,EAAE,CAAC,KAAK,EACd,UAAU,CAAC,mBAAmB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CACzE,CAAA;AAED,6BAA6B;AAC7B,KAAK,CAAC,WAAW,CAAC;IAChB,GAAG;IACH,KAAK;IACL,IAAI;CACL,CAAC,CAAA","sourcesContent":["import { lazyReducerEnhancer, LazyStore } from 'pwa-helpers/lazy-reducer-enhancer.js'\nimport { Action, applyMiddleware, combineReducers, compose, createStore, Store } from 'redux'\nimport thunk from 'redux-thunk'\n\nimport app from './reducers/app'\nimport route from './reducers/route'\nimport busy from './reducers/busy'\n\ndeclare global {\n  var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any\n}\n\n// Sets up a Chrome extension for time travel debugging.\n// See https://github.com/zalmoxisus/redux-devtools-extension for more information.\nconst devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\n\nexport const store: Store<unknown, Action<any>> & LazyStore = createStore(\n  state => state,\n  devCompose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))\n)\n\n// Initially loaded reducers.\nstore.addReducers({\n  app,\n  route,\n  busy\n})\n"]}
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAa,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAU,eAAe,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAS,MAAM,OAAO,CAAA;AAC7F,OAAO,KAAK,MAAM,aAAa,CAAA;AAE/B,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,KAAK,MAAM,kBAAkB,CAAA;AACpC,OAAO,IAAI,MAAM,iBAAiB,CAAA;AAMlC,wDAAwD;AACxD,mFAAmF;AACnF,MAAM,UAAU,GAAG,MAAM,CAAC,oCAAoC,IAAI,OAAO,CAAA;AAEzE,2FAA2F;AAC3F,IAAI,OAAO,MAAM,CAAC,OAAO,IAAI,WAAW,EAAE,CAAC;IACzC,MAAM,CAAC,OAAO,GAAG;QACf,GAAG,EAAE;YACH,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;SACxC;KACK,CAAA;AACV,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAA4C,WAAW,CACvE,KAAK,CAAC,EAAE,CAAC,KAAK,EACd,UAAU,CAAC,mBAAmB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CACzE,CAAA;AAED,6BAA6B;AAC7B,KAAK,CAAC,WAAW,CAAC;IAChB,GAAG;IACH,KAAK;IACL,IAAI;CACL,CAAC,CAAA","sourcesContent":["import { lazyReducerEnhancer, LazyStore } from 'pwa-helpers/lazy-reducer-enhancer.js'\nimport { Action, applyMiddleware, combineReducers, compose, createStore, Store } from 'redux'\nimport thunk from 'redux-thunk'\n\nimport app from './reducers/app'\nimport route from './reducers/route'\nimport busy from './reducers/busy'\n\ndeclare global {\n  var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any\n}\n\n// Sets up a Chrome extension for time travel debugging.\n// See https://github.com/zalmoxisus/redux-devtools-extension for more information.\nconst devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\n\n// Only for providing test environment - combineReducers 에서 process.env.NODE_ENV를 접근하기 때문에.\nif (typeof window.process == 'undefined') {\n  window.process = {\n    env: {\n      NODE_ENV: JSON.stringify('development')\n    }\n  } as any\n}\n\nexport const store: Store<unknown, Action<any>> & LazyStore = createStore(\n  state => state,\n  devCompose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))\n)\n\n// Initially loaded reducers.\nstore.addReducers({\n  app,\n  route,\n  busy\n})\n"]}

package/dist/stories/app.stories.d.ts

@@ -0,0 +1,22 @@
+import '@material/web/icon/icon.js';
+import { TemplateResult } from 'lit';
+import '../src/app/app.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        label: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    label?: string;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/app.stories.js

@@ -0,0 +1,38 @@
+import '@material/web/icon/icon.js';
+import { html } from 'lit';
+import '../src/app/app.js';
+export default {
+    title: 'things-app',
+    component: 'things-app',
+    argTypes: {
+        label: { control: 'string' }
+    }
+};
+const Template = ({ label = '' }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+      background-color: white;
+    }
+  </style>
+
+  <things-app></things-app>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    label: 'common header styles'
+};
+//# sourceMappingURL=app.stories.js.map

package/dist/stories/app.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.stories.js","sourceRoot":"","sources":["../../stories/app.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,mBAAmB,CAAA;AAE1B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBnE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport '../src/app/app.js'\n\nexport default {\n  title: 'things-app',\n  component: 'things-app',\n  argTypes: {\n    label: { control: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    body {\n      background-color: white;\n    }\n  </style>\n\n  <things-app></things-app>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}