@operato/input 8.0.0-beta.5 → 8.0.0

package/dist/stories/ox-input-switch.stories.d.ts

@@ -1,38 +0,0 @@
-import '@material/web/all.js';
-import '../src/ox-input-switch.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        label: {
-            control: string;
-        };
-        name: {
-            control: string;
-        };
-        round: {
-            control: string;
-        };
-        value: {
-            control: string;
-        };
-        disabled: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    label?: string;
-    name?: string;
-    round?: boolean;
-    value?: boolean;
-    disabled?: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-switch.stories.js

@@ -1,68 +0,0 @@
-import '@material/web/all.js';
-import '../src/ox-input-switch.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
-export default {
-    title: 'ox-input-switch',
-    component: 'ox-input-switch',
-    argTypes: {
-        label: { control: 'text' },
-        name: { control: 'text' },
-        round: { control: 'boolean' },
-        value: { control: 'boolean' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ label = 'Checkbox', name = 'hello', round = false, value = false, disabled }) => 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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-      padding: 20px;
-    }
-
-    ox-input-switch {
-      --ox-simple-switch-fullwidth: 120px;
-      --ox-simple-switch-fullheight: 40px;
-      --ox-simple-switch-thumbnail-size: 60px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    label: 'label',
-    name: 'label',
-    round: false,
-    value: false
-};
-//# sourceMappingURL=ox-input-switch.stories.js.map

package/dist/stories/ox-input-switch.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-switch.stories.js","sourceRoot":"","sources":["../../stories/ox-input-switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;4BAqBH,IAAI,WAAW,KAAK,WAAW,KAAK,cAAc,QAAQ;;CAErF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;CACb,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '../src/ox-input-switch.js'\n\nimport { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-switch',\n  component: 'ox-input-switch',\n  argTypes: {\n    label: { control: 'text' },\n    name: { control: 'text' },\n    round: { control: 'boolean' },\n    value: { control: 'boolean' },\n    disabled: { control: 'boolean' }\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  name?: string\n  round?: boolean\n  value?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'Checkbox',\n  name = 'hello',\n  round = false,\n  value = false,\n  disabled\n}: 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    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      padding: 20px;\n    }\n\n    ox-input-switch {\n      --ox-simple-switch-fullwidth: 120px;\n      --ox-simple-switch-fullheight: 40px;\n      --ox-simple-switch-thumbnail-size: 60px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-switch name=${name} .value=${value} .round=${round} ?disabled=${disabled}> </ox-input-switch>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'label',\n  name: 'label',\n  round: false,\n  value: false\n}\n"]}

package/dist/stories/ox-select-floor.stories.d.ts

@@ -1,45 +0,0 @@
-import '../src/ox-select-floor.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        disabled: {
-            control: string;
-        };
-        value: {
-            control: string;
-        };
-        bottomLimit: {
-            control: string;
-        };
-        perspective: {
-            control: string;
-        };
-        rotateX: {
-            control: string;
-        };
-        rotateXForActive: {
-            control: string;
-        };
-        interval: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    value?: string;
-    bottomLimit?: number;
-    perspective?: number;
-    rotateX?: number;
-    rotateXForActive?: number;
-    disabled?: boolean;
-    interval?: number;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-select-floor.stories.js

@@ -1,166 +0,0 @@
-import '../src/ox-select-floor.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
-import { IMAGE } from './image-for-select-floor.js';
-export default {
-    title: 'ox-select-floor',
-    component: 'ox-select-floor',
-    argTypes: {
-        disabled: { control: 'boolean' },
-        value: { control: 'text' },
-        bottomLimit: { control: 'number' },
-        perspective: { control: 'number' },
-        rotateX: { control: 'number' },
-        rotateXForActive: { control: 'number' },
-        interval: { control: 'number' }
-    }
-};
-const cards = new Array(10).fill({}).map((_, index) => {
-    return {
-        image: IMAGE,
-        name: index + 1 + '층'
-    };
-});
-const Template = ({ value, disabled, bottomLimit = 70, perspective = 1200, rotateX = 60, rotateXForActive = 40, interval = 0 }) => 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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-
-      overscroll-behavior-y: none;
-
-      /* This is a font-stack that tries to use the system-default sans-serifs first */
-      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-
-      accent-color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-background);
-    }
-
-    .container {
-      height: 1000px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    div[status] {
-      display: flex;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      align-items: center;
-      right: 3%;
-    }
-
-    div[status] > div[content] {
-      display: flex;
-      background-color: #4e5055;
-      color: #fff;
-      padding: 5px 7px;
-      border-radius: 7px;
-      gap: 10px;
-      font-size: 14px;
-    }
-
-    div[status] span {
-      display: flex;
-      align-items: center;
-      width: 48px;
-    }
-
-    div[status] md-icon {
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-      border-radius: 5px;
-      font-size: 21px;
-      font-weight: 700;
-    }
-    div[status] md-icon[request] {
-      background-color: #f7f7f7;
-      color: #4e5055;
-    }
-    div[status] md-icon[pass] {
-      background-color: #4bbb4a;
-    }
-    div[status] md-icon[fail] {
-      background-color: #ff4444;
-    }
-
-    span[name] {
-      width: 40px;
-      color: #4e5055;
-      margin-left: 6px;
-      text-align: center;
-    }
-
-    span[name][active] {
-      color: var(--md-sys-color-on-error);
-      background-color: var(--md-sys-color-error);
-      border-radius: 999px;
-    }
-
-    ox-select-floor {
-      --ox-select-floor-rotate-x: ${rotateX}deg;
-      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;
-      --ox-select-floor-perspective: ${perspective}px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-select-floor
-      .cards=${cards}
-      .bottomLimit=${bottomLimit}
-      ?disabled=${disabled}
-      .interval=${interval}
-      @change=${(e) => console.log(e.target.value)}
-    >
-      ${cards.map(({ image, name }, index) => html `<div slot="template-${index}" status>
-            <div content>
-              <span><md-icon request slot="icon">exclamation</md-icon>100</span>
-              <span><md-icon pass slot="icon">check</md-icon>50</span>
-              <span><md-icon fail slot="icon">close</md-icon>5</span>
-            </div>
-            <span name>${name}</span>
-          </div>`)}
-    </ox-select-floor>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    bottomLimit: 70,
-    perspective: 1200,
-    rotateX: 60,
-    rotateXForActive: 40,
-    interval: 0
-};
-//# sourceMappingURL=ox-select-floor.stories.js.map

package/dist/stories/ox-select-floor.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-select-floor.stories.js","sourceRoot":"","sources":["../../stories/ox-select-floor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAChC;CACF,CAAA;AAkBD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;IACpD,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG;KACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,EAAE,EACrB,QAAQ,GAAG,CAAC,EACH,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwFK,OAAO;2CACA,gBAAgB;uCACpB,WAAW;;;;;;eAMnC,KAAK;qBACC,WAAW;kBACd,QAAQ;kBACR,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;QAE5E,KAAK,CAAC,GAAG,CACT,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,CAAA,uBAAuB,KAAK;;;;;;yBAMjB,IAAI;iBACZ,CACV;;;CAGN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,EAAE;IACX,gBAAgB,EAAE,EAAE;IACpB,QAAQ,EAAE,CAAC;CACZ,CAAA","sourcesContent":["import '../src/ox-select-floor.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { IMAGE } from './image-for-select-floor.js'\n\nexport default {\n  title: 'ox-select-floor',\n  component: 'ox-select-floor',\n  argTypes: {\n    disabled: { control: 'boolean' },\n    value: { control: 'text' },\n    bottomLimit: { control: 'number' },\n    perspective: { control: 'number' },\n    rotateX: { control: 'number' },\n    rotateXForActive: { control: 'number' },\n    interval: { control: 'number' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: string\n  bottomLimit?: number\n  perspective?: number\n  rotateX?: number\n  rotateXForActive?: number\n  disabled?: boolean\n  interval?: number\n}\n\nconst cards = new Array(10).fill({}).map((_, index) => {\n  return {\n    image: IMAGE,\n    name: index + 1 + '층'\n  }\n})\n\nconst Template: Story<ArgTypes> = ({\n  value,\n  disabled,\n  bottomLimit = 70,\n  perspective = 1200,\n  rotateX = 60,\n  rotateXForActive = 40,\n  interval = 0\n}: 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    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      overflow: hidden;\n\n      overscroll-behavior-y: none;\n\n      /* This is a font-stack that tries to use the system-default sans-serifs first */\n      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n      line-height: 1.5;\n      -webkit-font-smoothing: antialiased;\n\n      accent-color: var(--md-sys-color-primary);\n      background-color: var(--md-sys-color-background);\n    }\n\n    .container {\n      height: 1000px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    div[status] {\n      display: flex;\n      position: absolute;\n      right: 0px;\n      bottom: 0px;\n      align-items: center;\n      right: 3%;\n    }\n\n    div[status] > div[content] {\n      display: flex;\n      background-color: #4e5055;\n      color: #fff;\n      padding: 5px 7px;\n      border-radius: 7px;\n      gap: 10px;\n      font-size: 14px;\n    }\n\n    div[status] span {\n      display: flex;\n      align-items: center;\n      width: 48px;\n    }\n\n    div[status] md-icon {\n      width: 20px;\n      height: 20px;\n      margin-right: 4px;\n      border-radius: 5px;\n      font-size: 21px;\n      font-weight: 700;\n    }\n    div[status] md-icon[request] {\n      background-color: #f7f7f7;\n      color: #4e5055;\n    }\n    div[status] md-icon[pass] {\n      background-color: #4bbb4a;\n    }\n    div[status] md-icon[fail] {\n      background-color: #ff4444;\n    }\n\n    span[name] {\n      width: 40px;\n      color: #4e5055;\n      margin-left: 6px;\n      text-align: center;\n    }\n\n    span[name][active] {\n      color: var(--md-sys-color-on-error);\n      background-color: var(--md-sys-color-error);\n      border-radius: 999px;\n    }\n\n    ox-select-floor {\n      --ox-select-floor-rotate-x: ${rotateX}deg;\n      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;\n      --ox-select-floor-perspective: ${perspective}px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-select-floor\n      .cards=${cards}\n      .bottomLimit=${bottomLimit}\n      ?disabled=${disabled}\n      .interval=${interval}\n      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n    >\n      ${cards.map(\n        ({ image, name }, index) =>\n          html`<div slot=\"template-${index}\" status>\n            <div content>\n              <span><md-icon request slot=\"icon\">exclamation</md-icon>100</span>\n              <span><md-icon pass slot=\"icon\">check</md-icon>50</span>\n              <span><md-icon fail slot=\"icon\">close</md-icon>5</span>\n            </div>\n            <span name>${name}</span>\n          </div>`\n      )}\n    </ox-select-floor>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  bottomLimit: 70,\n  perspective: 1200,\n  rotateX: 60,\n  rotateXForActive: 40,\n  interval: 0\n}\n"]}