@cloudflare/realtimekit-ui 1.0.0-staging.7 → 1.0.0-staging.8

package/dist/cjs/rtk-sidebar-ui.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const index = require('./index-b47380e3.js');
-const uiStore = require('./ui-store-1d132800.js');
+const index = require('./index-daae8cee.js');
+const uiStore = require('./ui-store-3ddce955.js');
 
 const rtkSidebarUiCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  font-family: var(--rtk-font-family, sans-serif);\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n\n  container-type: size;\n  container-name: sidebarui;\n}\n\n@container sidebarui (height < 370px) {\n  .main-header {\n    height: var(--rtk-space-8, 32px) !important;\n  }\n  .close {\n    top: var(--rtk-space-0\\.5, 2px) !important;\n    left: var(--rtk-space-0, 0px) !important;\n    color: rgba(var(--rtk-colors-danger, 255 45 45) / 0.6);\n  }\n}\n\n:host([view='sidebar']) {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n}\n\n:host([view='full-screen']) {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  max-width: 100%;\n  border: none;\n}\n\n::slotted(*) {\n  flex-grow: 1;\n}\n\n.close {\n  position: absolute;\n  top: var(--rtk-space-2, 8px);\n  left: var(--rtk-space-2, 8px);\n  z-index: 10;\n}\n\n.main-header {\n  position: relative;\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  place-items: center;\n  justify-content: center;\n}\n\n.main-header, \n.mobile-tabs {\n  flex-shrink: 0;\n}\n\n.mobile-tabs {\n  display: flex;\n  place-items: center;\n  justify-content: space-evenly;\n  border-bottom: 1px solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.mobile-tabs button {\n  margin: var(--rtk-space-0, 0px);\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  padding: var(--rtk-space-0, 0px);\n  color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));\n  height: var(--rtk-space-10, 40px);\n  cursor: pointer;\n  padding-left: var(--rtk-space-4, 16px);\n  padding-right: var(--rtk-space-4, 16px);\n  font-weight: 500;\n  border-bottom: 1px solid transparent;\n}\n\n.mobile-tabs button.active {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\nheader h3 {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n@media only screen and (max-device-height: 480px) and (orientation: landscape) {\n  .main-header {\n    display: none !important;\n  }\n}\n\n.tab-participant-count-badge {\n  display: inline-block;\n  padding: 2px 5px;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n.tab-participant-count-badge:not(.selected-tab) {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.tab-participant-count-badge.requests-pending{\n  background-color: rgba(var(--rtk-colors-danger));\n}\n";
 const RtkSidebarUiStyle0 = rtkSidebarUiCss;

package/dist/cjs/rtk-sidebar.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const sidebar = require('./sidebar-023f63fc.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const sidebar = require('./sidebar-a3c87828.js');
+const index = require('./index-daae8cee.js');
 const index$2 = require('./index-821d14b7.js');
 
 const rtkSidebarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;max-width:var(--rtk-space-96, 384px);box-sizing:border-box;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));border-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity))}:host([view='sidebar']){right:var(--rtk-space-2, 8px);overflow:clip;border-radius:var(--rtk-border-radius-lg, 12px);--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-900, 26 26 26));--tw-shadow:var(--tw-shadow-colored)}:host([view='full-screen']){top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);max-width:100%}:host(.floating){position:absolute !important;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);left:auto;z-index:50}.pinned-state{position:absolute;right:var(--rtk-space-1, 4px);display:inline-flex;width:var(--rtk-space-2, 8px);justify-content:flex-end}";

package/dist/cjs/rtk-simple-grid.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
+const uiStore = require('./ui-store-3ddce955.js');
 const index$2 = require('./index-821d14b7.js');
 const grid = require('./grid-edc342a7.js');
 const ResizeObserver_es = require('./ResizeObserver.es-ba961f16.js');
-const index = require('./index-b47380e3.js');
+const index = require('./index-daae8cee.js');
 
 const rtkSimpleGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:block;height:100%;width:100%}";
 const RtkSimpleGridStyle0 = rtkSimpleGridCss;

package/dist/cjs/rtk-spotlight-grid.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
+const uiStore = require('./ui-store-3ddce955.js');
 const grid = require('./grid-edc342a7.js');
 const index$2 = require('./index-821d14b7.js');
-const index = require('./index-b47380e3.js');
+const index = require('./index-daae8cee.js');
 
 const rtkSpotlightGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;width:100%}main{flex:1 1 0%}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}:host([size='sm']),:host([size='md']){flex-direction:column}:host([size='md']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='md']) .grid-width-sm{height:25%}:host([size='md']) .grid-width-md{height:50%}:host([size='md']) .grid-width-lg{height:66.666667%}:host([size='sm']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='sm']) .grid-width-sm,:host([size='sm']) .grid-width-md,:host([size='sm']) .grid-width-lg{height:50%}:host([size='xl']) .grid-width-sm,:host([size='xl']) .grid-width-md,:host([size='xl']) .grid-width-lg{width:400px}:host([layout='column']){flex-direction:column}:host([layout='column']) main{flex:4}:host([layout='column']) aside{flex:2;max-width:100%;width:100%}";
 const RtkSpotlightGridStyle0 = rtkSpotlightGridCss;

package/dist/cjs/rtk-spotlight-indicator.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkSpotlightIndicatorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
 const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;

package/dist/cjs/rtk-stage-toggle.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const canJoinStage = (meeting) => {
     var _a, _b;

package/dist/cjs/rtk-stage.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkStageCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;position:relative;overflow:hidden}";
 const RtkStageStyle0 = rtkStageCss;

package/dist/cjs/rtk-transcript.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkTranscriptCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;color:rgb(var(--rtk-colors-text-1000, 255 255 255));display:flex;justify-content:center;vertical-align:middle;animation:show 0.4s ease;transition:0.4s;z-index:5;width:100%}.ctr{box-sizing:border-box;display:inline-flex;height:100%;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto;padding:var(--rtk-space-3, 12px);overflow:auto;max-width:50%}.message{margin:var(--rtk-space-0, 0px);display:inline-block;justify-content:center;max-width:100%;text-wrap:wrap;line-height:1.5rem}.message .name{font-weight:bold}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateY(120px)}100%{opacity:1;transform:translateY(0px)}}@keyframes exit{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120px)}}:host([size='sm']){font-size:14px}";
 const RtkTranscriptStyle0 = rtkTranscriptCss;

package/dist/cjs/rtk-transcripts.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 const clone = require('./clone-2e9a4cae.js');
 require('./keysIn-8bdbe83d.js');
 require('./isObjectLike-73d13a39.js');

package/dist/cjs/rtk-ui-provider.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const config = require('./config-985d77d0.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const config = require('./config-dba24e25.js');
 const size = require('./size-2a406e36.js');
 require('./keysIn-8bdbe83d.js');
 require('./isObjectLike-73d13a39.js');

package/dist/cjs/rtk-waiting-screen.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-1d132800.js');
-const index = require('./index-b47380e3.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkWaitingScreenCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.centered{display:flex;flex-direction:column;align-items:center}rtk-logo{margin-bottom:var(--rtk-space-8, 32px);height:var(--rtk-space-12, 48px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
 const RtkWaitingScreenStyle0 = rtkWaitingScreenCss;

package/dist/cjs/{sidebar-023f63fc.js → sidebar-a3c87828.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const uiStore = require('./ui-store-1d132800.js');
+const uiStore = require('./ui-store-3ddce955.js');
 
 const canViewChat = (meeting) => {
     if (meeting && !meeting.chat)

package/dist/cjs/{ui-store-1d132800.js → ui-store-3ddce955.js}

@@ -476,6 +476,7 @@ const defaultConfig = {
             gridTemplateColumns: 'repeat(3, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-2, 8px)',
         },
         'rtk-header.sm': {
             display: 'grid',
@@ -483,12 +484,14 @@ const defaultConfig = {
             gridTemplateColumns: 'repeat(2, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-1, 4px)',
         },
         'div#header-left': {
             display: 'flex',
             alignItems: 'center',
             height: '48px',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-logo': {
             height: '26px',
@@ -498,11 +501,14 @@ const defaultConfig = {
             alignItems: 'center',
             justifyContent: 'center',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
+            paddingInline: 'var(--dyte-space-3, 12px)',
         },
         'div#header-right': {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-stage': {
             display: 'flex',

package/dist/collection/components/rtk-clock/rtk-clock.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: inline-flex;
   align-items: center;
   -webkit-user-select: none;
@@ -27,9 +25,12 @@ p {
   font-variant-numeric: tabular-nums;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 

package/dist/collection/components/rtk-clock/rtk-clock.js

@@ -70,9 +70,10 @@ export class RtkClock {
         return time;
     }
     render() {
-        return (h(Host, { key: 'd831d119c2e44c4425a5177cc0638449bfc547c0', tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
-            h("rtk-icon", { key: 'ad15c7f2f8204d6677142b1d31e0a98fdac3130e', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
-            h("span", { key: '618dc61137349926d26c65664facbdbde01353e8', part: "text" }, this.getFormattedTime()),
+        const showClock = this.startedTime !== undefined;
+        return (h(Host, { key: '2775471382c6d07aae0ba8e18677d6850fd9cb34', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            h("rtk-icon", { key: '48b8bdfeef973d7f3eb4cdd526e386226a4b999a', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            h("span", { key: '9f2bb7aa7adc6ecb65c5fef57e406801e6592e59', part: "text" }, this.getFormattedTime()),
         ]));
     }
     static get is() { return "rtk-clock"; }

package/dist/collection/components/rtk-grid-pagination/rtk-grid-pagination.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -23,9 +21,12 @@ p {
   font-size: 16px;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 
@@ -98,11 +99,6 @@ rtk-button {
   background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
 }
 
-:host([variant='grid']) {
-  margin-left: var(--rtk-space-0, 0px);
-  margin-right: var(--rtk-space-0, 0px);
-}
-
 :host([variant='grid']) rtk-button {
   position: absolute;
   top: 50%;

package/dist/collection/components/rtk-grid-pagination/rtk-grid-pagination.js

@@ -123,7 +123,7 @@ export class RtkGridPagination {
         const { meta } = this.meeting;
         const isAudioRoom = (meta === null || meta === void 0 ? void 0 : meta.viewType) === 'AUDIO_ROOM';
         if (isAudioRoom || !this.showPagination) {
-            return;
+            return h(Host, { "data-hidden": true });
         }
         return (h(Host, null, h("rtk-button", { class: "prev", variant: "secondary", kind: "icon", disabled: this.pageCount === 0, onClick: this.prevPage, "aria-label": this.t('page.prev') }, h("rtk-icon", { icon: this.iconPack.chevron_left })), this.variant !== 'grid' && (h("div", { class: "center" }, h("span", { class: "page" }, this.pageCount === 0 ? (h("rtk-tooltip", { label: this.t('layout.auto') }, h("rtk-button", { kind: "icon", class: "auto" }, h("rtk-icon", { icon: this.iconPack.wand })))) : (this.page)), this.pageCount !== 0 && [
             h("span", { class: "slash" }, "/"),

package/dist/collection/components/rtk-livestream-indicator/rtk-livestream-indicator.css

@@ -18,6 +18,11 @@ p {
   display: flex;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host[size='sm'] {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);

package/dist/collection/components/rtk-livestream-indicator/rtk-livestream-indicator.js

@@ -39,7 +39,7 @@ export class RtkLivestreamIndicator {
     }
     render() {
         if (!showLivestream(this.meeting) || !this.isLivestreaming)
-            return;
+            return h(Host, { "data-hidden": true });
         return (h(Host, null, h("div", { class: "indicator", "aria-label": this.t('livestream.indicator'), part: "indicator" }, h("rtk-icon", { icon: this.iconPack.start_livestream, size: this.size }), h("span", null, this.t('LIVE')))));
     }
     static get is() { return "rtk-livestream-indicator"; }

package/dist/collection/components/rtk-meeting-title/rtk-meeting-title.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-3, 12px);
-  margin-right: var(--rtk-space-3, 12px);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -22,6 +20,11 @@ p {
   color: rgb(var(--rtk-colors-text-1000, 255 255 255));
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 .title {
   text-align: center;
   overflow: hidden;

package/dist/collection/components/rtk-meeting-title/rtk-meeting-title.js

@@ -26,8 +26,8 @@ export class RtkMeetingTitle {
         var _a;
         const title = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta.meetingTitle;
         if (title == null)
-            return null;
-        return (h(Host, { tabIndex: 0, role: "banner", "aria-label": title }, h("rtk-tooltip", { label: title, part: "tooltip" }, h("div", { class: "title", part: "title" }, title))));
+            return h(Host, { "data-hidden": true });
+        return (h(Host, { role: "banner", "aria-label": title }, h("rtk-tooltip", { label: title, part: "tooltip" }, h("div", { class: "title", part: "title" }, title))));
     }
     static get is() { return "rtk-meeting-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participant-count/rtk-participant-count.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: inline-flex;
   height: var(--rtk-space-10, 40px);
   -webkit-user-select: none;
@@ -23,9 +21,12 @@ p {
   align-items: center;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 

package/dist/collection/components/rtk-participant-count/rtk-participant-count.js

@@ -63,7 +63,7 @@ export class RtkParticipantCount {
     }
     render() {
         if (this.isViewer)
-            return null;
+            return h(Host, { "data-hidden": true });
         return (h(Host, { tabIndex: 0, role: "log", "aria-label": `${this.participantCount} ${this.t('participants')}` }, h("rtk-icon", { icon: this.iconPack.people, tabIndex: -1, "aria-hidden": true, part: "icon" }), this.participantCount));
     }
     static get is() { return "rtk-participant-count"; }

package/dist/collection/components/rtk-recording-indicator/rtk-recording-indicator.css

@@ -13,11 +13,14 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: block;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host[size='sm'] {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);

package/dist/collection/components/rtk-recording-indicator/rtk-recording-indicator.js

@@ -44,7 +44,7 @@ export class RtkRecordingIndicator {
         }
     }
     render() {
-        return (h(Host, { key: 'b08cb38ca93d2db33679ac266e18063c4a2756cf' }, this.isRecording && (h("div", { key: '5ba29ae19d2b338f32ec07ec2ef2662c61a7b5f9', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: '6ed9ed4a1191ee245f4d1315fcf9f9a6c958687e', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'c7bb79757e0b9ce8b4637645efbef75fb22e2a33' }, this.t('recording.label'))))));
+        return (h(Host, { key: 'b76ca6a6d3dea0df7318e8882055dcd04dbd7a46', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: '32d34242dbeb17c11067f51c5fbf0b1ebd7ef541', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: 'fb7851e4bb57e4193afc05edbfe9b24122a5b743', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'de677e81dc576b9188b896ecbb458a62b5bd74dc' }, this.t('recording.label'))))));
     }
     static get is() { return "rtk-recording-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-viewer-count/rtk-viewer-count.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: inline-flex;
   height: var(--rtk-space-10, 40px);
   -webkit-user-select: none;
@@ -24,9 +22,12 @@ p {
   font-size: 14px;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 

package/dist/collection/components/rtk-viewer-count/rtk-viewer-count.js

@@ -52,7 +52,7 @@ export class RtkViewerCount {
     }
     render() {
         if (!showLivestream(this.meeting))
-            return null;
+            return h(Host, { "data-hidden": true });
         return (h(Host, { tabIndex: 0, role: "log", "aria-label": `${this.viewerCount} ${this.t('viewers')}` }, h("rtk-icon", { icon: this.iconPack.viewers, tabIndex: -1, "aria-hidden": true, part: "icon" }), this.viewerCount, " ", this.t('viewers')));
     }
     static get is() { return "rtk-viewer-count"; }

package/dist/collection/lib/default-ui-config.js

@@ -18,6 +18,7 @@ export const defaultConfig = {
             gridTemplateColumns: 'repeat(3, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-2, 8px)',
         },
         'rtk-header.sm': {
             display: 'grid',
@@ -25,12 +26,14 @@ export const defaultConfig = {
             gridTemplateColumns: 'repeat(2, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-1, 4px)',
         },
         'div#header-left': {
             display: 'flex',
             alignItems: 'center',
             height: '48px',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-logo': {
             height: '26px',
@@ -40,11 +43,14 @@ export const defaultConfig = {
             alignItems: 'center',
             justifyContent: 'center',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
+            paddingInline: 'var(--dyte-space-3, 12px)',
         },
         'div#header-right': {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-stage': {
             display: 'flex',

package/dist/collection/utils/config.js

@@ -173,6 +173,7 @@ export const generateConfig = (oldConfig, meeting, toExtend = {}, options = { gr
                 gridTemplateColumns: 'repeat(3, 1fr)',
                 gridTemplateRows: '1fr',
                 alignItems: 'center',
+                '--header-section-gap': 'var(--dyte-space-2, 8px)',
             },
             'rtk-header.sm': {
                 display: 'grid',
@@ -180,12 +181,14 @@ export const generateConfig = (oldConfig, meeting, toExtend = {}, options = { gr
                 gridTemplateColumns: 'repeat(2, 1fr)',
                 gridTemplateRows: '1fr',
                 alignItems: 'center',
+                '--header-section-gap': 'var(--dyte-space-1, 4px)',
             },
             'div#header-left': {
                 display: 'flex',
                 alignItems: 'center',
                 height: '48px',
                 wordBreak: 'break-all',
+                gap: 'var(--header-section-gap)',
             },
             'rtk-logo': {
                 height: '26px',
@@ -195,11 +198,14 @@ export const generateConfig = (oldConfig, meeting, toExtend = {}, options = { gr
                 alignItems: 'center',
                 justifyContent: 'center',
                 wordBreak: 'break-all',
+                gap: 'var(--header-section-gap)',
+                paddingInline: 'var(--dyte-space-3, 12px)',
             },
             'div#header-right': {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'flex-end',
+                gap: 'var(--header-section-gap)',
             },
             'rtk-stage': {
                 display: 'flex',

package/dist/components/index.js

@@ -1,9 +1,9 @@
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-c3592601.js';
-import { d as defaultConfig } from './p-9fe29f26.js';
-export { B as BreakoutRoomsManager, d as defaultConfig, a as defaultIconPack, b as defaultLanguage, g as getInitialStates, u as uiStore, c as useLanguage } from './p-9fe29f26.js';
-import { g as generateConfig } from './p-b2771f98.js';
-export { e as extendConfig, g as generateConfig, p as provideRtkDesignSystem } from './p-b2771f98.js';
-export { R as RtkNotificationsAudio } from './p-6234f3c4.js';
+import { d as defaultConfig } from './p-e6d09c50.js';
+export { B as BreakoutRoomsManager, d as defaultConfig, a as defaultIconPack, b as defaultLanguage, g as getInitialStates, u as uiStore, c as useLanguage } from './p-e6d09c50.js';
+import { g as generateConfig } from './p-4a436e2d.js';
+export { e as extendConfig, g as generateConfig, p as provideRtkDesignSystem } from './p-4a436e2d.js';
+export { R as RtkNotificationsAudio } from './p-50ecaaf1.js';
 export { g as generateChatGroupKey, a as getChatGroups, c as getParticipantUserId, b as getUnreadChatCounts } from './p-0abe4b8a.js';
 
 /**

package/dist/components/{p-e897d0cb.js → p-00649ab8.js}

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
 import { f as formatDateTime, e as elapsedDuration } from './p-382270d8.js';
-import { S as SyncWithStore } from './p-15594b6b.js';
-import { a as defaultIconPack } from './p-9fe29f26.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { a as defaultIconPack } from './p-e6d09c50.js';
 import './p-a83ccdbd.js';
-import { d as defineCustomElement$6 } from './p-40528bcd.js';
-import { d as defineCustomElement$5 } from './p-456299a7.js';
-import { d as defineCustomElement$4 } from './p-0083965b.js';
-import { d as defineCustomElement$3 } from './p-8db0a4da.js';
-import { d as defineCustomElement$2 } from './p-79e3eeee.js';
-import { d as defineCustomElement$1 } from './p-531aad34.js';
+import { d as defineCustomElement$6 } from './p-7373cc7e.js';
+import { d as defineCustomElement$5 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$4 } from './p-4cedc9e8.js';
+import { d as defineCustomElement$3 } from './p-10182034.js';
+import { d as defineCustomElement$2 } from './p-c7dcb441.js';
+import { d as defineCustomElement$1 } from './p-1947c106.js';
 
 const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}.message-wrapper{display:flex;flex-direction:row-reverse;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column}.header{margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.body .metadata{margin-top:var(--rtk-space-2, 8px);align-self:flex-end;font-size:10px}.bubble{max-width:var(--rtk-space-96, 384px);padding:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-0, 0px);top:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;padding-left:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-right:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;background:radial-gradient(\n    at top right,\n    rgb(var(--rtk-colors-brand-300, 73 124 253)) 60%,\n    rgba(255, 255, 255, 0) 80%\n  )}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming .actions{background:radial-gradient(\n      at top right,\n      rgb(var(--rtk-colors-background-800, 30 30 30)) 60%,\n      rgba(255, 255, 255, 0) 80%\n    )}.incoming .actions rtk-icon{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
 const RtkMessageViewStyle0 = rtkMessageViewCss;

package/dist/components/{p-7ef7b528.js → p-00b13124.js}

@@ -1,19 +1,19 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { a as defaultIconPack, c as useLanguage } from './p-9fe29f26.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-15594b6b.js';
-import { d as defineCustomElement$c } from './p-40528bcd.js';
-import { d as defineCustomElement$b } from './p-56f3354e.js';
-import { d as defineCustomElement$a } from './p-b05351e6.js';
-import { d as defineCustomElement$9 } from './p-3b2f5ba8.js';
-import { d as defineCustomElement$8 } from './p-456299a7.js';
-import { d as defineCustomElement$7 } from './p-8720d374.js';
-import { d as defineCustomElement$6 } from './p-0083965b.js';
-import { d as defineCustomElement$5 } from './p-8db0a4da.js';
-import { d as defineCustomElement$4 } from './p-79e3eeee.js';
-import { d as defineCustomElement$3 } from './p-ea4ce54a.js';
-import { d as defineCustomElement$2 } from './p-531aad34.js';
-import { d as defineCustomElement$1 } from './p-2e04d08a.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$c } from './p-7373cc7e.js';
+import { d as defineCustomElement$b } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$a } from './p-f682505d.js';
+import { d as defineCustomElement$9 } from './p-35d6211b.js';
+import { d as defineCustomElement$8 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$7 } from './p-14aafb1d.js';
+import { d as defineCustomElement$6 } from './p-4cedc9e8.js';
+import { d as defineCustomElement$5 } from './p-10182034.js';
+import { d as defineCustomElement$4 } from './p-c7dcb441.js';
+import { d as defineCustomElement$3 } from './p-7d26c3e0.js';
+import { d as defineCustomElement$2 } from './p-1947c106.js';
+import { d as defineCustomElement$1 } from './p-cd66e89b.js';
 
 const rtkChatSearchResultsCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;flex-direction:column;position:relative;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}";
 const RtkChatSearchResultsStyle0 = rtkChatSearchResultsCss;