@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js

@@ -0,0 +1,76 @@
+/* eslint-disable lit/no-template-arrow */
+/* eslint-disable indent */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* TODO: remove eslint disable on no-template-arrow */
+import { html, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Cre8Element } from '../../cre8-element';
+import styles from './calendar-month-modal.styles.js';
+import '../../button/button';
+import '../../icon/icon';
+export class Cre8CalendarMonthModal extends Cre8Element {
+    constructor() {
+        super();
+        this.monthNames = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
+    }
+    firstUpdated() {
+        this.focusOnCurrentMonth();
+    }
+    async focusOnCurrentMonth() {
+        await this.updateComplete;
+        const currentMonthButton = this.shadowRoot?.querySelector('li[data-current-month]').children[0].shadowRoot?.querySelector('button');
+        currentMonthButton.focus();
+    }
+    emitMonth(month) {
+        const event = new CustomEvent('changeMonth', {
+            detail: {
+                month,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    getMonthListItems() {
+        return this.monthNames.map((month, index) => html ` <li ?data-current-month="${index === this.currentMonth}" >
+          <cre8-button text="${month}" variant="tertiary" size="sm"
+          @click="${() => this.emitMonth(index)}"></cre8-button>
+        </li>`);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-calendar-month-modal', {});
+        return html ` <div class="${componentClassNames}">
+      <ol aria-label="choose a month">
+        ${this.getMonthListItems()}
+      </ol>
+    </div> `;
+    }
+}
+Cre8CalendarMonthModal.styles = [styles];
+__decorate([
+    state()
+], Cre8CalendarMonthModal.prototype, "monthNames", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8CalendarMonthModal.prototype, "currentMonth", void 0);
+if (customElements.get('cre8-calendar-month-modal') === undefined) {
+    customElements.define('cre8-calendar-month-modal', Cre8CalendarMonthModal);
+}
+export default Cre8CalendarMonthModal;
+//# sourceMappingURL=calendar-month-modal.js.map

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-modal.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-month-modal/calendar-month-modal.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2BAA2B;;;;;;;AAE3B,sDAAsD;AACtD,OAAO,EAAkB,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,OAAO,sBAAuB,SAAQ,WAAW;IASnD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,UAAU,GAAG;YAChB,SAAS;YACT,UAAU;YACV,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACN,MAAM;YACN,QAAQ;YACR,WAAW;YACX,SAAS;YACT,UAAU;YACV,UAAU;SACX,CAAC;IACJ,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,mBAAmB;QAC/B,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACvD,wBAAwB,CACzB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,aAAa,CAAoB,QAAQ,CAAC,CAAC;QACrE,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEO,SAAS,CAAC,KAAa;QAC7B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC3C,MAAM,EAAE;gBACN,KAAK;aACN;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CACxB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA,6BAA6B,KAAK,KAAK,IAAI,CAAC,YAAY;+BACvD,KAAK;oBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;cACjC,CACP,CAAC;IACJ,CAAC;IAEH,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,6BAA6B,EAAE,EAAE,CAAC,CAAC;QAExF,OAAO,IAAI,CAAA,gBAAgB,mBAAmB;;UAExC,IAAI,CAAC,iBAAiB,EAAE;;YAEtB,CAAC;IACX,CAAC;;AAjEM,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGhB;IAAR,KAAK,EAAE;0DAA2B;AAGjC;IADD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACnB;AA8DzB,IAAI,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,KAAK,SAAS,EAAE,CAAC;IAClE,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,CAAC,CAAC;AAC7E,CAAC;AAQD,eAAe,sBAAsB,CAAC","sourcesContent":["/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\n/* TODO: remove eslint disable on no-template-arrow */\nimport { TemplateResult, html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../../cre8-element';\nimport styles from './calendar-month-modal.styles.js';\nimport '../../button/button';\nimport '../../icon/icon';\n\nexport class Cre8CalendarMonthModal extends Cre8Element {\n  static styles = [styles];\n\n\n  @state() monthNames: Array<string>;\n\n  @property({ reflect: true, type: Number })\n    currentMonth: number;\n\n    constructor() {\n      super();\n      this.monthNames = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n      ];\n    }\n\n    protected firstUpdated(): void {\n        this.focusOnCurrentMonth();\n    }\n\n    private async focusOnCurrentMonth(): Promise<void> {\n      await this.updateComplete;\n\n      const currentMonthButton = this.shadowRoot?.querySelector<HTMLElement>(\n        'li[data-current-month]'\n      ).children[0].shadowRoot?.querySelector<HTMLButtonElement>('button');\n      currentMonthButton.focus();\n    }\n\n    private emitMonth(month: number): void {\n      const event = new CustomEvent('changeMonth', {\n        detail: {\n          month,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n\n    getMonthListItems(): TemplateResult[] {\n      return this.monthNames.map(\n        (month, index) => html` <li ?data-current-month=\"${index === this.currentMonth}\" >\n          <cre8-button text=\"${month}\" variant=\"tertiary\" size=\"sm\"\n          @click=\"${() => this.emitMonth(index)}\"></cre8-button>\n        </li>`\n      );\n    }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-calendar-month-modal', {});\n\n    return html` <div class=\"${componentClassNames}\">\n      <ol aria-label=\"choose a month\">\n        ${this.getMonthListItems()}\n      </ol>\n    </div> `;\n  }\n}\n\nif (customElements.get('cre8-calendar-month-modal') === undefined) {\n  customElements.define('cre8-calendar-month-modal', Cre8CalendarMonthModal);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-calendar-month-modal': Cre8CalendarMonthModal;\n  }\n}\n\nexport default Cre8CalendarMonthModal;\n"]}

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-month-modal{padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}`;
+export default styles;
+//# sourceMappingURL=calendar-month-modal.styles.js.map

package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-month-modal.styles.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-month-modal/calendar-month-modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,y0EAAy0E,CAAC;AAC51E,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-month-modal{padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}`;\nexport default styles;\n"]}

package/lib/components/date-picker/calendar-navigation/calendar-navigation.js

@@ -0,0 +1,110 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable lit/no-template-arrow */
+/* TODO: remove eslint disable on no-template-arrow */
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../../cre8-element';
+import styles from './calendar-navigation.styles.js';
+import '../../button/button';
+import '../../icon/icon';
+export class Cre8CalendarNavigation extends Cre8Element {
+    activateModal(modal) {
+        const event = new CustomEvent('activateModal', {
+            detail: {
+                modal,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    changeMonth(addend) {
+        const event = new CustomEvent('changeMonth', {
+            detail: {
+                addend,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    changeYear(addend) {
+        const event = new CustomEvent('changeYear', {
+            detail: {
+                addend,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-calendar-navigation', {});
+        return html `
+      <div class="${componentClassNames}">
+        <cre8-button
+          variant="tertiary"
+          text="Previous year"
+          ?hideText=${true}
+          iconName="caret-double-left"
+          @click="${() => this.changeYear(-1)}"
+        ></cre8-button>
+
+        <cre8-button
+          variant="tertiary"
+          text="Previous month"
+          ?hideText=${true}
+          iconName="keyboard-arrow-left"
+          @click="${() => this.changeMonth(-1)}"
+        ></cre8-button>
+
+        <div class="cre8-c-calendar-navigation__inner-buttons">
+          <cre8-button
+            class="cre8-c-calendar-navigation__month-modal-button"
+            variant="tertiary"
+            text="${this.monthName}"
+            aria-label="${this.monthName}, month picker modal"
+            size="sm"
+            @click="${() => this.activateModal('month')}"
+          ></cre8-button>
+
+          <cre8-button
+            class="cre8-c-calendar-navigation__year-modal-button"
+            variant="tertiary"
+            text="${this.year}"
+            aria-label="${this.year}, year picker modal"
+            size="sm"
+            @click="${() => this.activateModal('year')}"
+          ></cre8-button>
+        </div>
+
+        <cre8-button
+          variant="tertiary"
+          text="Next month"
+          ?hideText=${true}
+          iconName="keyboard-arrow-right"
+          @click="${() => this.changeMonth(1)}"
+        ></cre8-button>
+
+        <cre8-button
+          variant="tertiary"
+          text="Next year"
+          ?hideText=${true}
+          iconName="caret-double-right"
+          @click="${() => this.changeYear(1)}"
+        ></cre8-button>
+      </div>
+    `;
+    }
+}
+Cre8CalendarNavigation.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], Cre8CalendarNavigation.prototype, "monthName", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Cre8CalendarNavigation.prototype, "year", void 0);
+if (customElements.get('cre8-calendar-navigation') === undefined) {
+    customElements.define('cre8-calendar-navigation', Cre8CalendarNavigation);
+}
+export default Cre8CalendarNavigation;
+//# sourceMappingURL=calendar-navigation.js.map

package/lib/components/date-picker/calendar-navigation/calendar-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-navigation/calendar-navigation.ts"],"names":[],"mappings":";;;;;;AAAA,0CAA0C;AAC1C,sDAAsD;AACtD,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,MAAM,MAAM,iCAAiC,CAAC;AACrD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,OAAO,sBAAuB,SAAQ,WAAW;IAS7C,aAAa,CAAC,KAAa;QAC/B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,eAAe,EAAE;YAC3C,MAAM,EAAE;gBACJ,KAAK;aACR;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAEO,WAAW,CAAC,MAAc;QAC9B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YACzC,MAAM,EAAE;gBACJ,MAAM;aACT;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAEO,UAAU,CAAC,MAAc;QAC7B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,YAAY,EAAE;YACxC,MAAM,EAAE;gBACJ,MAAM;aACT;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAChD,4BAA4B,EAC5B,EAAE,CACL,CAAC;QAEF,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;sBAIjB,IAAI;;oBAEN,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;;sBAMvB,IAAI;;oBAEN,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;;;;;oBAO1B,IAAI,CAAC,SAAS;0BACR,IAAI,CAAC,SAAS;;sBAElB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;;;;;oBAMnC,IAAI,CAAC,IAAI;0BACH,IAAI,CAAC,IAAI;;sBAEb,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;;;;;;sBAOhC,IAAI;;oBAEN,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;;;;;;sBAMvB,IAAI;;oBAEN,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;;KAGvC,CAAC;IACJ,CAAC;;AAhGQ,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACpB;AAGlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACzB;AA6FnB,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,sBAAsB,CAAC,CAAC;AAC9E,CAAC;AAQD,eAAe,sBAAsB,CAAC","sourcesContent":["/* eslint-disable lit/no-template-arrow */\n/* TODO: remove eslint disable on no-template-arrow */\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../../cre8-element';\nimport styles from './calendar-navigation.styles.js';\nimport '../../button/button';\nimport '../../icon/icon';\n\nexport class Cre8CalendarNavigation extends Cre8Element {\n    static styles = [styles];\n\n  @property({ type: String, reflect: true })\n      monthName: string;\n\n  @property({ type: String, reflect: true })\n      year: number;\n\n  private activateModal(modal: string): void {\n      const event = new CustomEvent('activateModal', {\n          detail: {\n              modal,\n          },\n      });\n      this.dispatchEvent(event);\n  }\n\n  private changeMonth(addend: number): void {\n      const event = new CustomEvent('changeMonth', {\n          detail: {\n              addend,\n          },\n      });\n      this.dispatchEvent(event);\n  }\n\n  private changeYear(addend: number): void {\n      const event = new CustomEvent('changeYear', {\n          detail: {\n              addend,\n          },\n      });\n      this.dispatchEvent(event);\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames(\n          'cre8-c-calendar-navigation',\n          {}\n      );\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <cre8-button\n          variant=\"tertiary\"\n          text=\"Previous year\"\n          ?hideText=${true}\n          iconName=\"caret-double-left\"\n          @click=\"${() => this.changeYear(-1)}\"\n        ></cre8-button>\n\n        <cre8-button\n          variant=\"tertiary\"\n          text=\"Previous month\"\n          ?hideText=${true}\n          iconName=\"keyboard-arrow-left\"\n          @click=\"${() => this.changeMonth(-1)}\"\n        ></cre8-button>\n\n        <div class=\"cre8-c-calendar-navigation__inner-buttons\">\n          <cre8-button\n            class=\"cre8-c-calendar-navigation__month-modal-button\"\n            variant=\"tertiary\"\n            text=\"${this.monthName}\"\n            aria-label=\"${this.monthName}, month picker modal\"\n            size=\"sm\"\n            @click=\"${() => this.activateModal('month')}\"\n          ></cre8-button>\n\n          <cre8-button\n            class=\"cre8-c-calendar-navigation__year-modal-button\"\n            variant=\"tertiary\"\n            text=\"${this.year}\"\n            aria-label=\"${this.year}, year picker modal\"\n            size=\"sm\"\n            @click=\"${() => this.activateModal('year')}\"\n          ></cre8-button>\n        </div>\n\n        <cre8-button\n          variant=\"tertiary\"\n          text=\"Next month\"\n          ?hideText=${true}\n          iconName=\"keyboard-arrow-right\"\n          @click=\"${() => this.changeMonth(1)}\"\n        ></cre8-button>\n\n        <cre8-button\n          variant=\"tertiary\"\n          text=\"Next year\"\n          ?hideText=${true}\n          iconName=\"caret-double-right\"\n          @click=\"${() => this.changeYear(1)}\"\n        ></cre8-button>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-calendar-navigation') === undefined) {\n    customElements.define('cre8-calendar-navigation', Cre8CalendarNavigation);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-calendar-navigation': Cre8CalendarNavigation;\n  }\n}\n\nexport default Cre8CalendarNavigation;\n"]}

package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-navigation{align-items:center;display:flex;height:60px;justify-content:center}.cre8-c-calendar-navigation__inner-buttons{display:flex;min-width:188px;justify-content:space-around}`;
+export default styles;
+//# sourceMappingURL=calendar-navigation.styles.js.map

package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.styles.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-navigation/calendar-navigation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,88DAA88D,CAAC;AACj+D,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-navigation{align-items:center;display:flex;height:60px;justify-content:center}.cre8-c-calendar-navigation__inner-buttons{display:flex;min-width:188px;justify-content:space-around}`;\nexport default styles;\n"]}

package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.js

@@ -0,0 +1,116 @@
+/* eslint-disable lit/no-template-arrow */
+/* eslint-disable indent */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* TODO: remove eslint disable on no-template-arrow */
+import { html, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Cre8Element } from '../../cre8-element';
+import styles from './calendar-year-modal.styles.js';
+import '../../button/button';
+import '../../icon/icon';
+export class Cre8CalendarYearModal extends Cre8Element {
+    get currentYear() {
+        return this._currentYear;
+    }
+    set currentYear(newYear) {
+        const oldYear = this._currentYear;
+        this._currentYear = newYear;
+        this.modalAnchorYear = newYear;
+        this.requestUpdate('currentDate', oldYear);
+        this.createYearArray(this.currentYear);
+    }
+    constructor() {
+        super();
+        this.yearNumbers = [];
+    }
+    emitYear(year) {
+        const event = new CustomEvent('changeYear', {
+            detail: {
+                year,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    createYearArray(anchorYear) {
+        const gridIndices = Array.from(Array(12).keys());
+        /* Leaves current year in the center of the 3x4 grid */
+        this.yearNumbers = gridIndices.map((year) => year + (anchorYear - 7));
+    }
+    getYearListItems() {
+        return this.yearNumbers.map(((year) => html ` <li
+        ?data-current-year="${year === this.currentYear}"
+      >
+        <cre8-button
+          text="${year}"
+          variant="tertiary"
+          size="sm"
+          @click="${() => this.emitYear(year)}"
+        ></cre8-button>
+      </li>`));
+    }
+    firstUpdated() {
+        this.focusOnCurrentYear();
+    }
+    async focusOnCurrentYear() {
+        await this.updateComplete;
+        const currentYearButton = this.shadowRoot?.querySelector('li[data-current-year]').children[0].shadowRoot?.querySelector('button');
+        currentYearButton.focus();
+    }
+    previousYearArray() {
+        this.modalAnchorYear -= 12;
+        this.createYearArray(this.modalAnchorYear);
+    }
+    nextYearArray() {
+        this.modalAnchorYear += 12;
+        this.createYearArray(this.modalAnchorYear);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-calendar-year-modal', {});
+        return html `
+      <div class="${componentClassNames}">
+        <cre8-button
+          class="cre8-c-calendar-year-modal__nav-button"
+          @click="${this.previousYearArray}"
+          variant="tertiary"
+          text="Previous 12 years"
+          ?hideText=${true}
+          iconName="keyboard-arrow-left"
+        ></cre8-button>
+        <ol aria-label="choose a year">
+          ${this.getYearListItems()}
+        </ol>
+        <cre8-button
+          class="cre8-c-calendar-year-modal__nav-button"
+          @click="${this.nextYearArray}"
+          variant="tertiary"
+          text="Next 12 years"
+          ?hideText=${true}
+          iconName="keyboard-arrow-right"
+        ></cre8-button>
+      </div>
+    `;
+    }
+}
+Cre8CalendarYearModal.styles = [styles];
+__decorate([
+    state()
+], Cre8CalendarYearModal.prototype, "yearNumbers", void 0);
+__decorate([
+    state()
+], Cre8CalendarYearModal.prototype, "_currentYear", void 0);
+__decorate([
+    state()
+], Cre8CalendarYearModal.prototype, "modalAnchorYear", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8CalendarYearModal.prototype, "currentYear", null);
+if (customElements.get('cre8-calendar-year-modal') === undefined) {
+    customElements.define('cre8-calendar-year-modal', Cre8CalendarYearModal);
+}
+export default Cre8CalendarYearModal;
+//# sourceMappingURL=calendar-year-modal.js.map

package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year-modal.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-year-modal/calendar-year-modal.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\n/* TODO: remove eslint disable on no-template-arrow */\nimport { TemplateResult, html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../../cre8-element';\nimport styles from './calendar-year-modal.styles.js';\nimport '../../button/button';\nimport '../../icon/icon';\n\nexport class Cre8CalendarYearModal extends Cre8Element {\n  static styles = [styles];\n\n\n  @state() yearNumbers: Array<number>;\n\n  @state() _currentYear?: number;\n\n  @state() modalAnchorYear?: number;\n\n  @property({ reflect: true, type: Number })\n  get currentYear() {\n    return this._currentYear;\n  }\n\n  set currentYear(newYear: number) {\n    const oldYear = this._currentYear;\n    this._currentYear = newYear;\n    this.modalAnchorYear = newYear;\n    this.requestUpdate('currentDate', oldYear);\n    this.createYearArray(this.currentYear);\n  }\n\n  constructor() {\n    super();\n    this.yearNumbers = [];\n  }\n\n  private emitYear(year: number) {\n    const event = new CustomEvent('changeYear', {\n      detail: {\n        year,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private createYearArray(anchorYear: number) {\n    const gridIndices = Array.from(Array(12).keys());\n    /* Leaves current year in the center of the 3x4 grid */\n    this.yearNumbers = gridIndices.map((year) => year + (anchorYear - 7));\n  }\n\n  private getYearListItems(): TemplateResult[] {\n    return this.yearNumbers.map(\n      ((year) => html` <li\n        ?data-current-year=\"${year === this.currentYear}\"\n      >\n        <cre8-button\n          text=\"${year}\"\n          variant=\"tertiary\"\n          size=\"sm\"\n          @click=\"${() => this.emitYear(year)}\"\n        ></cre8-button>\n      </li>`\n      )\n    );\n  }\n\n  protected firstUpdated(): void {\n    this.focusOnCurrentYear();\n  }\n\n  private async focusOnCurrentYear(): Promise<void> {\n    await this.updateComplete;\n\n    const currentYearButton = this.shadowRoot?.querySelector<HTMLElement>(\n      'li[data-current-year]'\n    ).children[0].shadowRoot?.querySelector<HTMLButtonElement>('button');\n    currentYearButton.focus();\n  }\n\n  private previousYearArray(): void {\n    this.modalAnchorYear -= 12;\n    this.createYearArray(this.modalAnchorYear);\n  }\n\n  private nextYearArray(): void {\n    this.modalAnchorYear += 12;\n    this.createYearArray(this.modalAnchorYear);\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-calendar-year-modal',\n      {}\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <cre8-button\n          class=\"cre8-c-calendar-year-modal__nav-button\"\n          @click=\"${this.previousYearArray}\"\n          variant=\"tertiary\"\n          text=\"Previous 12 years\"\n          ?hideText=${true}\n          iconName=\"keyboard-arrow-left\"\n        ></cre8-button>\n        <ol aria-label=\"choose a year\">\n          ${this.getYearListItems()}\n        </ol>\n        <cre8-button\n          class=\"cre8-c-calendar-year-modal__nav-button\"\n          @click=\"${this.nextYearArray}\"\n          variant=\"tertiary\"\n          text=\"Next 12 years\"\n          ?hideText=${true}\n          iconName=\"keyboard-arrow-right\"\n        ></cre8-button>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-calendar-year-modal') === undefined) {\n  customElements.define('cre8-calendar-year-modal', Cre8CalendarYearModal);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-calendar-year-modal': Cre8CalendarYearModal;\n  }\n}\n\nexport default Cre8CalendarYearModal;\n"]}

package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-year-modal{display:flex;justify-content:space-around;align-items:center;padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}cre8-button{height:fit-content}`;
+export default styles;
+//# sourceMappingURL=calendar-year-modal.styles.js.map

package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-year-modal.styles.js","sourceRoot":"","sources":["../../../../components/date-picker/calendar-year-modal/calendar-year-modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,o6EAAo6E,CAAC;AACv7E,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-calendar-year-modal{display:flex;justify-content:space-around;align-items:center;padding:0.5rem}ol{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:grid;grid-row-gap:.33em;grid-template-columns:repeat(3, 1fr);list-style:none;margin:unset;padding:unset}li{display:inline-flex;justify-content:center}cre8-button{height:fit-content}`;\nexport default styles;\n"]}