kemet-ui 2.0.0 → 2.0.2

package/dist/src/components/kemet-select/kemet-select.js

@@ -1,239 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesSelect } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-select
- * @summary An enhanced select element.
- *
- * @prop {string} slug - A string the uniquely identifies the select
- * @prop {string} name - The name of the select
- * @prop {string} value - The value of the select
- * @prop {array} options - The options the select contains
- * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether or not the field is required
- * @prop {boolean} disabled - Determines whether or not the field is disabled
- * @prop {boolean} multiple - Support of multiple choice selections
- * @prop {string} icon - The dropdown icon
- * @prop {number} iconSize - The dropdown icon size
- * @prop {boolean} filled - Displays a filled select
- * @prop {boolean} rounded - Displays rounded corners
- *
- * @csspart select
- *
- * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.
- * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).
- * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).
- * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
- * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).
- * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
- * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.
- * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).
- * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).
- * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).
- * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
- * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status - Fires when there's a change in status
- *
- */
-let KemetSelect = class KemetSelect extends LitElement {
-    constructor() {
-        super();
-        this.name = 'select';
-        this.icon = 'chevron-down';
-        this.iconSize = 16;
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-        /** @internal */
-        this.control = this.closest('kemet-field');
-    }
-    firstUpdated() {
-        this.select = this.shadowRoot.querySelector('select');
-        this.selectedOption = this.querySelector('[selected]');
-        this.value = this.selectedOption ? this.selectedOption.value : '';
-    }
-    render() {
-        return html `
-      <select
-        part="select"
-        id=${this.slug}
-        name=${this.name}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?multiple=${this.multiple}
-        @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @invalid=${this.handleInvalid}
-      >
-        ${this.makeOptions()}
-      </select>
-      ${this.makeIcon()}
-      <slot @slotchange=${() => this.makeOptions()}></slot>
-    `;
-    }
-    /**
-     * Generates the option elements
-     * @private
-     * @returns {TemplateResult} An option element
-     */
-    makeOptions() {
-        this.options = [];
-        this.optionElements = this.querySelectorAll('kemet-option');
-        this.optionElements.forEach((option) => {
-            // if (index === 0) this.value = option.value;
-            // this.value = option.selected ? option.value : this.value;
-            this.options = this.options.concat({
-                label: option.label,
-                value: option.value,
-                disabled: option.disabled,
-                selected: option.selected,
-            });
-        });
-        return this.options.map(option => html `<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
-          ${option.label}
-        </option>`);
-    }
-    /**
-     * Generates an dropdown icon
-     * @private
-     */
-    makeIcon() {
-        if (this.icon || this.icon !== '') {
-            return html `<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
-        }
-        return null;
-    }
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus() {
-        this.hasFocus = true;
-        emitEvent(this, 'kemet-input-focused', true);
-    }
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur() {
-        this.hasFocus = false;
-        emitEvent(this, 'kemet-input-focused', false);
-        this.select.checkValidity();
-        if (!this.select.checkValidity()) {
-            this.invalid = true;
-            this.status = 'error';
-            this.control.status = 'error';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'error',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange() {
-        this.value = this.select.value;
-        if (this.select.checkValidity()) {
-            this.invalid = false;
-            this.status = 'standard';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'standard',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid() {
-        this.invalid = true;
-        this.status = 'error';
-        emitEvent(this, 'kemet-input-status', {
-            status: 'error',
-            validity: this.select.validity,
-            element: this,
-        });
-    }
-    /**
-     * Checks the validity of the standard select
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity() {
-        this.select.checkValidity();
-    }
-};
-KemetSelect.styles = [stylesSelect];
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "slug", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "value", void 0);
-__decorate([
-    property({ type: Array })
-], KemetSelect.prototype, "options", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetSelect.prototype, "status", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetSelect.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number, attribute: 'icon-size' })
-], KemetSelect.prototype, "iconSize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "filled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "rounded", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "invalid", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "control", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "select", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "selectedOption", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "optionElements", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "hasFocus", void 0);
-KemetSelect = __decorate([
-    customElement('kemet-select')
-], KemetSelect);
-export default KemetSelect;
-//# sourceMappingURL=kemet-select.js.map

package/dist/src/components/kemet-select/kemet-select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-select.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/kemet-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesSelect } from './styles';\nimport { KemetOptionInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether or not the field is required\n * @prop {boolean} disabled - Determines whether or not the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {boolean} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.\n * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).\n * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).\n * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).\n * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.\n * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).\n * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).\n * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n *\n */\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetFieldInterface;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: any;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions() {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option) => {\n      // if (index === 0) this.value = option.value;\n      // this.value = option.selected ? option.value : this.value;\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n          ${option.label}\n        </option>`,\n    );\n  }\n\n  /**\n   * Generates an dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-input-focused', false);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = 'error';\n      this.control.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.select.value;\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = 'error';\n\n    emitEvent(this, 'kemet-input-status', {\n      status: 'error',\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity() {\n    this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n"]}

package/dist/src/components/kemet-select/styles.d.ts

@@ -1 +0,0 @@
-export declare const stylesSelect: import("lit").CSSResult;

package/dist/src/components/kemet-select/styles.js

@@ -1,73 +0,0 @@
-import { css } from 'lit';
-export const stylesSelect = css `
-  :host {
-    position: relative;
-    display: block;
-  }
-
-  select {
-    color: var(--kemet-color-text);
-    display: block;
-    font-size: 1rem;
-    width: 100%;
-    padding: var(--kemet-select-padding, 1rem);
-    border: var(--kemet-select-border, 1px solid var(--kemet-color-background));
-    appearance: none;
-    box-sizing: border-box;
-    background-color: transparent;
-  }
-
-  option {
-    color: var(--kemet-color-black);
-  }
-
-  :host([status='error']) select {
-    border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));
-  }
-
-  :host([status='success']) select {
-    border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));
-  }
-
-  :host([status='warning']) select {
-    border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));
-  }
-
-  :host([disabled]) select {
-    opacity: 0.5;
-  }
-
-  :host([rounded]) select {
-    border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));
-  }
-
-  :host([filled]) select {
-    border: var(--kemet-select-border-filled, none);
-    color: var(--kemet-select-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));
-  }
-
-  :host([filled]) kemet-icon {
-    color: var(--kemet-select-color-filled, var(--kemet-color-white));
-  }
-
-  :host([status='error'][filled]) select {
-    background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));
-  }
-
-  :host([status='success'][filled]) select {
-    background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));
-  }
-
-  :host([status='warning'][filled]) select {
-    background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));
-  }
-
-  kemet-icon {
-    position: absolute;
-    right: var(--kemet-select-icon-right, 1rem);
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-select/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: var(--kemet-color-text);\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding, 1rem);\n    border: var(--kemet-select-border, 1px solid var(--kemet-color-background));\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  option {\n    color: var(--kemet-color-black);\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled, none);\n    color: var(--kemet-select-color-filled, var(--kemet-color-white));\n    background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));\n  }\n\n  :host([filled]) kemet-icon {\n    color: var(--kemet-select-color-filled, var(--kemet-color-white));\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));\n  }\n\n  kemet-icon {\n    position: absolute;\n    right: var(--kemet-select-icon-right, 1rem);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n"]}

package/dist/src/components/kemet-select/types.d.ts

@@ -1,20 +0,0 @@
-export interface KemetSelectInterface extends HTMLElement {
-    slug?: string;
-    name?: string;
-    value?: string;
-    options?: any[];
-    status?: string;
-    required?: boolean;
-    disabled?: boolean;
-    multiple?: boolean;
-    icon?: string;
-    iconSize?: number;
-    filled?: boolean;
-    rounded?: boolean;
-}
-export interface KemetOptionInterface extends HTMLElement {
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    selected?: boolean;
-}

package/dist/src/components/kemet-select/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/src/components/kemet-select/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSelectInterface extends HTMLElement {\n  slug?: string,\n  name?: string,\n  value?: string,\n  options?: any[],\n  status?: string,\n  required?: boolean,\n  disabled?: boolean,\n  multiple?: boolean,\n  icon?: string,\n  iconSize?: number,\n  filled?: boolean,\n  rounded?: boolean,\n}\n\nexport interface KemetOptionInterface extends HTMLElement {\n  label?: string,\n  value?: string,\n  disabled?: boolean,\n  selected?: boolean,\n}\n"]}

package/dist/src/components/kemet-sortable/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-sortable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE;QACpC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,6BAA6B,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;KAC5E;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-sortable';\nimport '../kemet-sortable-item';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Sortable',\n  component: 'kemet-sortable',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ numItems = 3 }) => {\n  const items = [];\n\n  for (let i = 0; i < numItems; i += 1) {\n    items.push(html`<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);\n  }\n\n  return html`\n    <kemet-sortable>\n      ${items}\n    </kemet-sortable>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    numItems: 3,\n  },\n  argTypes: {\n    numItems: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}

package/dist/src/components/kemet-sortable/kemet-sortable-item.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-export default class KemetSortableItem extends LitElement {
-    static styles: import("lit").CSSResult[];
-    ghost: boolean;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable-item': KemetSortableItem;
-    }
-}

package/dist/src/components/kemet-sortable/kemet-sortable-item.js

@@ -1,30 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { stylesSortableItem } from './styles';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-let KemetSortableItem = class KemetSortableItem extends LitElement {
-    firstUpdated() {
-        this.draggable = true;
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-KemetSortableItem.styles = [stylesSortableItem];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSortableItem.prototype, "ghost", void 0);
-KemetSortableItem = __decorate([
-    customElement('kemet-sortable-item')
-], KemetSortableItem);
-export default KemetSortableItem;
-//# sourceMappingURL=kemet-sortable-item.js.map

package/dist/src/components/kemet-sortable/kemet-sortable-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/kemet-sortable-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;;;GAQG;AAGH,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAMvD,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAZQ,wBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAJI,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAarC;eAboB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from './styles';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n"]}

package/dist/src/components/kemet-sortable/kemet-sortable.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import { KemetSortableItemInterface } from './types';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable
- * @summary A list that can be sorted by drag and drop.
- *
- * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
- */
-export default class KemetSortable extends LitElement {
-    static styles: import("lit").CSSResult[];
-    sortableItem: KemetSortableItemInterface;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleDragStart(event: any): void;
-    handleDragOver(event: any): void;
-    handleDragEnd(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable': KemetSortable;
-    }
-}

package/dist/src/components/kemet-sortable/kemet-sortable.js

@@ -1,77 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { polyfill } from 'mobile-drag-drop';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesSortable } from './styles';
-const getMouseOffset = (event) => {
-    const targetRect = event.target.getBoundingClientRect();
-    const offset = {
-        x: event.pageX - targetRect.left,
-        y: event.pageY - targetRect.top,
-    };
-    return offset;
-};
-const getElementVerticalCenter = (element) => {
-    const rect = element.getBoundingClientRect();
-    return (rect.bottom - rect.top) / 2;
-};
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable
- * @summary A list that can be sorted by drag and drop.
- *
- * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
- */
-let KemetSortable = class KemetSortable extends LitElement {
-    firstUpdated() {
-        polyfill();
-        this.addEventListener('dragstart', event => this.handleDragStart(event), false);
-        this.addEventListener('dragenter', (event) => { event.preventDefault(); });
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    handleDragStart(event) {
-        this.sortableItem = event.target;
-        this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
-        this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
-        setTimeout(() => {
-            this.sortableItem.ghost = true;
-        }, 0);
-    }
-    handleDragOver(event) {
-        event.preventDefault();
-        const { target } = event;
-        if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
-            const offset = getMouseOffset(event);
-            const middleY = getElementVerticalCenter(event.target);
-            if (offset.y > middleY) {
-                this.insertBefore(this.sortableItem, target.nextSibling);
-            }
-            else {
-                this.insertBefore(this.sortableItem, target);
-            }
-        }
-    }
-    handleDragEnd(event) {
-        event.preventDefault();
-        this.sortableItem.ghost = false;
-        emitEvent(this, 'kemet-sortable-drag-end', {
-            event,
-            current: this.sortableItem,
-            all: this.querySelectorAll('kemet-sortable-item'),
-        });
-    }
-};
-KemetSortable.styles = [stylesSortable];
-__decorate([
-    state()
-], KemetSortable.prototype, "sortableItem", void 0);
-KemetSortable = __decorate([
-    customElement('kemet-sortable')
-], KemetSortable);
-export default KemetSortable;
-//# sourceMappingURL=kemet-sortable.js.map

package/dist/src/components/kemet-sortable/kemet-sortable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-sortable.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/kemet-sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesSortable } from './styles';\nimport { KemetSortableItemInterface } from './types';\n\nconst getMouseOffset = (event) => {\n  const targetRect = event.target.getBoundingClientRect();\n  const offset = {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n\n  return offset;\n};\n\nconst getElementVerticalCenter = (element) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItemInterface;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event) {\n    this.sortableItem = event.target;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n    }, 0);\n  }\n\n  handleDragOver(event) {\n    event.preventDefault();\n\n    const { target } = event;\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(event.target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-sortable-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"]}

package/dist/src/components/kemet-sortable/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const stylesSortable: import("lit").CSSResult;
-export declare const stylesSortableItem: import("lit").CSSResult;

package/dist/src/components/kemet-sortable/styles.js

@@ -1,22 +0,0 @@
-import { css } from 'lit';
-export const stylesSortable = css `
-  :host {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-  }
-`;
-export const stylesSortableItem = css `
-  :host {
-    cursor: grab;
-    display: block;
-    padding: 1rem;
-    border: 1px solid var(--kemet-color-background);
-  }
-
-  :host([ghost]) {
-    opacity: 0.5;
-    border-style: dashed;
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-sortable/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid var(--kemet-color-background);\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"]}

package/dist/src/components/kemet-sortable/types.d.ts

@@ -1,3 +0,0 @@
-export interface KemetSortableItemInterface extends HTMLElement {
-    ghost?: boolean;
-}

package/dist/src/components/kemet-sortable/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/src/components/kemet-sortable/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSortableItemInterface extends HTMLElement {\n  ghost?: boolean,\n}\n"]}

package/dist/src/components/kemet-svgs/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-svgs/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CACxB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,GAAG,GAAG,QAAQ,GACf,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE;QACzB,IAAI,OAAO,CAAC;QAEZ,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ;gBAAE,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM;YACR,KAAK,KAAK;gBAAE,OAAO,GAAG,aAAa,CAAC;gBAClC,MAAM;YACR,KAAK,OAAO;gBAAE,OAAO,GAAG,iBAAiB,CAAC;gBACxC,MAAM;YACR,OAAO,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC;SAClC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;iCAuBoB,GAAG,cAAc,UAAU,CAAC,GAAG,CAAC;GAC9D,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,GAAG,EAAE,QAAQ;KACd;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;SACpC;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-svg';\nimport '../kemet-svgs';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / SVGs',\n  component: 'kemet-svgs',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  svg = 'anubis',\n}) => {\n  const getViewBox = (svg) => {\n    let viewBox;\n\n    switch (svg) {\n      case 'anubis': viewBox = '0 0 512 512';\n        break;\n      case 'eye': viewBox = '0 0 706 500';\n        break;\n      case 'horus': viewBox = '0 0 1359.5 1027';\n        break;\n      default: viewBox = '0 0 512 512';\n    }\n\n    return viewBox;\n  };\n\n  return html`\n    <kemet-svgs set=\"svgs\">\n      <svg>\n        <defs>\n          <g id=\"anubis\">\n            <path d=\"M201 5.5c-1.5 1.8-.9 5.6 2.7 17.5 2.5 8.4 2.7 8.5 12 17.4 32.9 31.1 53.3 67.7 56.8 101.9l.7 6.8 6.6 3c3.6 1.6 6.7 2.8 6.9 2.6.5-.5-7-26.4-11-38.2-6-17.4-10.6-28.5-19.2-46-12.9-26.2-26.8-46.2-41.6-59.9-7.4-6.9-11.3-8.3-13.9-5.1z\"></path><path d=\"M168.5 17c-.3.6 5.9 20.5 13.9 44.3 20.3 60.4 26.1 82 27.3 100.8.5 8.6.3 10.2-1.6 14-5 10.2-14.4 17.3-40.8 30.8-15.4 7.8-21.1 11.2-23.5 14.1-1.8 2.1-7.3 10.5-12.3 18.6-12.6 20.7-22.5 34.4-31.9 44.2-6.5 6.7-12.2 11.1-28.1 21.7-31.3 20.6-41.1 29.4-40.3 36.2.2 2.2 1.8 3.8 7.3 7.5C48.6 356.1 61 362 65 362c2 0 8.8-2.3 15.5-5.1 28.4-12.1 63.7-25 75.5-27.5 5.6-1.2 8.3-1.1 20 .2 15.1 1.8 27.1 1.4 34.2-1.1 5.3-1.9 11.8-7.6 14.5-12.9l1.8-3.4 6 8.9c3.3 4.8 6.4 8.7 6.9 8.6.5-.2 1.5-1.2 2.2-2.3 1.2-1.7.5-3.7-6-16.6-10.1-20-12.1-26.2-10.7-33 .7-2.9 3.4-9.4 6.1-14.3 11.1-20 16.2-33.1 23-59.7 9.8-38.7 10.5-56.5 2.9-81.6-6.8-22.5-29.7-55-60.9-86.3-15.5-15.5-25.4-22.3-27.5-18.9zm58 174c0 3-31.3 27.8-41.5 33-3 1.5-8.2 3.5-11.4 4.5-13.1 3.7-21.8 10.1-26.5 19.4-2.4 4.5-3.8 5.8-5.3 4.3-2.5-2.5 8.6-17 16.8-21.8 2.3-1.4 8.8-4 14.4-5.8 12.8-4.3 27.6-14.2 47.5-32 4-3.5 6-4.1 6-1.6zm-3.1 14.6c4.7 1.8-2 8-29.2 26.5-11.1 7.6-11.6 8.1-14.9 14.9-4.6 9.4-8.3 11.9-19 12.9-7 .6-8.5 1.1-13 4.4-5.6 4.1-6.5 4.4-8.3 2.2-1-1.2-.7-1.9 1.6-4 1.6-1.5 4.1-3.4 5.6-4.3 1.5-.9 3.3-3 4-4.6 3.2-7.8 13-14.8 25.3-18 6.4-1.7 14.1-6.5 34-21.5 6.6-5 12.1-9.1 12.2-9.1.1 0 .8.3 1.7.6z\"></path><path d=\"M273.2 175.2c-5 36.6-15.3 69-27.4 86.6-3.6 5.3-7.9 15.5-8 19.1-.1 1.5 2.1 7.6 4.7 13.6 9.6 22.1 11.2 29.3 7.6 35.1-2.1 3.4-7.4 7.8-10.6 8.8-1.4.4-2.7 2.7-4.3 7.3-3.5 10.1-12.2 27.8-17.6 36.1-2.7 4-7.7 10.4-11.1 14.1-12.1 13.2-24.6 41-41.6 92.1l-5.8 17.5 17.7.3c9.7.1 18.1.1 18.8-.2.6-.2 1.4-4.6 1.8-10.8 2.3-35.4 11.5-71.4 22.3-87.1 6.9-10 37.7-27.5 72.3-41.2 36.2-14.2 73.2-23.6 111-28.1 15.8-1.8 55.2-2.5 67.7-1.1l7.2.8-1.1-3.2c-2.2-6.4-11.5-23.6-18.1-33.6-27-40.9-69.6-79.1-125.2-112.3-11.7-7-55.8-30-57.5-30-.3 0-1.6 7.3-2.8 16.2zm28.8 23.4c54.2 30 97.6 68.3 126.6 111.9 4 6.1 7.4 11.5 7.4 11.8 0 .4-3.4.7-7.5.7h-7.4l-5-7.3c-26.3-39-68.4-75.9-119.1-104.6-6.9-3.8-13-7.4-13.6-7.8-1.5-1 .4-13.3 2-13.3.6 0 8.1 3.9 16.6 8.6zm-11.5 31.7c34.3 22.8 63.8 50.8 89.8 85.4 4.2 5.6 7.7 10.4 7.7 10.6 0 .3-3.2 1.1-7.1 1.7-6.9 1.2-7.1 1.2-8.7-1.1-4.1-5.9-16.2-20.4-25.5-30.7-17.3-19.2-41.7-40.1-63.6-54.7l-9.9-6.6 2.1-6.4c2.4-7.4 1.1-7.6 15.2 1.8zm-11.9 36.4c14.8 12.3 34.8 32 45.1 44.3 8.1 9.8 18.5 24.1 17.9 24.7-.2.2-3.1 1.2-6.5 2.3l-6 1.8-6.6-8.8c-13.4-18-35.4-40.3-56.4-57.3l-7.8-6.3 3.1-5.7c1.7-3.1 3.4-5.7 3.7-5.7.3 0 6.4 4.8 13.5 10.7zm-5.6 50.5c8.2 12.2 19.5 33.7 18.2 34.8-.9.8-11.5 5.1-11.7 4.8 0-.2-1-2.3-2-4.7-1.1-2.4-4.3-8.7-7.2-13.9-4.8-8.7-5.3-10.2-5.3-15.8 0-4.3-.9-9-3-15.1l-2.9-8.8 2.9 3.5c1.7 1.9 6.6 8.8 11 15.2zm-20.6 38.5c1.1 13.6 1.4 12.8-5.7 16.8-3.5 1.9-6.7 3.5-7 3.5-1.6 0-.5-5.2 2.7-12.6 1.9-4.3 4.1-9.6 5-11.7 2.5-6.1 4.2-4.8 5 4z\"></path><path d=\"M442.4 354.8c-.6.4-2.3 4.5-3.7 9.2-11.4 37.3-41.5 70.3-83.3 91.3-33.7 16.9-69.6 25.6-128.9 31.3l-5.1.5.8 9.6c.4 5.3.9 9.7 1 9.9.8.7 22.9 3.4 33.3 3.9 29.8 1.7 68.8-4.9 98.2-16.6 38.7-15.3 78.3-45 99.6-74.6 13.9-19.4 23.7-44.8 23.7-61.4V354h-17.2c-9.5 0-17.8.4-18.4.8z\"></path><path d=\"M414.5 356.8c-7.5.7-33 4.5-42 6.3-46.6 9.3-85.6 24.5-117.3 45.6-14.9 9.9-20.8 15.8-25.5 25.4-4.1 8.3-7.7 21.1-7.7 27.1v3.8h4.8c13 0 47.6-5.3 68.2-10.5 24.4-6.1 49.1-16.1 65.9-26.6 24.5-15.4 43.6-36.6 53.3-59.1 4.5-10.5 4.6-12.4.3-12z\"></path>\n          </g>\n          <g id=\"eye\">\n            <defs id=\"defs2214\"/>\n            <path d=\"M 482.47122,483.65668 C 482.09821,481.16923 482.00349,468.19138 482.26073,454.81702 C 482.85598,423.86986 485.74029,409.33575 508.02304,325 C 517.97202,287.34512 518.96876,261.67667 510.62952,257.87706 C 503.22084,254.50144 495.51948,258.76554 483.33874,272.98748 C 444.87758,317.89379 384.416,371.63828 336.592,403.43111 C 234.38064,471.38003 125.75165,495.91654 61.5,465.56738 C 14.135995,443.19507 -9.4559604,386.23292 7.5301438,335.2586 C 23.728797,286.64738 86.775557,268.60992 123.4217,302.10244 C 141.67589,318.78573 137.19751,348.25122 114.70406,359.46018 C 96.526568,368.51841 73.570329,349.94535 79.65551,331.10368 C 81.787859,324.50125 81.436951,324.28716 72.953651,327.0149 C 23.293219,342.98286 33.831342,415.54173 88.682829,435.31611 C 152.06988,458.16762 251.76781,426.54376 351.5,351.95135 C 391.05504,322.36706 438.67015,273.24845 433.13368,267.73999 C 431.50743,266.12196 409.19769,266.53511 388,268.57582 C 325.73643,274.56995 251.40446,262.42665 164,231.98188 C 152.725,228.05456 136.525,222.43341 128,219.49042 C 109.63237,213.14958 75.226122,204.4179 51.5,200.07611 C 42.15,198.3651 33.478754,196.73725 32.230564,196.45866 L 29.961129,195.95214 L 30.230564,174.3183 L 30.5,152.68446 L 39,150.74391 C 72.50072,143.09568 128.76294,128.99955 175,116.66999 C 278.32991,89.11608 289.32495,86.38305 310.5,82.98883 C 383.04703,71.36 422.7219,78.62443 574.31118,131.29245 C 602.82103,141.19788 634.45188,143.67699 662.03604,138.16802 C 668.38086,136.90086 675.54332,136.00717 677.95262,136.18205 L 682.33316,136.5 L 691.61566,157 C 696.72104,168.275 700.92108,177.75395 700.94908,178.06434 C 700.97709,178.37472 694.8125,179.42018 687.25,180.38758 C 628.89838,187.85196 595.69886,201.31776 576.89325,225.14854 C 562.86714,242.92267 559.1993,250.80358 556.38741,269.20848 C 552.05483,297.56695 558.59871,307.69047 590.22312,321.55294 C 598.33549,325.10898 598.36533,325.2104 591.75,326.74292 C 566.33045,332.63166 554.58404,346.42334 542.01437,385.13842 C 521.75002,447.55347 501.97616,483.58514 485.82472,487.52648 C 483.28485,488.14627 483.11511,487.95039 482.47122,483.65668 z M 424.2218,225.63181 C 474.97905,220.35891 533.69333,201.01428 568.3406,178.14891 L 572.18119,175.61432 L 564.6736,171.83682 C 544.62325,161.74834 515.9203,151.09439 477.85766,139.61248 C 468.37374,136.75158 435.02218,129.50425 417.73035,126.54674 L 413.96069,125.902 L 414.73035,130.201 C 421.33896,167.11429 399.13266,191.38005 360.2101,189.77757 C 325.46755,188.34718 305.90676,167.5813 310.49936,137.00427 C 311.3496,131.34347 311.86562,126.53229 311.64607,126.31274 C 310.91615,125.58281 254.01865,138.94051 216.75536,148.59001 C 184.37601,156.9748 143.86144,166.87973 118,172.73355 L 109.5,174.65755 L 123,178.84822 C 130.425,181.15309 154.725,189.0744 177,196.45112 C 234.90395,215.62695 267.37147,222.92242 312.89555,226.98694 C 328.35761,228.36743 407.1171,227.40873 424.2218,225.63181 z M 35.354897,110.38623 C 35.716536,99.99881 36.572127,87.9 37.256211,83.5 L 38.5,75.5 L 56.5,75.47117 C 89.061602,75.41901 105.13604,71.29991 198.5,39.083437 C 273.3851,13.243341 349.47211,3.065576 403.05014,11.721825 C 448.7358,19.102957 499.55051,32.310146 558,51.99465 C 615.37673,71.31787 646.14746,74.42614 681.5,64.46987 C 684.63769,63.58621 703.5919,96.68847 701.36023,99.15444 C 699.55859,101.14524 692.34416,104.11236 682,107.11686 C 671.59412,110.13927 628.62391,111.07697 614.24412,108.59543 C 603.42274,106.72796 561.07836,94.69295 532.5,85.36232 C 458.57731,61.22709 370.02847,49.18587 319,56.32973 C 273.61484,62.68354 255.87256,67.04951 198.71398,85.92932 C 131.51605,108.12519 72.656502,123.90207 39.598686,128.57904 L 34.697371,129.27247 L 35.354897,110.38623 z\" />\n          </g>\n          <g id=\"horus\">\n            <style type=\"text/css\">.st0{fill:currentColor;} .st2{fill:currentColor;} .st3{fill:var(--kemet-color-white-to-black);}</style>\n            <path class=\"st0\" d=\"M1049.5,304.2c0,0,167.6,67.4,115.3,92.3C1112.5,421.5,1055.4,406.6,1049.5,304.2z M708.9,21.3 c0,0-18,79.6,26.9,155.4c0,0-222.2-27-446.9,36c0,0-28.3,60.4,5.1,133.6c0,0-195.3,74.5-289,170.8c0,0,219.6,41.1,197.9,258.2 c0,0,232.5-33.4,521.5,251.7c88.6-475.4,426.2-668.3,625.5-450.8c0,0,60.4-133.6-122-231.2c0,0-19.3-93.7-187.5-132.3 c0,0-66.8-28.3-100.2-98.9c0,0-10.3,12.9-14.2,51.4C925.9,165.2,764.2,36.7,708.9,21.3L708.9,21.3z\"/>\n            <path class=\"st1\" d=\"M509.8,4.6c0,0-61.6,77.1-77,129.6L737.2,345l-1.5,1.3L409.6,192.2c0,0-18,27-29.6,111.7 c0,0,186.5,81.4,326.4,96.1c-0.2,1-0.3,2.1-0.5,3.1c-38,2.1-138.1,2.7-331.1-27.3c0,0-16.7,107.9,27,178.5 c0,0,199.8-88.8,306.2-114.8c0.4,1.4,0.8,2.9,1.3,4.3C662.1,470.7,495.9,567.1,430,627.5c0,0,30.8,89.9,97.7,128.5 c0,0,147.5-222.4,199.3-280l2.3,2.5c-18.1,32.4-162,289.5-164.4,317.3c0,0,78.4,69.4,163.1,92.5c0,0-39.4-246.4,63.8-379.3 c2.3,0.2,4.5,0.3,6.8,0.3c22.4,0,44.1-8.1,61.1-22.8c8.7-6.7,15.8-15.3,20.7-25.1c16.7-29.8,15.9-66.3-2.1-95.3 c-11.2-22-32.1-37.3-56.4-41.3c-17.4-4.6-35.9-4-52.9,1.9C767.9,325.8,549.5,127.6,509.8,4.6L509.8,4.6z\"/>\n            <path class=\"st2\" d=\"M1159.9,487.1c0,0-198-10.1-346.9,64.4c0,0-49.1,101.7-34.5,185.3C778.4,736.9,938.2,510.7,1159.9,487.1z M1164.4,367.2c0,0-56.3-67.2-137.1-101.7c0,0,19.1,56.3,26.4,74.5l1-30.6C1054.6,309.3,1108,324.5,1164.4,367.2z\"/>\n            <g>\n              <path class=\"st3\" d=\"M769.1,326.8L475.5,52.1l34.3-47.5C509.8,4.6,516.6,58.2,769.1,326.8z M735.6,346.5l-326-154.3 c-8.9,17-15.1,35.4-18.3,54.3L735.6,346.5z M706,403.2c0,0-128.4,7.1-331.1-27.3c0,0-8.4,66.4,0.2,100L706,403.2z M709.5,443.9 c0,0-210.2,117.8-279.3,183.7c0,0,15.3,39.8,27.6,56.6L709.5,443.9z M729.4,478.5c0,0-122.2,215.4-164.4,317.3 c0,0,33,27.9,59.4,44.1L729.4,478.5z M813.2,340.1C856,363.2,872,416.6,849,459.4c-8.2,15.2-20.6,27.6-35.8,35.8 c42.8-4,74.3-42,70.2-84.8C879.9,373.1,850.4,343.6,813.2,340.1z\"/>\n            </g>\n          </g>\n        </defs>\n      </svg>\n    </kemet-svgs>\n    <kemet-svg set=\"svgs\" svg=\"${svg}\" viewbox=\"${getViewBox(svg)}\"></kemet-svg>\n  `;\n}\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    svg: 'anubis',\n  },\n  argTypes: {\n    svg: {\n      control: { type: 'select' },\n      options: ['anubis', 'eye', 'horus'],\n    },\n  }\n};\n"]}