@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.11

package/styles/base.css

@@ -9,6 +9,32 @@
   @tailwind utilities;
 */
 
+@layer components {
+  /**
+   * ll-grid is a legacy grid class that conflicts with tailwinds out of the box grid class.
+   * It's quite hard to replace it with a 1-1 swap, because there's so many default styles included in ll-grid, but it's
+   * also used in conjunction with other grid classes. For example:
+   *      <div class="ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12">
+   *
+   * In this example, ll-grid has default grid-cols styles, but the dev is overriding those defaults. If we were to
+   * replace ll-grid with tw-grid in a simple find/replace, we would HAVE to include
+   * `tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12` as well, and then in examples like the one above,
+   * you'd have weird conflicts and specificity issues.
+   *
+   * Conclusion: So, for now,
+   * - `.ll-grid` & `.grid` will continue to exist in backwards-compat.css as is.
+   * - `.tw-grid` will behave as expected and is a simple utility with no baked in defaults.
+   * - We're creating a custom .tw-ll-grid class that will have the same styles but won't cause weird issues downstream.
+   *   In the future we can remove this class OR keep it around if we decide we want to keep a grid utility with
+   *   some baked in defaults.
+   */
+  .tw-ll-grid {
+    @apply tw-grid tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12;
+
+    --deprecated: "WARNING: Use `tw-grid` instead";
+  }
+}
+
 /**
  * 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
@@ -23,10 +49,11 @@
 }
 
 /**
- * General styles and/or reset css could go here.
+ * Variables
  */
 
 :root {
+  --height-topbar: 56px;
   --grid-gutter: 12px;
 
   /* The tooltips position relative to the toggle element */
@@ -35,11 +62,126 @@
   /* Centers arrow horizontally or vertically along tooltip on arrow's center */
   --arrow-position-centered: calc(50% - theme('spacing[1.5]'));
 
-  @media screen(lg) {
+  @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;
@@ -87,7 +229,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,7 +268,7 @@
     @apply tw-text-2xl tw-font-medium tw-text-ice-900;
   }
 
-  @media screen(md) {
+  @media screen('md') {
     .heading-jumbo {
       font-size: theme('fontSize.5xl');
     }
@@ -173,7 +315,7 @@
    *
    * Add LeafLink's base styles to fix issues on localhost
    */
-  a {
+  a, .link {
     @apply tw-text-blue-500;
 
     background-color: transparent;
@@ -474,6 +616,33 @@
   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.
  */
@@ -483,7 +652,7 @@
 
   background: var(--color-ice-900);
   border-radius: theme('borderRadius.DEFAULT');
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
   color: var(--color-white);
   font-size: 0.75rem;
   line-height: calc(16 / 12);
@@ -510,59 +679,59 @@
     z-index: theme('zIndex.behind');
     width: 12px;
   }
+}
 
-  &--bottom,
-  &--top {
-    left: calc(50% + calc(var(--offset) * 1px));
-    transform: translateX(-50%);
+.tooltip--bottom,
+.tooltip--top {
+  left: calc(50% + calc(var(--offset) * 1px));
+  transform: translateX(-50%);
 
-    &::after {
-      left: calc(#{$arrow-position-centered} + calc(var(--offset) * -1px));
-    }
+  &::after {
+    left: calc(var(--arrow-position-centered) + calc(var(--offset) * -1px));
   }
+}
 
-  &--bottom {
-    top: var(--tooltip-position);
+.tooltip--bottom {
+  top: var(--tooltip-position);
 
-    &::after {
-      transform: rotate(-45deg);
-    }
+  &::after {
+    transform: rotate(-45deg);
   }
+}
 
-  &--top {
-    bottom: var(--tooltip-position);
+.tooltip--top {
+  bottom: var(--tooltip-position);
 
-    &::after {
-      top: calc(100% - theme('spacing[1.5]'));
-    }
+  &::after {
+    top: calc(100% - theme('spacing[1.5]'));
   }
+}
 
-  &--left,
-  &--right {
-    top: 50%;
-    transform: translateY(-50%);
+.tooltip--left,
+.tooltip--right {
+  top: 50%;
+  transform: translateY(-50%);
 
-    &::after {
-      top: var(--arrow-position-centered);
-    }
+  &::after {
+    top: var(--arrow-position-centered);
   }
+}
 
-  &--left {
-    right: var(--tooltip-position);
+.tooltip--left {
+  right: var(--tooltip-position);
 
-    &::after {
-      left: calc(100% - theme('spacing[1.5]'));
-      transform: rotate(45deg);
-    }
+  &::after {
+    left: calc(100% - theme('spacing[1.5]'));
+    transform: rotate(45deg);
   }
+}
 
-  &--right {
-    left: var(--tooltip-position);
+.tooltip--right {
+  left: var(--tooltip-position);
 
-    &::after {
-      left: calc(-1 * theme('spacing[1.5]'));
-      transform: rotate(-135deg);
-    }
+  &::after {
+    left: calc(-1 * theme('spacing[1.5]'));
+    transform: rotate(-135deg);
   }
 }
 
@@ -589,8 +758,8 @@
  */
 
 @keyframes shake {
-  from,
-  to {
+  0%,
+  100% {
     transform: translate3d(0, 0, 0);
   }
 
@@ -616,7 +785,7 @@
 
 
 @keyframes pulse {
-  from {
+  0% {
     transform: scale3d(1, 1, 1);
   }
 
@@ -624,7 +793,7 @@
     transform: scale3d(1.25, 1.25, 1.25);
   }
 
-  to {
+  100% {
     transform: scale3d(1, 1, 1);
   }
 }
@@ -655,7 +824,7 @@
 }
 
 @keyframes flash {
-  from {
+  0% {
     opacity: 1;
   }
 
@@ -663,7 +832,7 @@
     opacity: 0;
   }
 
-  to {
+  100% {
     opacity: 1;
   }
 }
@@ -679,89 +848,78 @@
  * See: https://tailwindcss.com/docs/transition-property
  */
 
-.scale {
-  &-enter-active,
-  &-leave-active {
-    transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
-  }
+.scale-enter-active,
+.scale-leave-active {
+  transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
+}
 
-  &-enter-from,
-  &-leave-from,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(0);
-  }
+.scale-enter-from,
+.scale-leave-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0);
 }
 
-.slide-y {
-  &-enter-active,
-  &-leave-active {
-    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-  }
 
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(-0.875rem);
-  }
+.slide-y-enter-active,
+.slide-y-leave-active {
+  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
 }
 
-.slide-x {
-  &-enter-active,
-  &-leave-active {
-    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-  }
+.slide-y-enter-from,
+.slide-y-leave-to {
+  opacity: 0;
+  transform: translateY(-0.875rem);
+}
 
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(-0.875rem);
-  }
+.slide-x-enter-active,
+.slide-x-leave-active {
+  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
 }
 
-.fade {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-  }
+.slide-x-enter-from,
+.slide-x-leave-to {
+  opacity: 0;
+  transform: translateX(-0.875rem);
+}
 
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+}
 
-  &-enter-to {
-    opacity: 1;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to {
+  opacity: 1;
 }
 
-.expand {
-  &-enter-active,
-  &-leave-active {
-    transition:
+.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');
-  }
+}
 
-  &-enter-from,
-  &-leave-to {
-    height: 0;
-    opacity: 0;
-    transform: translateY(-0.875rem);
-    transition-delay: 0s;
-  }
+.expand-enter-from,
+.expand-leave-to {
+  height: 0;
+  opacity: 0;
+  transform: translateY(-0.875rem);
+  transition-delay: 0s;
+}
 
-  &-leave-from,
-  &-enter-to {
-    height: auto;
-    opacity: 1;
-    transform: translateY(0);
-  }
+.expand-leave-from,
+.expand-enter-to {
+  height: auto;
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.move {
-  &-move {
-    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-  }
+.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Field.vue_vue_type_script_setup_true_lang-475832fe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-475832fe.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('field-error-'));\n  const labelId = computed(() => uniqueId('field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n    ]\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"{ 'tw-mb-1.5': !!props.isReadOnly }\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span v-else-if=\"props.hintText\" class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["attrs","useAttrs","slots","useSlots","fieldId","computed","props","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,QAAQ,CAAC,GACvDC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,cAAc,CAAC,GACvEE,IAAUJ,EAAS,MAAME,EAAS,cAAc,CAAC,GACjDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Label.vue_vue_type_script_setup_true_lang-1d29d98a.js

@@ -1,37 +0,0 @@
-import { defineComponent as s, computed as n, openBlock as t, createBlock as i, resolveDynamicComponent as d, normalizeClass as c, withCtx as p, renderSlot as f, createElementBlock as o, toDisplayString as u, unref as m, createCommentVNode as h } from "vue";
-import { t as w } from "./locale.js";
-const _ = {
-  key: 0,
-  class: "text-red font-weight-bold",
-  title: "Required",
-  "aria-label": "required"
-}, y = {
-  key: 1,
-  class: "text-ice-700"
-}, g = /* @__PURE__ */ s({
-  __name: "Label",
-  props: {
-    for: { default: void 0 },
-    hasError: { type: Boolean, default: !1 },
-    isRequired: { type: Boolean, default: !1 },
-    showOptional: { type: Boolean, default: !1 },
-    legend: { type: Boolean, default: !1 }
-  },
-  setup(a) {
-    const e = a, l = n(() => e.legend ? "legend" : "label");
-    return (r, k) => (t(), i(d(l.value), {
-      class: c(["stash-label tw-block tw-truncate tw-text-ice-900 tw-font-medium tw-text-sm tw-leading-6", { "animate-shake": e.hasError }]),
-      for: e.for
-    }, {
-      default: p(() => [
-        f(r.$slots, "default"),
-        e.isRequired ? (t(), o("span", _, " * ")) : e.showOptional ? (t(), o("span", y, " (" + u(m(w)("ll.optional")) + ") ", 1)) : h("", !0)
-      ]),
-      _: 3
-    }, 8, ["class", "for"]));
-  }
-});
-export {
-  g as _
-};
-//# sourceMappingURL=Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map

package/dist/Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.vue_vue_type_script_setup_true_lang-1d29d98a.js","sources":["../src/components/Label/Label.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface LabelProps {\n    for?: string;\n    hasError?: boolean;\n    isRequired?: boolean;\n    showOptional?: boolean;\n    /**\n     * Indicates whether the wrapper element to be rendered\n     * should be a label or a legend.\n     */\n    legend?: boolean;\n  }\n\n  const props = withDefaults(defineProps<LabelProps>(), {\n    for: undefined,\n    hasError: false,\n    isRequired: false,\n    showOptional: false,\n    legend: false,\n  });\n\n  const wrapperElement = computed(() => {\n    return props.legend ? 'legend' : 'label';\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    class=\"stash-label tw-block tw-truncate tw-text-ice-900 tw-font-medium tw-text-sm tw-leading-6\"\n    :class=\"{ 'animate-shake': props.hasError }\"\n    :for=\"props.for\"\n  >\n    <!-- @slot the label text -->\n    <slot></slot>\n    <span v-if=\"props.isRequired\" class=\"text-red font-weight-bold\" title=\"Required\" aria-label=\"required\"> * </span>\n    <span v-else-if=\"props.showOptional\" class=\"text-ice-700\"> ({{ t('ll.optional') }}) </span>\n  </component>\n</template>\n"],"names":["wrapperElement","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAiBC,EAAS,MACvBC,EAAM,SAAS,WAAW,OAClC;;;;;;;;;;;;;"}

package/dist/Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js

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

package/dist/Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js.map

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

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js

@@ -1,11 +0,0 @@
-const _ = "_pagination_kh7yl_2", i = "_prev_kh7yl_20", t = "_next_kh7yl_25", n = {
-  pagination: _,
-  prev: i,
-  next: t,
-  "is-active": "_is-active_kh7yl_38",
-  "is-disabled": "_is-disabled_kh7yl_51"
-};
-export {
-  n as s
-};
-//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

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