tide-design-system 2.5.20 → 2.6.1

package/dist/components/TideToaster.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideToaster.vue2.js","sources":["../../src/components/TideToaster.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a toaster component intended to be used for displaying notifications.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetoaster--docs) for TideToaster\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script setup lang=\"ts\">\n  import { onBeforeMount } from 'vue';\n\n  import TideAlert from '@/components/TideAlert.vue';\n  import { useTideToaster } from '@/composables/useTideToaster';\n  import { CSS } from '@/types/Styles';\n  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';\n\n  const { toasts, clearToasts, cancelAutoDismiss, startAutoDismiss } = useTideToaster();\n\n  onBeforeMount(() => {\n    initFauxTopLayer();\n  });\n</script>\n\n<template>\n  <Teleport :to=\"`#${TOP_LAYER_ID}`\">\n    <div\n      v-bind=\"$attrs\"\n      :class=\"[\n        'tide-toaster',\n        CSS.HEIGHT.FULL,\n        CSS.POINTER_EVENTS.OFF,\n        CSS.POSITION.FIXED,\n        CSS.POSITIONING.LEFT,\n        CSS.POSITIONING.TOP,\n        CSS.WIDTH.FULL,\n      ]\"\n    >\n      <TransitionGroup name=\"pop\">\n        <div\n          :class=\"[\n            'tide-toast-wrap',\n            CSS.POINTER_EVENTS.ON,\n            CSS.POSITION.ABSOLUTE,\n            CSS.Z_INDEX.ONE,\n            CSS.POSITIONING.RIGHT,\n            CSS.POSITIONING.TOP,\n            CSS.MARGIN.FULL.ONE,\n            CSS.WIDTH.STRETCH,\n          ]\"\n          :key=\"toast.id\"\n          @mouseenter=\"cancelAutoDismiss\"\n          @mouseleave=\"startAutoDismiss\"\n          v-for=\"toast in toasts\"\n        >\n          <TideAlert\n            :cta-label=\"toast.action?.label\"\n            :heading=\"toast.heading\"\n            :style=\"{ '--tide-max-width': 'none' }\"\n            @close=\"clearToasts\"\n            @cta-click=\"toast?.action?.callback\"\n            is-dismissible\n            is-toast\n          >\n            {{ toast.description }}\n          </TideAlert>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n  .pop-enter-active,\n  .pop-leave-active {\n    transition: var(--tide-animate);\n    transition-property: opacity, transform, translate;\n  }\n\n  .pop-enter-from {\n    translate: 100% 0;\n  }\n\n  .pop-leave-to {\n    opacity: 0;\n    z-index: 0 !important;\n  }\n\n  .pop-leave-active {\n    position: absolute;\n  }\n\n  @container tide-responsive-root (min-width: 768px) {\n    .tide-toast-wrap {\n      width: 400px;\n    }\n  }\n</style>\n"],"names":["_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_createVNode","_TransitionGroup","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createTextVNode","_toDisplayString"],"mappings":";;;;;AAME,MAAA,cAAe,EAAE,cAAc,MAAA;;;;;AAW/B,UAAM,EAAE,QAAQ,aAAa,mBAAmB,iBAAA,IAAqB,eAAA;AAErE,kBAAc,MAAM;AAClB,uBAAA;AAAA,IACF,CAAC;;0BAIDA,YA4CWC,UAAA;AAAA,QA5CA,QAAQC,MAAA,YAAA,CAAY;AAAA,MAAA;QAC7BC,mBA0CM,OA1CNC,WA0CM,KAAA,QAzCU;AAAA,UACb,OAAK;AAAA;YAAoCF,MAAA,GAAA,EAAI,OAAO;AAAA,YAAcA,MAAA,GAAA,EAAI,eAAe;AAAA,YAAaA,MAAA,GAAA,EAAI,SAAS;AAAA,YAAeA,MAAA,GAAA,EAAI,YAAY;AAAA,YAAcA,MAAA,GAAA,EAAI,YAAY;AAAA,YAAaA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAA;AAAA;UAUpMG,YA6BkBC,iBAAA,EA7BD,MAAK,SAAK;AAAA,6BAevB,MAAuB;AAAA,gCAdzBC,mBA2BMC,UAAA,MAAAC,WAbYP,MAAA,MAAA,GAAM,CAAf,UAAK;;oCAddK,mBA2BM,OAAA;AAAA,kBA1BH,OAAKG,eAAA;AAAA;oBAA+CR,MAAA,GAAA,EAAI,eAAe;AAAA,oBAAgBA,MAAA,GAAA,EAAI,SAAS;AAAA,oBAAsBA,MAAA,GAAA,EAAI,QAAQ;AAAA,oBAAiBA,MAAA,GAAA,EAAI,YAAY;AAAA,oBAAmBA,MAAA,GAAA,EAAI,YAAY;AAAA,oBAAiBA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,oBAAiBA,MAAA,GAAA,EAAI,MAAM;AAAA,kBAAA;kBAUtQ,KAAK,MAAM;AAAA,kBACX,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,+BAAEA,MAAA,iBAAA,KAAAA,MAAA,iBAAA,EAAA,GAAA,IAAA;AAAA,kBACZ,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,+BAAEA,MAAA,gBAAA,KAAAA,MAAA,gBAAA,EAAA,GAAA,IAAA;AAAA,gBAAA;kBAGbG,YAUY,WAAA;AAAA,oBATT,cAAW,WAAM,WAAN,mBAAc;AAAA,oBACzB,SAAS,MAAM;AAAA,oBACf,OAAO,EAAA,oBAAA,OAAA;AAAA,oBACP,SAAOH,MAAA,WAAA;AAAA,oBACP,aAAW,oCAAO,WAAP,mBAAe;AAAA,oBAC3B,kBAAA;AAAA,oBACA,YAAA;AAAA,kBAAA;qCAEA,MAAuB;AAAA,sBAApBS,gBAAAC,gBAAA,MAAM,WAAW,GAAA,CAAA;AAAA,oBAAA;;;;;;;;;;;;;"}

package/dist/composables/useTideConfig.js

@@ -0,0 +1,16 @@
+import { inject, provide } from "vue";
+import { ELEMENT } from "../types/Element.js";
+const tideConfigDefaults = { linkComponent: ELEMENT.LINK };
+const CONFIG_KEY = Symbol("tide-config");
+const provideTideConfig = (config = {}) => {
+  const configWithDefaults = { ...tideConfigDefaults, ...config };
+  provide(CONFIG_KEY, configWithDefaults);
+};
+const useTideConfig = () => {
+  return inject(CONFIG_KEY, tideConfigDefaults);
+};
+export {
+  provideTideConfig,
+  useTideConfig
+};
+//# sourceMappingURL=useTideConfig.js.map

package/dist/composables/useTideConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTideConfig.js","sources":["../../src/composables/useTideConfig.ts"],"sourcesContent":["import { inject, provide } from 'vue';\n\nimport { ELEMENT } from '@/types/Element';\n\nimport type { Component } from 'vue';\n\ntype TideConfig = {\n  linkComponent: Component | typeof ELEMENT.LINK;\n};\n\nconst tideConfigDefaults: TideConfig = { linkComponent: ELEMENT.LINK };\n\nconst CONFIG_KEY = Symbol('tide-config');\n\nexport const provideTideConfig = (config: Partial<TideConfig> = {}) => {\n  const configWithDefaults: TideConfig = { ...tideConfigDefaults, ...config };\n\n  provide<TideConfig>(CONFIG_KEY, configWithDefaults);\n};\n\nexport const useTideConfig = () => {\n  return inject<TideConfig>(CONFIG_KEY, tideConfigDefaults);\n};\n"],"names":[],"mappings":";;AAUA,MAAM,qBAAiC,EAAE,eAAe,QAAQ,KAAA;AAEhE,MAAM,aAAa,OAAO,aAAa;AAEhC,MAAM,oBAAoB,CAAC,SAA8B,OAAO;AACrE,QAAM,qBAAiC,EAAE,GAAG,oBAAoB,GAAG,OAAA;AAEnE,UAAoB,YAAY,kBAAkB;AACpD;AAEO,MAAM,gBAAgB,MAAM;AACjC,SAAO,OAAmB,YAAY,kBAAkB;AAC1D;"}

package/dist/composables/useTideForm.js

@@ -0,0 +1,18 @@
+import { ref, provide, inject } from "vue";
+const FORM_KEY = Symbol("tide-form");
+const useTideForm = () => {
+  const forceShowErrors = ref(false);
+  provide(FORM_KEY, { forceShowErrors });
+  const revealValidationErrors = () => {
+    forceShowErrors.value = true;
+  };
+  return { revealValidationErrors };
+};
+const useFormContext = () => {
+  return inject(FORM_KEY);
+};
+export {
+  useFormContext,
+  useTideForm
+};
+//# sourceMappingURL=useTideForm.js.map

package/dist/composables/useTideForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTideForm.js","sources":["../../src/composables/useTideForm.ts"],"sourcesContent":["import { inject, provide, ref } from 'vue';\n\nimport type { Ref } from 'vue';\n\ntype TideFormContext = {\n  forceShowErrors: Ref<boolean>;\n};\n\nconst FORM_KEY = Symbol('tide-form');\n\nexport const useTideForm = () => {\n  const forceShowErrors = ref<boolean>(false);\n\n  provide<TideFormContext>(FORM_KEY, { forceShowErrors });\n\n  const revealValidationErrors = () => {\n    forceShowErrors.value = true;\n  };\n\n  return { revealValidationErrors };\n};\n\nexport const useFormContext = () => {\n  return inject<TideFormContext>(FORM_KEY);\n};\n"],"names":[],"mappings":";AAQA,MAAM,WAAW,OAAO,WAAW;AAE5B,MAAM,cAAc,MAAM;AAC/B,QAAM,kBAAkB,IAAa,KAAK;AAE1C,UAAyB,UAAU,EAAE,iBAAiB;AAEtD,QAAM,yBAAyB,MAAM;AACnC,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SAAO,EAAE,uBAAA;AACX;AAEO,MAAM,iBAAiB,MAAM;AAClC,SAAO,OAAwB,QAAQ;AACzC;"}

package/dist/composables/useTideToaster.js

@@ -0,0 +1,49 @@
+import { inject, ref, readonly, provide } from "vue";
+const TOASTER_KEY = Symbol("tide-toaster");
+const AUTO_DISMISS_DURATION_MS = {
+  ACTIONABLE: 1e4,
+  INFORMATIONAL: 5e3
+};
+const useTideToaster = () => {
+  const injected = inject(TOASTER_KEY);
+  if (injected) return injected;
+  const timeoutId = ref(null);
+  const toasts = ref([]);
+  const id = ref(0);
+  const addToast = (newToast) => {
+    id.value++;
+    clearToasts();
+    toasts.value.push({
+      ...newToast,
+      id: `tide-toast-${id.value}`
+    });
+    if (typeof window !== "undefined") {
+      cancelAutoDismiss();
+      startAutoDismiss();
+    }
+  };
+  const clearToasts = () => {
+    toasts.value = [];
+  };
+  const cancelAutoDismiss = () => {
+    if (timeoutId.value) clearTimeout(timeoutId.value);
+  };
+  const startAutoDismiss = () => {
+    if (!toasts.value.length) return;
+    const autoDismissDuration = toasts.value[0].action ? AUTO_DISMISS_DURATION_MS.ACTIONABLE : AUTO_DISMISS_DURATION_MS.INFORMATIONAL;
+    timeoutId.value = setTimeout(clearToasts, autoDismissDuration);
+  };
+  const toaster = {
+    addToast,
+    cancelAutoDismiss,
+    clearToasts,
+    startAutoDismiss,
+    toasts: readonly(toasts)
+  };
+  provide(TOASTER_KEY, toaster);
+  return toaster;
+};
+export {
+  useTideToaster
+};
+//# sourceMappingURL=useTideToaster.js.map

package/dist/composables/useTideToaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTideToaster.js","sources":["../../src/composables/useTideToaster.ts"],"sourcesContent":["import { inject, provide, readonly, ref } from 'vue';\n\nimport type { TideToast, TideToastOmitId, TideToaster } from '@/types/Toast';\n\nconst TOASTER_KEY = Symbol('tide-toaster');\n\nconst AUTO_DISMISS_DURATION_MS = {\n  ACTIONABLE: 10000,\n  INFORMATIONAL: 5000,\n} as const;\n\nexport const useTideToaster = () => {\n  const injected = inject<TideToaster>(TOASTER_KEY);\n  if (injected) return injected;\n\n  const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);\n  const toasts = ref<TideToast[]>([]);\n  const id = ref<number>(0);\n\n  const addToast = (newToast: TideToastOmitId) => {\n    id.value++;\n    clearToasts();\n\n    toasts.value.push({\n      ...newToast,\n      id: `tide-toast-${id.value}`,\n    } as TideToast);\n\n    if (typeof window !== 'undefined') {\n      cancelAutoDismiss();\n      startAutoDismiss();\n    }\n  };\n\n  const clearToasts = () => {\n    toasts.value = [];\n  };\n\n  const cancelAutoDismiss = () => {\n    if (timeoutId.value) clearTimeout(timeoutId.value);\n  };\n\n  const startAutoDismiss = () => {\n    if (!toasts.value.length) return;\n\n    const autoDismissDuration = toasts.value[0].action\n      ? AUTO_DISMISS_DURATION_MS.ACTIONABLE\n      : AUTO_DISMISS_DURATION_MS.INFORMATIONAL;\n    timeoutId.value = setTimeout(clearToasts, autoDismissDuration);\n  };\n\n  const toaster: TideToaster = {\n    addToast,\n    cancelAutoDismiss,\n    clearToasts,\n    startAutoDismiss,\n    toasts: readonly(toasts),\n  };\n\n  provide(TOASTER_KEY, toaster);\n\n  return toaster;\n};\n"],"names":[],"mappings":";AAIA,MAAM,cAAc,OAAO,cAAc;AAEzC,MAAM,2BAA2B;AAAA,EAC/B,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,OAAoB,WAAW;AAChD,MAAI,SAAU,QAAO;AAErB,QAAM,YAAY,IAA0C,IAAI;AAChE,QAAM,SAAS,IAAiB,EAAE;AAClC,QAAM,KAAK,IAAY,CAAC;AAExB,QAAM,WAAW,CAAC,aAA8B;AAC9C,OAAG;AACH,gBAAA;AAEA,WAAO,MAAM,KAAK;AAAA,MAChB,GAAG;AAAA,MACH,IAAI,cAAc,GAAG,KAAK;AAAA,IAAA,CACd;AAEd,QAAI,OAAO,WAAW,aAAa;AACjC,wBAAA;AACA,uBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,WAAO,QAAQ,CAAA;AAAA,EACjB;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,UAAU,MAAO,cAAa,UAAU,KAAK;AAAA,EACnD;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,CAAC,OAAO,MAAM,OAAQ;AAE1B,UAAM,sBAAsB,OAAO,MAAM,CAAC,EAAE,SACxC,yBAAyB,aACzB,yBAAyB;AAC7B,cAAU,QAAQ,WAAW,aAAa,mBAAmB;AAAA,EAC/D;AAEA,QAAM,UAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,SAAS,MAAM;AAAA,EAAA;AAGzB,UAAQ,aAAa,OAAO;AAE5B,SAAO;AACT;"}

package/dist/css/grid-layout.css

@@ -16,11 +16,11 @@
     minmax(var(--tide-gutter-width), 1fr);
 }
 
-@media (min-width: 768px) {
+@container tide-responsive-root (min-width: 768px) {
   .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
 }
 
-@media (min-width: 1232px) {
+@container tide-responsive-root (min-width: 1232px) {
   .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
 }
 

package/dist/css/reset.css

@@ -4,6 +4,7 @@
 
 body {
   color: var(--tide-on-surface);
+  container: var(--tide-responsive-root);
   font-size: var(--tide-font-16);
   font-weight: var(--tide-font-regular);
   line-height: 1.4;

package/dist/css/utilities-responsive.css

@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@container tide-responsive-root (min-width: 768px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.sm-tide-position-absolute {position: absolute;}
@@ -534,7 +534,7 @@
 	}
 }
 
-@media (min-width: 992px) {
+@container tide-responsive-root (min-width: 992px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.md-tide-position-absolute {position: absolute;}
@@ -1070,7 +1070,7 @@
 	}
 }
 
-@media (min-width: 1232px) {
+@container tide-responsive-root (min-width: 1232px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.lg-tide-position-absolute {position: absolute;}
@@ -1606,7 +1606,7 @@
 	}
 }
 
-@media (min-width: 1920px) {
+@container tide-responsive-root (min-width: 1920px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.xl-tide-position-absolute {position: absolute;}

package/dist/css/variables.css

@@ -55,6 +55,9 @@
   /* CSS Grid */
   --tide-safe-fr: minmax(0, 1fr);
 
+  /* Container Query Root */
+  --tide-responsive-root: tide-responsive-root / inline-size;
+
   /* Opacity */
   --tide-disabled: 0.333;
 
@@ -219,5 +222,3 @@
       color-mix(in srgb, var(--tide-gradient-bottom-left-color) 0%, transparent) 100%
     );
 }
-
-

package/dist/index.d.ts

@@ -5,6 +5,21 @@ import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 
+declare const __VLS_component: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+element: keyof HTMLElementTagNameMap;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -17,6 +32,12 @@ declare type __VLS_WithTemplateSlots_10<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_11<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -938,12 +959,16 @@ export declare const PRIORITY: {
 
 export declare type Priority = (typeof PRIORITY)[keyof typeof PRIORITY];
 
-declare interface Props extends SelectField {
+declare type Props = {
+    element?: keyof HTMLElementTagNameMap;
+};
+
+declare interface Props_2 extends SelectField {
     inputId?: string;
     supportingText?: string;
 }
 
-declare type Props_2 = {
+declare type Props_3 = {
     heading?: string;
     links: Link[];
 };
@@ -1443,6 +1468,8 @@ selected: boolean;
 export declare const TideCarousel: __VLS_WithTemplateSlots_3<DefineComponent<    {
 /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */
 hasDots?: boolean;
+/** Optional image displayed alongside the header */
+headerImage?: string;
 /** Determines whether to display on-page or floating carousel */
 isFloating?: boolean;
 /** Determines font role used for title display */
@@ -1462,6 +1489,8 @@ slidesAddedToView: (slidesInView: number[]) => any;
 }, string, PublicProps, Readonly<{
 /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */
 hasDots?: boolean;
+/** Optional image displayed alongside the header */
+headerImage?: string;
 /** Determines whether to display on-page or floating carousel */
 isFloating?: boolean;
 /** Determines font role used for title display */
@@ -1482,6 +1511,7 @@ onSlidesAddedToView?: ((slidesInView: number[]) => any) | undefined;
 title: string;
 isFloating: boolean;
 hasDots: boolean;
+headerImage: string;
 isHeadline1: boolean;
 isHideawayButtons: boolean;
 isScrollByPage: boolean;
@@ -1610,7 +1640,7 @@ orientation: Orientation;
  *
  * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideform--docs) for TideForm
  */
-export declare const TideForm: __VLS_WithTemplateSlots_6<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const TideForm: __VLS_WithTemplateSlots_7<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 submit: (e: SubmitEvent) => any;
 }, string, PublicProps, Readonly<{}> & Readonly<{
 onSubmit?: ((e: SubmitEvent) => any) | undefined;
@@ -1690,7 +1720,7 @@ img: HTMLImageElement;
  *
  * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideimagebackground--docs) for TideImageBackground
  */
-export declare const TideImageBackground: __VLS_WithTemplateSlots_7<DefineComponent<    {
+export declare const TideImageBackground: __VLS_WithTemplateSlots_8<DefineComponent<    {
 /** Text display when image can't be loaded. */
 alt?: string;
 /** Determines whether to delay loading until image is in viewport. */
@@ -1979,10 +2009,10 @@ selectElement: HTMLSelectElement;
 /**
  * @deprecated Use `TideInputSelect.vue` imported from 'tide-design-system' npm package instead.
  */
-export declare const TideInputSelectDeprecated: DefineComponent<Props, {
+export declare const TideInputSelectDeprecated: DefineComponent<Props_2, {
 error: Ref<ValidationError_2, ValidationError_2>;
 value: Ref<string | undefined, string | undefined>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {
 label: string;
 error: ValidationError_2;
 required: boolean;
@@ -2392,7 +2422,7 @@ iconTrailing: Icon;
  *
  * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemodal--docs) for TideModal
  */
-export declare const TideModal: __VLS_WithTemplateSlots_8<DefineComponent<    {
+export declare const TideModal: __VLS_WithTemplateSlots_9<DefineComponent<    {
 modelValue: boolean;
 } & {
 /**
@@ -2481,7 +2511,7 @@ totalResults: number;
  *
  * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidepopover--docs) for TidePopover
  */
-export declare const TidePopover: __VLS_WithTemplateSlots_9<DefineComponent<    {
+export declare const TidePopover: __VLS_WithTemplateSlots_10<DefineComponent<    {
 /** Determines the HTML node over which the Popover will appear */
 anchorId: string;
 /** Determines spacing between Popover and anchor node */
@@ -2556,7 +2586,9 @@ realm: Realm;
 markOnly: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const TideSeoLinks: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {
+export declare const TideResponsiveRoot: __VLS_WithTemplateSlots_6<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const TideSeoLinks: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_3> & Readonly<{}>, {
 heading: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
@@ -2565,7 +2597,7 @@ heading: string;
  *
  * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidesheet--docs) for TideSheet
  */
-export declare const TideSheet: __VLS_WithTemplateSlots_10<DefineComponent<    {
+export declare const TideSheet: __VLS_WithTemplateSlots_11<DefineComponent<    {
 modelValue: boolean;
 } & {
 /** Controls display of the back button. */