@leaflink/stash 43.5.2 → 44.0.0-beta.10

package/styles/base.css

@@ -1,7 +1,14 @@
 @tailwind base;
-
 @tailwind components;
 
+/*
+  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
+  lot of duplication and order issues with downstream applications. You need to configure your
+  application downstream to analyze stash files to ensure they are included in your build.
+
+  @tailwind utilities;
+*/
+
 /**
  * This is a custom .container class that conflicts with tailwinds out of the box container class.
  * Placed here before tw utilities, and specifically not within @layer components, so that it is
@@ -15,34 +22,157 @@
   width: 100%;
 }
 
-/* helpful class to show an emdash when an element like a table cell is empty */
-.show-empty:empty::before {
-  content: "—";
-}
-
-/*
-  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
-  lot of duplication and order issues with downstream applications. You need to configure your
-  application downstream to analyze stash files to ensure they are included in your build.
+/**
+ * This is a legacy grid class that conflicts with tailwinds out of the box grid class.
+ * Placed here before tw utilities, and specifically not within @layer components, so that it is
+ * always included in the output css.
+ *
+ * @deprecated - Todo: Migrate to tailwind grid classes. Too tricky to do in one find/replace cause you may have
+ *                conflicts with other grid classes meant to override ll-grid.
+ */
+.ll-grid {
+  @apply tw-grid tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12;
 
-  @tailwind utilities;
-*/
+  --deprecated: "WARNING: Use `tw-grid` instead";
+}
 
 /**
- * General styles and/or reset css could go here.
+ * Variables
  */
 
 :root {
+  --height-topbar: 56px;
   --grid-gutter: 12px;
 
-  @media screen(lg) {
+  /* The tooltips position relative to the toggle element */
+  --tooltip-position: calc(100% + theme('spacing.3'));
+
+  /* Centers arrow horizontally or vertically along tooltip on arrow's center */
+  --arrow-position-centered: calc(50% - theme('spacing[1.5]'));
+
+  @media screen('lg') {
     --grid-gutter: 24px;
   }
+
+  /* Stash colors */
+  --color-purple-900: #06040F;
+  --color-purple-800: #0C091E;
+  --color-purple-700: #120D2D;
+  --color-purple-600: #18123C;
+  --color-purple-500: #1E164B;
+  --color-purple-400: #4B456F;
+  --color-purple-300: #787393;
+  --color-purple-200: #A5A2B7;
+  --color-purple-100: #D2D0DB;
+
+  --color-royal-900: #0A0C24;
+  --color-royal-800: #131747;
+  --color-royal-700: #1D236B;
+  --color-royal-600: #262E8E;
+  --color-royal-500: #303AB2;
+  --color-royal-400: #5961C1;
+  --color-royal-300: #8389D1;
+  --color-royal-200: #ACB0E0;
+  --color-royal-100: #D6D8F0;
+
+  --color-blue-900: #001730;
+  --color-blue-800: #002E60;
+  --color-blue-700: #004490;
+  --color-blue-600: #005BC0;
+  --color-blue-500: #0072F0;
+  --color-blue-400: #338EF3;
+  --color-blue-300: #66AAF6;
+  --color-blue-200: #99C7F9;
+  --color-blue-100: #CCE3FC;
+
+  --color-teal-900: #002528;
+  --color-teal-800: #004B50;
+  --color-teal-700: #017078;
+  --color-teal-600: #0196A0;
+  --color-teal-500: #01BBC8;
+  --color-teal-400: #34C9D3;
+  --color-teal-300: #67D6DE;
+  --color-teal-200: #99E4E9;
+  --color-teal-100: #CCF1F4;
+
+  --color-green-900: #062313;
+  --color-green-800: #0C4627;
+  --color-green-700: #11683A;
+  --color-green-600: #178B4E;
+  --color-green-500: #1DAE61;
+  --color-green-400: #4ABE81;
+  --color-green-300: #77CEA0;
+  --color-green-200: #A5DFC0;
+  --color-green-100: #D2EFDF;
+
+  --color-seafoam-900: #0C2C26;
+  --color-seafoam-800: #18584D;
+  --color-seafoam-700: #248373;
+  --color-seafoam-600: #30AF9A;
+  --color-seafoam-500: #3CDBC0;
+  --color-seafoam-400: #63E2CD;
+  --color-seafoam-300: #8AE9D9;
+  --color-seafoam-200: #B1F1E6;
+  --color-seafoam-100: #D8F8F2;
+
+  --color-yellow-900: #332A00;
+  --color-yellow-800: #650;
+  --color-yellow-700: #997F00;
+  --color-yellow-600: #CA0;
+  --color-yellow-500: #FFD400;
+  --color-yellow-400: #FD3;
+  --color-yellow-300: #FFE566;
+  --color-yellow-200: #FE9;
+  --color-yellow-100: #FFF6CC;
+
+  --color-orange-900: #331E07;
+  --color-orange-800: #663B0F;
+  --color-orange-700: #995916;
+  --color-orange-600: #CC761E;
+  --color-orange-500: #FF9425;
+  --color-orange-400: #FFA951;
+  --color-orange-300: #FFBF7C;
+  --color-orange-200: #FFD4A8;
+  --color-orange-100: #FFEAD3;
+
+  --color-red-900: #2E0009;
+  --color-red-800: #5B0011;
+  --color-red-700: #89001A;
+  --color-red-600: #B60022;
+  --color-red-500: #E4002B;
+  --color-red-400: #E93355;
+  --color-red-300: #EF6680;
+  --color-red-200: #F499AA;
+  --color-red-100: #FACCD5;
+
+  --color-ice-900: #27282A;
+  --color-ice-800: #4F5055;
+  --color-ice-700: #76797F;
+  --color-ice-600: #9EA1AA;
+  --color-ice-500: #C5C9D4;
+  --color-ice-400: #D1D4DD;
+  --color-ice-300: #DCDFE5;
+  --color-ice-200: #E8E9EE;
+  --color-ice-100: #F3F4F6;
+  --color-white: #fff;
+  --color-black: #000;
+
+  /* Deprecated colors */
+  --color-blue-hover: rgb(0 114 240 / 74.9%);
+  --color-red-hover: rgb(228 0 43 / 74.9%);
+  --color-ice-700-hover: rgb(118 121 127 / 11.8%);
+  --color-white-hover: rgb(255 255 255 / 11.8%);
+  --button-secondary-blue-hover: rgb(0 114 240 / 11.8%);
+  --button-secondary-red-hover: rgb(228 0 43 / 11.8%);
 }
 
+/**
+ * General styles and/or reset css could go here.
+ */
+
 @layer base {
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 400;
     src:
@@ -51,7 +181,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 500;
     src:
@@ -60,7 +190,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 600;
     src:
@@ -79,7 +209,7 @@
   body {
     @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm;
 
-    font-family: 'Sofia', sans-serif;
+    font-family: Sofia, sans-serif;
     min-height: 100vh;
     position: relative;
   }
@@ -87,7 +217,7 @@
   *,
   ::before,
   ::after {
-    @apply tw-border-0 tw-border-ice-500;
+    @apply tw-border-0 tw-border-solid tw-border-ice-500;
 
     background-repeat: no-repeat;
     box-sizing: border-box;
@@ -126,9 +256,9 @@
     @apply tw-text-2xl tw-font-medium tw-text-ice-900;
   }
 
-  @media screen(md) {
+  @media screen('md') {
     .heading-jumbo {
-      font-size: theme(fontSize.5xl);
+      font-size: theme('fontSize.5xl');
     }
   }
 
@@ -142,6 +272,8 @@
 
   address {
     font-style: normal;
+    line-height: theme('spacing.6');
+    white-space: pre-line;
   }
 
   /**
@@ -171,7 +303,7 @@
    *
    * Add LeafLink's base styles to fix issues on localhost
    */
-  a {
+  a, .link {
     @apply tw-text-blue-500;
 
     background-color: transparent;
@@ -258,6 +390,12 @@
     margin: 0; /* 2 */
   }
 
+  button {
+    display: inline-block;
+    font-size: 0.875rem;
+    vertical-align: middle;
+  }
+
   /**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
@@ -395,4 +533,381 @@
   template {
     display: none;
   }
+
+  ul,
+  ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &.bullets {
+      list-style-type: disc;
+      padding-left: theme('spacing.9');
+
+      li {
+        margin-bottom: theme('spacing.3');
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    max-width: 100%;
+    width: 100%;
+
+    td,
+    th {
+      border-top: 1px solid var(--color-ice-500);
+      padding: 0.766rem;
+    }
+
+    thead {
+      td,
+      th {
+        background-color: var(--color-ice-200);
+        border-bottom: 2px solid var(--color-ice-500);
+        border-top: none;
+        color: var(--color-ice-900);
+        font-weight: 500;
+        text-align: left;
+        user-select: none;
+        white-space: nowrap;
+      }
+    }
+
+    tbody {
+      td {
+        font-weight: 400;
+      }
+    }
+
+    tfoot {
+      tr {
+        td {
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Custom global classes.
+ *
+ * These are global classes that are not part of the tailwindcss framework. These should be created & used sparingly
+ * and only when using a global class is the best solution.
+ */
+
+/* helpful class to show an emdash when an element like a table cell is empty */
+.show-empty:empty::before {
+  content: "—";
+}
+
+/**
+ * Legacy button-grid class.
+ *
+ * Todo: Create ButtonGrid component with styles below and remove button grid styles from Button.vue
+ * https://leaflink.atlassian.net/browse/STASH-230
+ */
+.button-grid {
+  display: flex;
+  grid-column-end: -1 !important;
+
+  > .button {
+    width: 50%;
+  }
+
+  > .button + .button {
+    margin-left: theme('spacing.6')
+  }
+
+  @media screen('md') {
+    display: inline-flex;
+
+    > .button {
+      width: auto;
+    }
+  }
+}
+
+/**
+ * Stash's v-tooltip styles.
+ */
+
+.tooltip {
+  --offset: 0;
+
+  background: var(--color-ice-900);
+  border-radius: theme('borderRadius.DEFAULT');
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
+  color: var(--color-white);
+  font-size: 0.75rem;
+  line-height: calc(16 / 12);
+  opacity: 0;
+  padding: theme('spacing.3');
+  pointer-events: none; /* Tooltips should disappear once the user hovers away */
+  position: absolute;
+  text-align: center;
+  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing'), visibility theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  visibility: hidden;
+  white-space: normal;
+  width: 148px;
+
+  &::after {
+    background-color: var(--color-ice-900);
+    border-radius: 0 2px 0 0;
+    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
+    content: '';
+    display: inline-block;
+    height: 12px;
+    position: absolute;
+    top: calc(-1 * theme('spacing[1.5]'));
+    transform: rotate(135deg);
+    z-index: theme('zIndex.behind');
+    width: 12px;
+  }
+}
+
+.tooltip--bottom,
+.tooltip--top {
+  left: calc(50% + calc(var(--offset) * 1px));
+  transform: translateX(-50%);
+
+  &::after {
+    left: calc(var(--arrow-position-centered) + calc(var(--offset) * -1px));
+  }
+}
+
+.tooltip--bottom {
+  top: var(--tooltip-position);
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+}
+
+.tooltip--top {
+  bottom: var(--tooltip-position);
+
+  &::after {
+    top: calc(100% - theme('spacing[1.5]'));
+  }
+}
+
+.tooltip--left,
+.tooltip--right {
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::after {
+    top: var(--arrow-position-centered);
+  }
+}
+
+.tooltip--left {
+  right: var(--tooltip-position);
+
+  &::after {
+    left: calc(100% - theme('spacing[1.5]'));
+    transform: rotate(45deg);
+  }
+}
+
+.tooltip--right {
+  left: var(--tooltip-position);
+
+  &::after {
+    left: calc(-1 * theme('spacing[1.5]'));
+    transform: rotate(-135deg);
+  }
+}
+
+.tooltip-toggle {
+  display: inline-block;
+  position: relative;
+  z-index: 0;
+
+  &:hover {
+    outline: none;
+    z-index: theme('zIndex.modal');
+
+    .tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+/**
+ * Animations
+ *
+ * Todo: These should be moved to tailwind as custom animations.
+ */
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.fx-shake {
+  animation: 2s shake 1;
+}
+
+
+@keyframes pulse {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.25, 1.25, 1.25);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.fx-pulse {
+  animation: 1s pulse;
+}
+
+@keyframes spin-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  65% {
+    transform: rotate(720deg);
+  }
+
+  100% {
+    transform: rotate(720deg);
+  }
+}
+
+.fx-spin {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: spin-loading;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fx-flash {
+  animation: 0.5s flash;
+}
+
+/**
+ * Transitions
+ *
+ * Todo: These should be moved to tailwind as custom transitions.
+ * See: https://tailwindcss.com/docs/transition-property
+ */
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
+}
+
+.scale-enter-from,
+.scale-leave-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+
+.slide-y-enter-active,
+.slide-y-leave-active {
+  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+}
+
+.slide-y-enter-from,
+.slide-y-leave-to {
+  opacity: 0;
+  transform: translateY(-0.875rem);
+}
+
+.slide-x-enter-active,
+.slide-x-leave-active {
+  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+}
+
+.slide-x-enter-from,
+.slide-x-leave-to {
+  opacity: 0;
+  transform: translateX(-0.875rem);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to {
+  opacity: 1;
+}
+
+.expand-enter-active,
+.expand-leave-active {
+  transition:
+    height theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out'),
+    opacity theme('transitionDuration.500') theme('transitionDuration.150'),
+    transform theme('transitionDuration.500') theme('transitionDuration.150');
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  height: 0;
+  opacity: 0;
+  transform: translateY(-0.875rem);
+  transition-delay: 0s;
+}
+
+.expand-leave-from,
+.expand-enter-to {
+  height: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.move-move {
+  transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');
 }

package/tailwind-base.ts

@@ -22,7 +22,7 @@ export default {
   // includes a variant modifier like /hover:bg-red-.+/.
   safelist: [
     {
-      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)?$/,
+      pattern: /(bg|text|border)-(purple|royal|blue|seafoam|teal|green|yellow|orange|red|ice)(-[1,5,7]00)$/,
     },
     // Illustration.vue stroke color.
     {
@@ -37,6 +37,8 @@ export default {
     // These are custom classes that we might not use in our Stash code, but we
     // define in Stash and want to keep in the final CSS for downstream use.
     'heading-jumbo',
+    // allow white and black to be used dynamically
+    'bg-white', 'bg-black', 'text-white', 'text-black', 'border-white', 'border-black',
   ],
 
   // Conflicts with our own custom classes
@@ -287,6 +289,9 @@ export default {
       // .tw-leading-*
       lineHeight: {
         initial: 'initial',
+        '2xl': 'calc(32/24)',
+        xl: 'calc(28/20)',
+        base: 'calc(24/16)',
         // for backwards compatibility with LL typography line-heights
         body: '20/14',
         small: '16/12',

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js

@@ -1,17 +0,0 @@
-const t = "_button_1ocn8_2", o = {
-  button: t,
-  "button--solid": "_button--solid_1ocn8_36",
-  "button--ghost": "_button--ghost_1ocn8_58",
-  "button--primary": "_button--primary_1ocn8_81 _button--solid_1ocn8_36",
-  "button--secondary": "_button--secondary_1ocn8_88 _button--ghost_1ocn8_58",
-  "button--tertiary": "_button--tertiary_1ocn8_95 _button--ghost_1ocn8_58",
-  "button--icon": "_button--icon_1ocn8_102",
-  "button--iconLabel": "_button--iconLabel_1ocn8_103",
-  "button--inline": "_button--inline_1ocn8_143",
-  "button--blue": "_button--blue_1ocn8_161",
-  "button--red": "_button--red_1ocn8_175"
-};
-export {
-  o as s
-};
-//# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map

package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-expand',\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'after-expand'): void;\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand ll-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'is-expanded': isExpanded,\n      'is-collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["contentRef","ref","onMounted","props","onExpand","element","height","afterExpand","emit","onCollapse"],"mappings":";AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;iBAwCMA,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACC,EAAM,cAAcH,EAAW,UACvBA,EAAA,MAAM,MAAM,WAAW;AAAA,IACpC,CACD;AAOK,UAAAI,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAClB,QAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM;AAAA,MAAA,CACjC;AAAA,IAAA,GAQGC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBG,EAAK,cAAc;AAAA,IAAA,GAQfC,IAAa,CAACJ,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGf,MAAAA,EAAA,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MAAA,CACxB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}