@leaflink/stash 44.0.0-beta.7 → 44.0.0-beta.8

package/styles/base.css

@@ -23,10 +23,25 @@
 }
 
 /**
- * General styles and/or reset css could go here.
+ * 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;
+
+  --deprecated: "WARNING: Use `tw-grid` instead";
+}
+
+/**
+ * Variables
  */
 
 :root {
+  --height-topbar: 56px;
   --grid-gutter: 12px;
 
   /* The tooltips position relative to the toggle element */
@@ -35,11 +50,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;
@@ -126,7 +256,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 +303,7 @@
    *
    * Add LeafLink's base styles to fix issues on localhost
    */
-  a {
+  a, .link {
     @apply tw-text-blue-500;
 
     background-color: transparent;
@@ -474,6 +604,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 +640,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 +667,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(#{$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 +746,8 @@
  */
 
 @keyframes shake {
-  from,
-  to {
+  0%,
+  100% {
     transform: translate3d(0, 0, 0);
   }
 
@@ -616,7 +773,7 @@
 
 
 @keyframes pulse {
-  from {
+  0% {
     transform: scale3d(1, 1, 1);
   }
 
@@ -624,7 +781,7 @@
     transform: scale3d(1.25, 1.25, 1.25);
   }
 
-  to {
+  100% {
     transform: scale3d(1, 1, 1);
   }
 }
@@ -655,7 +812,7 @@
 }
 
 @keyframes flash {
-  from {
+  0% {
     opacity: 1;
   }
 
@@ -663,7 +820,7 @@
     opacity: 0;
   }
 
-  to {
+  100% {
     opacity: 1;
   }
 }
@@ -679,89 +836,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

@@ -289,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-b2ee90e6.js

@@ -1,17 +0,0 @@
-const t = "_button_trcic_2", o = {
-  button: t,
-  "button--solid": "_button--solid_trcic_36",
-  "button--ghost": "_button--ghost_trcic_58",
-  "button--primary": "_button--primary_trcic_81 _button--solid_trcic_36",
-  "button--secondary": "_button--secondary_trcic_88 _button--ghost_trcic_58",
-  "button--tertiary": "_button--tertiary_trcic_95 _button--ghost_trcic_58",
-  "button--icon": "_button--icon_trcic_102",
-  "button--iconLabel": "_button--iconLabel_trcic_103",
-  "button--inline": "_button--inline_trcic_143",
-  "button--blue": "_button--blue_trcic_161",
-  "button--red": "_button--red_trcic_175"
-};
-export {
-  o as s
-};
-//# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js.map

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

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

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

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

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

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

package/dist/Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.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\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--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-4483019d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-4483019d.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-mt-1 tw-block tw-whitespace-pre-line tw-text-xs 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-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\" 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-mt-1 tw-whitespace-pre-line tw-text-xs\" 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-2de35913.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Label.vue_vue_type_script_setup_true_lang-2de35913.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-sm tw-font-medium tw-leading-6 tw-text-ice-900\"\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=\"font-weight-bold tw-text-red-500\" title=\"Required\" aria-label=\"required\">\n      *\n    </span>\n    <span v-else-if=\"props.showOptional\" class=\"tw-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-1a2084f9.js

@@ -1,11 +0,0 @@
-const s = "_pagination_1s7z5_2", _ = "_prev_1s7z5_20", i = "_next_1s7z5_25", t = {
-  pagination: s,
-  prev: _,
-  next: i,
-  "is-active": "_is-active_1s7z5_38",
-  "is-disabled": "_is-disabled_1s7z5_51"
-};
-export {
-  t as s
-};
-//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js.map

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

package/dist/Table.keys-75e99266.js

@@ -1,27 +0,0 @@
-const o = "_root_jdd28_2", t = {
-  root: o,
-  "layout--scroll": "_layout--scroll_jdd28_6",
-  "has-actions": "_has-actions_jdd28_12",
-  "layout--stack": "_layout--stack_jdd28_16",
-  "is-control": "_is-control_jdd28_28",
-  "root--density-comfortable": "_root--density-comfortable_jdd28_52"
-}, _ = "_root_10hu1_2", e = {
-  root: _,
-  "is-expandable": "_is-expandable_10hu1_9",
-  "root--hidden-divider": "_root--hidden-divider_10hu1_14",
-  "is-expanded": "_is-expanded_10hu1_14",
-  "layout--scroll": "_layout--scroll_10hu1_22",
-  "layout--stack": "_layout--stack_10hu1_36",
-  "row-selection-checkbox": "_row-selection-checkbox_10hu1_56",
-  "row-control-cell": "_row-control-cell_10hu1_62",
-  "row-expansion-content": "_row-expansion-content_10hu1_73",
-  "row-expansion": "_row-expansion_10hu1_73"
-}, s = Object.freeze({
-  key: Symbol("TABLE_INJECTION_KEY")
-});
-export {
-  s as T,
-  e as a,
-  t as s
-};
-//# sourceMappingURL=Table.keys-75e99266.js.map