@tmorrow/cre8-wc 1.2.4 → 1.2.5

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.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=calendar-navigation.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.styles.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar-navigation/calendar-navigation.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAklBV,CAAC;AACH,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,598 @@
+import { css } from 'lit';
+const styles = css `.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  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);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+: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;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+.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