@operato/styles 9.0.0-beta.6 → 9.0.1

package/dist/stories/button-container-styles.stories.js

@@ -1,77 +0,0 @@
-import '@material/web/icon/icon.js';
-import { ButtonContainerStyles } from '../src/button-container-styles.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'button-container-styles-pure',
-    component: 'div',
-    argTypes: {}
-};
-const Template = ({}) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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 {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .container {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    ${MDTypeScaleStyles.cssText}
-    ${ButtonContainerStyles.cssText}
-  </style>
-
-  <div class="container md-typescale-body-medium">
-    <div class="button-container" style="background-color: white;">
-      <button raised><md-icon>save</md-icon>save</button>
-      <button outlined><md-icon>launch</md-icon>remove</button>
-      <button danger><md-icon>delete</md-icon>delete</button>
-    </div>
-
-    <div class="button-container" style="background-color: white;">
-      <button danger><md-icon>cancel</md-icon>cancel</button>
-      <button><md-icon>done</md-icon>confirm</button>
-    </div>
-
-    <div class="button-container" style="background-color: white;margin-left: unset;">
-      <button danger><md-icon>restart_alt</md-icon>reset</button>
-      <div filler></div>
-      <button danger><md-icon>cancel</md-icon>cancel</button>
-      <button><md-icon>done</md-icon>confirm</button>
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=button-container-styles.stories.js.map

package/dist/stories/button-container-styles.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-container-styles.stories.js","sourceRoot":"","sources":["../../stories/button-container-styles.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyClD,iBAAiB,CAAC,OAAO;MACzB,qBAAqB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBlC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport { ButtonContainerStyles } from '../src/button-container-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'button-container-styles-pure',\n  component: 'div',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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      width: 100%;\n      height: 500px;\n      text-align: center;\n\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .container {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    ${MDTypeScaleStyles.cssText}\n    ${ButtonContainerStyles.cssText}\n  </style>\n\n  <div class=\"container md-typescale-body-medium\">\n    <div class=\"button-container\" style=\"background-color: white;\">\n      <button raised><md-icon>save</md-icon>save</button>\n      <button outlined><md-icon>launch</md-icon>remove</button>\n      <button danger><md-icon>delete</md-icon>delete</button>\n    </div>\n\n    <div class=\"button-container\" style=\"background-color: white;\">\n      <button danger><md-icon>cancel</md-icon>cancel</button>\n      <button><md-icon>done</md-icon>confirm</button>\n    </div>\n\n    <div class=\"button-container\" style=\"background-color: white;margin-left: unset;\">\n      <button danger><md-icon>restart_alt</md-icon>reset</button>\n      <div filler></div>\n      <button danger><md-icon>cancel</md-icon>cancel</button>\n      <button><md-icon>done</md-icon>confirm</button>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/common-header-styles-actions.stories.d.ts

@@ -1,22 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/context/ox-context-page-toolbar.js';
-import { TemplateResult } from 'lit';
-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/common-header-styles-actions.stories.js

@@ -1,101 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/context/ox-context-page-toolbar.js';
-import { CommonHeaderStyles } from '../src/common-header-styles.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'common-header-styles-actions',
-    component: 'div',
-    argTypes: {
-        label: { control: 'string' }
-    }
-};
-const Template = ({ label = '' }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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 {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .container {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-medium);
-    }
-
-    ${MDTypeScaleStyles.cssText}
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <div class="container md-typescale-body-medium">
-    <div class="header">
-      <div class="title">${label}</div>
-
-      <div class="filters"><label>Filter</label><input type="text" /></div>
-
-      <ox-context-page-toolbar
-        class="actions"
-        .context=${{
-    exportable: {
-    // name: i18next.t('title.data-set list'),
-    // data: this.exportHandler.bind(this)
-    },
-    importable: {
-    // handler: this.importHandler.bind(this)
-    },
-    actions: [
-        {
-            title: 'save',
-            // action: this._updateDataSet.bind(this),
-            icon: 'save'
-        },
-        {
-            title: 'copy',
-            // action: this._copyDataSet.bind(this),
-            icon: 'content_copy'
-        },
-        {
-            title: 'delete',
-            // action: this._deleteDataSet.bind(this),
-            icon: 'delete'
-        }
-    ],
-    toolbar: false
-}}
-      >
-      </ox-context-page-toolbar>
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    label: 'common header styles'
-};
-//# sourceMappingURL=common-header-styles-actions.stories.js.map

package/dist/stories/common-header-styles-actions.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"common-header-styles-actions.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-actions.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,6CAA6C,CAAA;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwC9D,iBAAiB,CAAC,OAAO;MACzB,kBAAkB,CAAC,OAAO;;;;;2BAKL,KAAK;;;;;;mBAMb;IACT,UAAU,EAAE;IACV,0CAA0C;IAC1C,sCAAsC;KACvC;IACD,UAAU,EAAE;IACV,yCAAyC;KAC1C;IACD,OAAO,EAAE;QACP;YACE,KAAK,EAAE,MAAM;YACb,0CAA0C;YAC1C,IAAI,EAAE,MAAM;SACb;QACD;YACE,KAAK,EAAE,MAAM;YACb,wCAAwC;YACxC,IAAI,EAAE,cAAc;SACrB;QACD;YACE,KAAK,EAAE,QAAQ;YACf,0CAA0C;YAC1C,IAAI,EAAE,QAAQ;SACf;KACF;IACD,OAAO,EAAE,KAAK;CACf;;;;;CAKR,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'\nimport '@operato/context/ox-context-page-toolbar.js'\n\nimport { CommonHeaderStyles } from '../src/common-header-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'common-header-styles-actions',\n  component: 'div',\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=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .container {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium);\n    }\n\n    ${MDTypeScaleStyles.cssText}\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <div class=\"container md-typescale-body-medium\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .context=${{\n          exportable: {\n            // name: i18next.t('title.data-set list'),\n            // data: this.exportHandler.bind(this)\n          },\n          importable: {\n            // handler: this.importHandler.bind(this)\n          },\n          actions: [\n            {\n              title: 'save',\n              // action: this._updateDataSet.bind(this),\n              icon: 'save'\n            },\n            {\n              title: 'copy',\n              // action: this._copyDataSet.bind(this),\n              icon: 'content_copy'\n            },\n            {\n              title: 'delete',\n              // action: this._deleteDataSet.bind(this),\n              icon: 'delete'\n            }\n          ],\n          toolbar: false\n        }}\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}

package/dist/stories/common-header-styles-pure.stories.d.ts

@@ -1,21 +0,0 @@
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-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/common-header-styles-pure.stories.js

@@ -1,78 +0,0 @@
-import '@material/web/icon/icon.js';
-import { CommonHeaderStyles } from '../src/common-header-styles.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'common-header-styles-pure',
-    component: 'div',
-    argTypes: {
-        label: { control: 'string' }
-    }
-};
-const Template = ({ label = '' }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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 {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .container {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    ${MDTypeScaleStyles.cssText}
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <div class="container md-typescale-body-medium">
-    <div class="header">
-      <div class="title">${label}</div>
-
-      <div class="filters">
-        <div class="filter"><label>Filter</label><input type="text" /></div>
-        <div class="filter"><label>Filter</label><input type="text" /></div>
-        <div class="filter"><label>Filter</label><input type="text" /></div>
-      </div>
-
-      <div class="actions">
-        <div class="textbtn">Action</div>
-        <div class="iconbtn"><md-icon>save</md-icon></div>
-        <div class="iconbtn"><md-icon>delete</md-icon></div>
-      </div>
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    label: 'common header styles'
-};
-//# sourceMappingURL=common-header-styles-pure.stories.js.map

package/dist/stories/common-header-styles-pure.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"common-header-styles-pure.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-pure.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,KAAK;IAChB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwC9D,iBAAiB,CAAC,OAAO;MACzB,kBAAkB,CAAC,OAAO;;;;;2BAKL,KAAK;;;;;;;;;;;;;;;CAe/B,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'\nimport { CommonHeaderStyles } from '../src/common-header-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'common-header-styles-pure',\n  component: 'div',\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=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .container {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    ${MDTypeScaleStyles.cssText}\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <div class=\"container md-typescale-body-medium\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\">\n        <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n        <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n        <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"textbtn\">Action</div>\n        <div class=\"iconbtn\"><md-icon>save</md-icon></div>\n        <div class=\"iconbtn\"><md-icon>delete</md-icon></div>\n      </div>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}