@cloudflare/realtimekit-ui 1.0.4-staging.1 → 1.0.4-staging.3

package/dist/cjs/{TextMessage-b9599251.js → TextMessage-87a57af2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-05554ce6.js');
-const chat = require('./chat-aac81e73.js');
+const chat = require('./chat-5f3ed9c3.js');
 
 const renderLink = (content) => {
     return (index.h("a", { class: "link", href: content, target: "_blank", rel: "noopener noreferrer" }, content));

package/dist/cjs/{chat-aac81e73.js → chat-5f3ed9c3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const uiStore = require('./ui-store-af000a8e.js');
+const uiStore = require('./ui-store-e94b055c.js');
 
 const parseMessageForTarget = (message) => {
     let parsedMessage = null;

package/dist/cjs/{debounce-8ebb7833.js → debounce-d5375a75.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const uiStore = require('./ui-store-af000a8e.js');
+const uiStore = require('./ui-store-e94b055c.js');
 
 /** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';

package/dist/cjs/{index-2ae99c70.js → index-618e08d7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-af000a8e.js');
+const uiStore = require('./ui-store-e94b055c.js');
 
 function SyncWithStore() {
     return function (proto, propName) {
@@ -27,7 +27,15 @@ function SyncWithStore() {
                 if (event.detail.requestId === requestId) {
                     // Blindly put peer specific store's value for propName in host propName
                     const storeValue = event.detail.store.state[propName];
-                    host[propName] = storeValue;
+                    host.componentOnReady().then(() => {
+                        /**
+                         * NOTE(ravindra-dyte):
+                         * https://stenciljs.com/docs/api#componentonready
+                         * This psudo ready callback is to ensure that the component is ready to accept props
+                         * Without this, changing the prop would not trigger @Watch of prop in the initial mount phase
+                         *  */
+                        host[propName] = storeValue;
+                    });
                     uiStore.appendElement(propName, host, event.detail.store);
                     host[`_rtkStoreToCleanup-${propName}`] = event.detail.store;
                     // Since peer specific store is available, remove element prop from global store

package/dist/cjs/index.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiStore = require('./ui-store-af000a8e.js');
-const notification = require('./notification-541b7cfa.js');
-const chat = require('./chat-aac81e73.js');
+const uiStore = require('./ui-store-e94b055c.js');
+const merge = require('./merge-b6b71419.js');
+const notification = require('./notification-bc9915bb.js');
+const chat = require('./chat-5f3ed9c3.js');
 require('./index-05554ce6.js');
-require('./merge-ee976be5.js');
 
 /**
  * Send notification which will be displayed in the `<rtk-notifications />` component.
@@ -255,10 +255,10 @@ exports.getInitialStates = uiStore.getInitialStates;
 exports.uiState = uiStore.uiState;
 exports.uiStore = uiStore.uiStore;
 exports.useLanguage = uiStore.useLanguage;
+exports.provideRtkDesignSystem = merge.provideRtkDesignSystem;
 exports.RtkNotificationsAudio = notification.RTKNotificationsAudio;
 exports.extendConfig = notification.extendConfig;
 exports.generateConfig = notification.generateConfig;
-exports.provideRtkDesignSystem = notification.provideRtkDesignSystem;
 exports.generateChatGroupKey = chat.generateChatGroupKey;
 exports.getChatGroups = chat.getChatGroups;
 exports.getParticipantUserId = chat.getParticipantUserId;

package/dist/cjs/{merge-ee976be5.js → merge-b6b71419.js}

@@ -1,6 +1,253 @@
 'use strict';
 
-const uiStore = require('./ui-store-af000a8e.js');
+const uiStore = require('./ui-store-e94b055c.js');
+
+const spacingScale = [
+	0,
+	0.5,
+	1,
+	1.5,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	12,
+	14,
+	16,
+	20,
+	24,
+	28,
+	32,
+	36,
+	40,
+	44,
+	48,
+	52,
+	56,
+	60,
+	64,
+	72,
+	80,
+	96
+];
+
+const THEMES = {
+    darkest: {
+        background: {
+            1000: '#080808',
+            900: '#1A1A1A',
+            800: '#1E1E1E',
+            700: '#2C2C2C',
+            600: '#393939',
+        },
+        text: '#FFFFFF',
+    },
+    dark: {
+        background: {
+            1000: '#252525',
+            900: '#2F2F2F',
+            800: '#323232',
+            700: '#3E3E3E',
+            600: '#4A4A4A',
+        },
+        text: '#F5F5F5',
+        'video-bg': '#1C1C1C',
+    },
+    light: {
+        background: {
+            1000: '#FFFFFF',
+            900: '#F5F5F5',
+            800: '#EBEBEB',
+            700: '#E0E0E0',
+            600: '#D6D6D6',
+        },
+        text: '#111111',
+        'text-on-brand': '#ffffff',
+        'video-bg': '#DADADA',
+    },
+};
+
+const BORDER_WIDTHS = {
+    none: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    thin: {
+        none: 0,
+        sm: 1,
+        md: 2,
+        lg: 4,
+    },
+    fat: {
+        none: 0,
+        sm: 2,
+        md: 4,
+        lg: 8,
+    },
+};
+const BORDER_RADII = {
+    sharp: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    rounded: {
+        none: 0,
+        sm: 4,
+        md: 8,
+        lg: 12,
+    },
+    'extra-rounded': {
+        none: 0,
+        sm: 8,
+        md: 16,
+        lg: 24,
+    },
+    circular: {
+        none: 9999,
+        sm: 9999,
+        md: 9999,
+        lg: 9999,
+    },
+};
+
+function hexToRGB(h) {
+    h = h.trim();
+    let r = '0', g = '0', b = '0';
+    if (h.length == 4) {
+        r = '0x' + h[1] + h[1];
+        g = '0x' + h[2] + h[2];
+        b = '0x' + h[3] + h[3];
+    }
+    else if (h.length > 6) {
+        r = '0x' + h[1] + h[2];
+        g = '0x' + h[3] + h[4];
+        b = '0x' + h[5] + h[6];
+    }
+    return [+r, +g, +b];
+}
+const isValidHexColor = (color) => {
+    return typeof color === 'string' && color.length === 7 && color.startsWith('#');
+};
+
+const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
+function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
+    return tokenPrefix + token;
+}
+const provideGoogleFont = (fontFamily) => {
+    const weights = [400, 500, 700];
+    const links = [];
+    if (document.querySelector('link[data-rtk-font]') == null) {
+        /**
+         * Adds the following preconnect link tags for faster google font loading
+         * <link rel="preconnect" href="https://fonts.googleapis.com">
+         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+         */
+        const p1 = document.createElement('link');
+        p1.rel = 'preconnect';
+        p1.setAttribute('data-rtk-font', 'true');
+        p1.href = 'https://fonts.googleapis.com';
+        const p2 = p1.cloneNode(true);
+        p2.href = 'https://fonts.gstatic.com';
+        p2.crossOrigin = '';
+        links.push(p1, p2);
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-rtk-font', fontFamily);
+    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
+    links.push(link);
+    document.head.append(...links);
+};
+const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    spacingScale.forEach((space) => {
+        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
+    });
+};
+const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderWidth in BORDER_WIDTHS) {
+        const widths = BORDER_WIDTHS[borderWidth];
+        Object.keys(widths).forEach((type) => {
+            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
+        });
+    }
+};
+const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderRadius in BORDER_RADII) {
+        const radii = BORDER_RADII[borderRadius];
+        Object.keys(radii).forEach((type) => {
+            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
+        });
+    }
+};
+const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    Object.keys(colors).forEach((color) => {
+        const colorValue = colors[color];
+        if (typeof colorValue === 'string') {
+            if (color === 'text' || color === 'text-on-brand') {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
+                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
+                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
+                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
+                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
+            }
+            else {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
+            }
+        }
+        else if (typeof colorValue === 'object') {
+            Object.keys(colorValue).forEach((shade) => {
+                const shadeValue = colorValue[shade];
+                const rgb = hexToRGB(shadeValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
+            });
+        }
+    });
+};
+/**
+ * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
+ * @param el The element/node you want to _provide_ RTK Design system.
+ * @param tokens The design tokens you want to updated.
+ */
+const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
+    if (typeof el !== 'object') {
+        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
+    }
+    if (typeof googleFont === 'string') {
+        provideGoogleFont(googleFont);
+        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
+    }
+    if (typeof fontFamily === 'string') {
+        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
+    }
+    if (typeof spacingBase === 'number') {
+        provideSpacing(el, spacingBase, tokenPrefix);
+    }
+    if (typeof borderWidth === 'string') {
+        provideBorderWidth(el, borderWidth, tokenPrefix);
+    }
+    if (typeof borderRadius === 'string') {
+        provideBorderRadius(el, borderRadius, tokenPrefix);
+    }
+    if (typeof theme === 'string') {
+        const colors = THEMES[theme];
+        if (colors != null)
+            provideColors(el, colors, tokenPrefix);
+    }
+    if (typeof colors === 'object') {
+        provideColors(el, colors, tokenPrefix);
+    }
+};
 
 /**
  * This method returns the first argument it receives.
@@ -573,3 +820,5 @@ var merge = createAssigner(function(object, source, srcIndex) {
 const deepMerge = merge;
 
 exports.deepMerge = deepMerge;
+exports.isValidHexColor = isValidHexColor;
+exports.provideRtkDesignSystem = provideRtkDesignSystem;

package/dist/cjs/{notification-541b7cfa.js → notification-bc9915bb.js}

@@ -1,254 +1,7 @@
 'use strict';
 
-const uiStore = require('./ui-store-af000a8e.js');
-const merge = require('./merge-ee976be5.js');
-
-const spacingScale = [
-	0,
-	0.5,
-	1,
-	1.5,
-	2,
-	3,
-	4,
-	5,
-	6,
-	7,
-	8,
-	9,
-	10,
-	12,
-	14,
-	16,
-	20,
-	24,
-	28,
-	32,
-	36,
-	40,
-	44,
-	48,
-	52,
-	56,
-	60,
-	64,
-	72,
-	80,
-	96
-];
-
-const THEMES = {
-    darkest: {
-        background: {
-            1000: '#080808',
-            900: '#1A1A1A',
-            800: '#1E1E1E',
-            700: '#2C2C2C',
-            600: '#393939',
-        },
-        text: '#FFFFFF',
-    },
-    dark: {
-        background: {
-            1000: '#252525',
-            900: '#2F2F2F',
-            800: '#323232',
-            700: '#3E3E3E',
-            600: '#4A4A4A',
-        },
-        text: '#F5F5F5',
-        'video-bg': '#1C1C1C',
-    },
-    light: {
-        background: {
-            1000: '#FFFFFF',
-            900: '#F5F5F5',
-            800: '#EBEBEB',
-            700: '#E0E0E0',
-            600: '#D6D6D6',
-        },
-        text: '#111111',
-        'text-on-brand': '#ffffff',
-        'video-bg': '#DADADA',
-    },
-};
-
-const BORDER_WIDTHS = {
-    none: {
-        none: 0,
-        sm: 0,
-        md: 0,
-        lg: 0,
-    },
-    thin: {
-        none: 0,
-        sm: 1,
-        md: 2,
-        lg: 4,
-    },
-    fat: {
-        none: 0,
-        sm: 2,
-        md: 4,
-        lg: 8,
-    },
-};
-const BORDER_RADII = {
-    sharp: {
-        none: 0,
-        sm: 0,
-        md: 0,
-        lg: 0,
-    },
-    rounded: {
-        none: 0,
-        sm: 4,
-        md: 8,
-        lg: 12,
-    },
-    'extra-rounded': {
-        none: 0,
-        sm: 8,
-        md: 16,
-        lg: 24,
-    },
-    circular: {
-        none: 9999,
-        sm: 9999,
-        md: 9999,
-        lg: 9999,
-    },
-};
-
-function hexToRGB(h) {
-    h = h.trim();
-    let r = '0', g = '0', b = '0';
-    if (h.length == 4) {
-        r = '0x' + h[1] + h[1];
-        g = '0x' + h[2] + h[2];
-        b = '0x' + h[3] + h[3];
-    }
-    else if (h.length > 6) {
-        r = '0x' + h[1] + h[2];
-        g = '0x' + h[3] + h[4];
-        b = '0x' + h[5] + h[6];
-    }
-    return [+r, +g, +b];
-}
-const isValidHexColor = (color) => {
-    return typeof color === 'string' && color.length === 7 && color.startsWith('#');
-};
-
-const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
-function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
-    return tokenPrefix + token;
-}
-const provideGoogleFont = (fontFamily) => {
-    const weights = [400, 500, 700];
-    const links = [];
-    if (document.querySelector('link[data-rtk-font]') == null) {
-        /**
-         * Adds the following preconnect link tags for faster google font loading
-         * <link rel="preconnect" href="https://fonts.googleapis.com">
-         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-         */
-        const p1 = document.createElement('link');
-        p1.rel = 'preconnect';
-        p1.setAttribute('data-rtk-font', 'true');
-        p1.href = 'https://fonts.googleapis.com';
-        const p2 = p1.cloneNode(true);
-        p2.href = 'https://fonts.gstatic.com';
-        p2.crossOrigin = '';
-        links.push(p1, p2);
-    }
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.setAttribute('data-rtk-font', fontFamily);
-    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
-    links.push(link);
-    document.head.append(...links);
-};
-const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    spacingScale.forEach((space) => {
-        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
-    });
-};
-const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    if (borderWidth in BORDER_WIDTHS) {
-        const widths = BORDER_WIDTHS[borderWidth];
-        Object.keys(widths).forEach((type) => {
-            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
-        });
-    }
-};
-const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    if (borderRadius in BORDER_RADII) {
-        const radii = BORDER_RADII[borderRadius];
-        Object.keys(radii).forEach((type) => {
-            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
-        });
-    }
-};
-const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    Object.keys(colors).forEach((color) => {
-        const colorValue = colors[color];
-        if (typeof colorValue === 'string') {
-            if (color === 'text' || color === 'text-on-brand') {
-                const rgb = hexToRGB(colorValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
-                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
-                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
-                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
-                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
-            }
-            else {
-                const rgb = hexToRGB(colorValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
-            }
-        }
-        else if (typeof colorValue === 'object') {
-            Object.keys(colorValue).forEach((shade) => {
-                const shadeValue = colorValue[shade];
-                const rgb = hexToRGB(shadeValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
-            });
-        }
-    });
-};
-/**
- * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
- * @param el The element/node you want to _provide_ RTK Design system.
- * @param tokens The design tokens you want to updated.
- */
-const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
-    if (typeof el !== 'object') {
-        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
-    }
-    if (typeof googleFont === 'string') {
-        provideGoogleFont(googleFont);
-        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
-    }
-    if (typeof fontFamily === 'string') {
-        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
-    }
-    if (typeof spacingBase === 'number') {
-        provideSpacing(el, spacingBase, tokenPrefix);
-    }
-    if (typeof borderWidth === 'string') {
-        provideBorderWidth(el, borderWidth, tokenPrefix);
-    }
-    if (typeof borderRadius === 'string') {
-        provideBorderRadius(el, borderRadius, tokenPrefix);
-    }
-    if (typeof theme === 'string') {
-        const colors = THEMES[theme];
-        if (colors != null)
-            provideColors(el, colors, tokenPrefix);
-    }
-    if (typeof colors === 'object') {
-        provideColors(el, colors, tokenPrefix);
-    }
-};
+const uiStore = require('./ui-store-e94b055c.js');
+const merge = require('./merge-b6b71419.js');
 
 /**
  * Extend the default UI Config with your own
@@ -406,10 +159,10 @@ const generateConfig = (oldConfig, meeting, toExtend = {}, options = { grid_pagi
         logo,
     };
     designTokens = oldConfig.designTokens;
-    if (isValidHexColor((_k = (_j = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _j === void 0 ? void 0 : _j.colors) === null || _k === void 0 ? void 0 : _k.textOnBrand)) {
+    if (merge.isValidHexColor((_k = (_j = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _j === void 0 ? void 0 : _j.colors) === null || _k === void 0 ? void 0 : _k.textOnBrand)) {
         designTokens.colors['text-on-brand'] = (_m = (_l = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _l === void 0 ? void 0 : _l.colors) === null || _m === void 0 ? void 0 : _m.textOnBrand;
     }
-    if (isValidHexColor((_p = (_o = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _o === void 0 ? void 0 : _o.colors) === null || _p === void 0 ? void 0 : _p.videoBg)) {
+    if (merge.isValidHexColor((_p = (_o = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _o === void 0 ? void 0 : _o.colors) === null || _p === void 0 ? void 0 : _p.videoBg)) {
         designTokens.colors['video-bg'] = (_r = (_q = oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.designTokens) === null || _q === void 0 ? void 0 : _q.colors) === null || _r === void 0 ? void 0 : _r.videoBg;
     }
     let config = {
@@ -643,4 +396,3 @@ class RTKNotificationsAudio {
 exports.RTKNotificationsAudio = RTKNotificationsAudio;
 exports.extendConfig = extendConfig;
 exports.generateConfig = generateConfig;
-exports.provideRtkDesignSystem = provideRtkDesignSystem;

package/dist/cjs/rtk-ai-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-af000a8e.js');
-const index = require('./index-2ae99c70.js');
+const uiStore = require('./ui-store-e94b055c.js');
+const index = require('./index-618e08d7.js');
 
 const rtkAiToggleCss = ":host{display:block}:host([data-hidden]){display:none}";
 const RtkAiToggleStyle0 = rtkAiToggleCss;

package/dist/cjs/rtk-ai-transcriptions.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-af000a8e.js');
+const uiStore = require('./ui-store-e94b055c.js');
 const ChatHead = require('./ChatHead-d2f094ec.js');
 const scroll = require('./scroll-c6404609.js');
-const index = require('./index-2ae99c70.js');
+const index = require('./index-618e08d7.js');
 require('./string-a410fab6.js');
 
 const rtkAiTranscriptionsCss = ":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)}.head{display:flex;align-items:center}.head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.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)))}*{box-sizing:border-box;border-width:0;border-style:solid}:host{width:100%;display:flex;flex-direction:column}.processing{display:flex;flex:1 1 0%;flex-direction:column;align-items:center;justify-content:center}.content{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-3, 12px);flex:1 0 0px;overflow-y:scroll}.started-message{margin-top:var(--rtk-space-5, 20px);margin-bottom:var(--rtk-space-5, 20px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.search-bar{height:var(--rtk-space-14, 56px);width:100%;border-bottom-width:var(--rtk-border-width-sm, 1px);--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding:var(--rtk-space-3, 12px)}input{height:100%;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-size:14px;border-radius:var(--rtk-border-radius-sm, 4px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.caption-view{height:var(--rtk-space-12, 48px);width:100%;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);border-bottom-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));display:flex;align-items:center;justify-content:space-between;font-size:14px}.message .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);font-size:14px;word-break:break-word}.message{margin-bottom:var(--rtk-space-3, 12px)}.message:last-child{margin-bottom:var(--rtk-space-0, 0px)}";

package/dist/cjs/rtk-ai.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-af000a8e.js');
-const index = require('./index-2ae99c70.js');
+const uiStore = require('./ui-store-e94b055c.js');
+const index = require('./index-618e08d7.js');
 
 const rtkAiCss = ":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;box-sizing:border-box;display:flex;width:100%;max-width:var(--rtk-space-80, 320px);flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden}.close{position:absolute;top:var(--rtk-space-3, 12px);left:var(--rtk-space-3, 12px)}.title{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:var(--rtk-space-0, 0px);text-align:center;font-size:14px;font-weight:400}rtk-ai-transcriptions{flex:1}:host([view='sidebar']){margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}:host([view='full-screen']){position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:50;max-width:100%;border:none}";
 const RtkAiStyle0 = rtkAiCss;

package/dist/cjs/rtk-audio-grid.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-af000a8e.js');
-const index = require('./index-2ae99c70.js');
+const uiStore = require('./ui-store-e94b055c.js');
+const index = require('./index-618e08d7.js');
 const index$2 = require('./index-821d14b7.js');
 
 const rtkAudioGridCss = ":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)))}:host{position:relative;height:100%;width:100%;box-sizing:border-box}.content{position:relative;display:flex;height:100%;width:100%;flex-direction:column;overflow-y:auto}.waitlist-area{display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.listening-title{text-align:center;margin-top:var(--rtk-space-5, 20px);margin-bottom:var(--rtk-space-4, 16px)}.waitlist-grid{flex:1 1 0%}.grid{box-sizing:border-box;flex:1 1 0%;gap:var(--rtk-space-6, 24px);display:flex;align-content:center;justify-content:center;flex-wrap:wrap}:host([size='md']) .grid{gap:var(--rtk-space-4, 16px)}:host([size='sm']) .grid{gap:var(--rtk-space-3, 12px)}rtk-audio-tile{aspect-ratio:1 / 1;flex:none;width:calc(20%);max-width:var(--rtk-space-48, 192px);transition:all 0.3s}rtk-audio-tile[size='md']{width:100%;max-width:var(--rtk-space-36, 144px)}rtk-audio-tile[size='sm']{width:100%;max-width:var(--rtk-space-24, 96px)}";