@loomhq/lens 12.10.0 → 12.11.0

package/dist/cjs/index.js

@@ -281,7 +281,6 @@ var borderAlpha = 0.14;
 var backdropAlpha = 0.46;
 var backdropDarkAlpha = 0.9;
 var backdropTwilightAlpha = 0.8;
-var focusRingAlpha = 0.8;
 var buttonBorderAlpha = 0.25;
 var tabBackgroundAlpha = 0.06;
 var highlightAlpha = 0.15;
@@ -289,11 +288,11 @@ var highlightHoverAlpha = 0.3;
 var highlightActiveAlpha = 0.45;
 var hslaBaseColors = {
   red: { h: 4, s: 64, l: 48, a: 1 },
-  blurpleLight: { h: 240, s: 83.3, l: 95.3, a: 1 },
-  blurpleMedium: { h: 242, s: 81, l: 87.6, a: 1 },
-  blurple: { h: 242, s: 88.4, l: 66.3, a: 1 },
-  blurpleDark: { h: 242, s: 87.6, l: 62, a: 1 },
-  blurpleStrong: { h: 242, s: 55, l: 36, a: 1 },
+  blurpleLight: { h: 214.3, s: 91.3, l: 95.5, a: 1 },
+  blurpleMedium: { h: 216.5, s: 92, l: 90.2, a: 1 },
+  blurple: { h: 215.4, s: 80, l: 47.65, a: 1 },
+  blurpleDark: { h: 215.9, s: 79.9, l: 41, a: 1 },
+  blurpleStrong: { h: 216.3, s: 69.2, l: 22.9, a: 1 },
   offWhite: { h: 0, s: 0, l: 97.25, a: 1 },
   blueLight: { h: 216.5, s: 92, l: 90.2, a: 1 },
   blue: { h: 215.4, s: 80, l: 47.65, a: 1 },
@@ -324,7 +323,6 @@ var themeSharedColors = {
   record: hslaBaseColors.orange,
   recordHover: darken(hslaBaseColors.orange, hoverIncrease),
   recordActive: darken(hslaBaseColors.orange, activeIncrease),
-  focusRing: alphaFunction(hslaBaseColors.blurple, focusRingAlpha),
   backdropDark: alphaFunction(hslaGreys.grey8, backdropDarkAlpha),
   backdropTwilight: alphaFunction(
     hslaBaseColors.blurpleStrong,
@@ -406,6 +404,13 @@ var themeColors = {
       a: 1,
       ads: "--ds-background-neutral-bold"
     },
+    focusRing: {
+      h: 216.1,
+      s: 81.4,
+      l: 60,
+      a: 1,
+      ads: "--ds-border-focused"
+    },
     overlay: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-surface-overlay" },
     overlayHover: hslaGreys.grey2,
     overlayActive: hslaGreys.grey3,
@@ -522,9 +527,9 @@ var themeColors = {
     }
   }),
   dark: __spreadProps(__spreadValues({
-    primary: { h: 242, s: 87, l: 73, a: 1 },
-    primaryHover: hslaBaseColors.blurpleDark,
-    primaryActive: hslaBaseColors.blurpleStrong,
+    primary: { h: 216.3, s: 83.2, l: 67.3, a: 1 },
+    primaryHover: { h: 216.1, s: 85.1, l: 76.3, a: 1 },
+    primaryActive: { h: 216.5, s: 92, l: 90.2, a: 1 },
     body: { h: 225, s: 4.3, l: 81.6, a: 1, ads: "--ds-text" },
     bodyDimmed: { h: 217.5, s: 4, l: 60.4, a: 1, ads: "--ds-text-subtlest" },
     bodyInverse: { h: 240, s: 3, l: 12.5, a: 1, ads: "--ds-text-inverse" },
@@ -586,6 +591,13 @@ var themeColors = {
       a: 1,
       ads: "--ds-background-neutral-bold"
     },
+    focusRing: {
+      h: 216.1,
+      s: 85.1,
+      l: 76.3,
+      a: 1,
+      ads: "--ds-background-accent-blue-subtle-hovered"
+    },
     overlay: { h: 225, s: 4, l: 17.6, a: 1, ads: "--ds-surface-overlay" },
     overlayHover: {
       h: 225,
@@ -748,7 +760,7 @@ var getColorValue = (color) => {
   }
 };
 
-// src/hooks/use-media.js
+// src/hooks/use-media.ts
 var import_debounce = __toESM(require("lodash/debounce"));
 var import_react = __toESM(require("react"));
 function useMedia(queries, values, defaultValue) {
@@ -913,7 +925,7 @@ var Media = ({ children, queries, values, defaultValue }) => {
   return children(value);
 };
 
-// src/utilities/styles.js
+// src/utilities/styles.ts
 var getTextSize = (size) => size && `
   font-size: var(--lns-fontSize-${size});
   line-height: var(--lns-lineHeight-${size});
@@ -1078,15 +1090,15 @@ var breakpoints = {
   large: "75em"
 };
 var gradients = {
-  "ai-primary": "radial-gradient(134.96% 884.49% at 119.29% 112.58%, #DC43BE 0%, #565ADD 70%)",
-  "ai-secondary": "radial-gradient(100% 138.41% at 100% 100%, #EFF0FF 0%, #FFFFFF 100%)"
+  "ai-primary": "conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg)",
+  "ai-secondary": "radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%)"
 };
 
 // src/components/text/text.tsx
 var import_styled = __toESM(require("@emotion/styled"));
 var import_react2 = __toESM(require("react"));
 
-// src/console-messages.js
+// src/console-messages.ts
 var textIsDimmedDeprecated = `Lens: Text prop 'isDimmed' is deprecated, use color="bodyDimmed" instead.`;
 var customStylesWarning = `Lens: don't apply custom styles to components, learn more: https://lens.loom.dev/guides/development-best-practices/the-risk-of-modifying-components-with-custom-styles.`;
 var distributeDeprecatedWarning = `Lens: Distribute component is deprecated. Use Arrange or Split.`;
@@ -1222,7 +1234,7 @@ var Text = (_a) => {
 var alignments = ["left", "right", "center"];
 var text_default = Text;
 
-// src/css-utilities/rules.js
+// src/css-utilities/rules.ts
 var sides = ["top", "bottom", "left", "right"];
 var spacesWithZero = __spreadValues({ 0: "0" }, spaces);
 var spacesWithAutoAndZero = __spreadValues({ 0: "0", auto: "auto" }, spaces);
@@ -1687,7 +1699,7 @@ var accessibilityRules = [
   }
 ];
 
-// src/css-utilities/generate-utilities.js
+// src/css-utilities/generate-utilities.ts
 var separator = "\\:";
 var allRules = [
   ...colorRules,
@@ -2088,7 +2100,7 @@ var avatar_default = Avatar;
 // src/components/base-styles/base-styles.tsx
 var import_react4 = require("@emotion/react");
 var import_react5 = __toESM(require("react"));
-var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", documentElement = "html") => {
+var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
   return `
     ${rootElement} {
       font-size: 100%;
@@ -2119,40 +2131,6 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", docume
     ${getAllCssVarsString(rootElement)}
 
     ${cssUtilities()}
-
-    ${documentElement}[data-brand-color="blue"] {
-      --lns-color-blurpleLight: #E9F2FE;
-      --lns-color-blurpleMedium: #CFE1FD;
-      --lns-color-blurple: #1868DB;
-      --lns-color-blurpleDark: #1558BC;
-      --lns-color-blurpleStrong: #123263;
-
-      --lns-color-backdropTwilight: hsla(216, 69%, 23%, 0.8);
-      --lns-color-highlight: hsla(215, 80%, 48%, 0.15);
-      --lns-color-highlightHover: hsla(215, 80%, 48%, 0.3);
-      --lns-color-highlightActive: hsla(215, 80%, 48%, 0.45);
-
-      --lns-gradient-ai-primary: conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg);
-      --lns-gradient-ai-secondary: radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%);
-    }
-
-    ${documentElement}[data-color-mode="light"][data-brand-color="blue"],
-    ${documentElement}[data-brand-color="blue"] [data-lens-theme="light"],
-    ${documentElement}[data-brand-color="blue"] .brand-theme-light {
-      --lns-themeLight-color-primary: #1868DB;
-      --lns-themeLight-color-primaryHover: #1558BC;
-      --lns-themeLight-color-primaryActive: #123263;
-      --lns-themeLight-color-focusRing: #4688EC;
-    }
-
-    ${documentElement}[data-color-mode="dark"][data-brand-color="blue"],
-    ${documentElement}[data-brand-color="blue"] [data-lens-theme="dark"],
-    ${documentElement}[data-brand-color="blue"] .brand-theme-dark {
-      --lns-themeDark-color-primary: #669DF1;
-      --lns-themeDark-color-primaryHover: #8FB8F6;
-      --lns-themeDark-color-primaryActive: #CFE1FD;
-      --lns-themeDark-color-focusRing: #8FB8F6;
-    }
   `;
 };
 var BaseStyles = () => /* @__PURE__ */ import_react5.default.createElement(import_react4.Global, { styles: (0, import_react4.css)(buildGlobalStylesheet()) });
@@ -3705,7 +3683,7 @@ var import_react25 = __toESM(require("react"));
 var import_react_laag = require("react-laag");
 var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 
-// src/utilities/downshift.js
+// src/utilities/downshift.ts
 var getDownshiftEnvironment = (container) => {
   var _a, _b;
   const rootNode = (_b = (_a = container == null ? void 0 : container()) == null ? void 0 : _a.getRootNode) == null ? void 0 : _b.call(_a);
@@ -5398,7 +5376,16 @@ var TypeaheadMenu = (_a) => {
   let downshiftIndex = 0;
   return /* @__PURE__ */ import_react32.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ import_react32.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react32.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react32.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react32.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ import_react32.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react32.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react32.default.createElement(
+      text_default,
+      {
+        id: groupId,
+        size: "body-sm",
+        fontWeight: "bold",
+        htmlTag: group.headingTag || "h2"
+      },
+      group.group
+    )), /* @__PURE__ */ import_react32.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption2(
         item,
         downshiftIndex++,
@@ -6156,7 +6143,7 @@ var form_field_default = FormField;
 var import_styled29 = __toESM(require("@emotion/styled"));
 var import_react41 = __toESM(require("react"));
 
-// src/hooks/use-on-click-outside.js
+// src/hooks/use-on-click-outside.ts
 var import_react37 = __toESM(require("react"));
 function useOnClickOutside(ref, handler) {
   import_react37.default.useEffect(() => {
@@ -7507,6 +7494,10 @@ var TabsNav = import_styled36.default.div`
     }
   }
 
+  button {
+    ${(props) => props.hasFullTabs && `width: 100%;`};
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -7529,10 +7520,14 @@ var TabsNavPilled = import_styled36.default.div`
     display: none;
   }
 
-  * {
+  > * {
     flex: 1 0;
   }
 
+  button {
+    width: 100%;
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -8552,7 +8547,7 @@ var availableSizes4 = Object.keys(sizes4);
 var availableSpeeds = Object.keys(speeds);
 var waveform_loader_default = WaveformLoader;
 
-// src/illustrations/accounts-and-billing.js
+// src/illustrations/accounts-and-billing.tsx
 var React55 = __toESM(require("react"));
 function IllustrationAccountsBilling(props) {
   return /* @__PURE__ */ React55.createElement(
@@ -8584,7 +8579,7 @@ function IllustrationAccountsBilling(props) {
 }
 var accounts_and_billing_default = IllustrationAccountsBilling;
 
-// src/illustrations/invite.js
+// src/illustrations/invite.tsx
 var React56 = __toESM(require("react"));
 function IllustrationInvite(props) {
   return /* @__PURE__ */ React56.createElement(
@@ -8626,7 +8621,7 @@ function IllustrationInvite(props) {
 }
 var invite_default = IllustrationInvite;
 
-// src/illustrations/archived.js
+// src/illustrations/archived.tsx
 var React57 = __toESM(require("react"));
 function IllustrationArchived(props) {
   return /* @__PURE__ */ React57.createElement(
@@ -8654,7 +8649,7 @@ function IllustrationArchived(props) {
 }
 var archived_default = IllustrationArchived;
 
-// src/illustrations/lead-with-transparency.js
+// src/illustrations/lead-with-transparency.tsx
 var React58 = __toESM(require("react"));
 function IllustrationLeadwithTransparency(props) {
   return /* @__PURE__ */ React58.createElement(
@@ -8675,7 +8670,7 @@ function IllustrationLeadwithTransparency(props) {
 }
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
-// src/illustrations/ask-for-more.js
+// src/illustrations/ask-for-more.tsx
 var React59 = __toESM(require("react"));
 function IllustrationAskforMore(props) {
   return /* @__PURE__ */ React59.createElement(
@@ -8696,7 +8691,7 @@ function IllustrationAskforMore(props) {
 }
 var ask_for_more_default = IllustrationAskforMore;
 
-// src/illustrations/learning-and-development.js
+// src/illustrations/learning-and-development.tsx
 var React60 = __toESM(require("react"));
 function IllustrationLearningDevelopment(props) {
   return /* @__PURE__ */ React60.createElement(
@@ -8738,7 +8733,7 @@ function IllustrationLearningDevelopment(props) {
 }
 var learning_and_development_default = IllustrationLearningDevelopment;
 
-// src/illustrations/business-plan.js
+// src/illustrations/business-plan.tsx
 var React61 = __toESM(require("react"));
 function IllustrationBusinessPlan(props) {
   return /* @__PURE__ */ React61.createElement(
@@ -8761,7 +8756,7 @@ function IllustrationBusinessPlan(props) {
 }
 var business_plan_default = IllustrationBusinessPlan;
 
-// src/illustrations/loom-plans.js
+// src/illustrations/loom-plans.tsx
 var React62 = __toESM(require("react"));
 function IllustrationLoomPlans(props) {
   return /* @__PURE__ */ React62.createElement(
@@ -8789,7 +8784,7 @@ function IllustrationLoomPlans(props) {
 }
 var loom_plans_default = IllustrationLoomPlans;
 
-// src/illustrations/collaborate-with-teammates.js
+// src/illustrations/collaborate-with-teammates.tsx
 var React63 = __toESM(require("react"));
 function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
   return /* @__PURE__ */ React63.createElement(
@@ -8812,7 +8807,7 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 }
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
-// src/illustrations/option-grants.js
+// src/illustrations/option-grants.tsx
 var React64 = __toESM(require("react"));
 function IllustrationOptionGrants(props) {
   return /* @__PURE__ */ React64.createElement(
@@ -8833,7 +8828,7 @@ function IllustrationOptionGrants(props) {
 }
 var option_grants_default = IllustrationOptionGrants;
 
-// src/illustrations/community.js
+// src/illustrations/community.tsx
 var React65 = __toESM(require("react"));
 function IllustrationCommunity(props) {
   return /* @__PURE__ */ React65.createElement(
@@ -8856,7 +8851,7 @@ function IllustrationCommunity(props) {
 }
 var community_default = IllustrationCommunity;
 
-// src/illustrations/community-alt.js
+// src/illustrations/community-alt.tsx
 var React66 = __toESM(require("react"));
 function IllustrationCommunityAlt(props) {
   return /* @__PURE__ */ React66.createElement(
@@ -8879,7 +8874,7 @@ function IllustrationCommunityAlt(props) {
 }
 var community_alt_default = IllustrationCommunityAlt;
 
-// src/illustrations/parental-leave.js
+// src/illustrations/parental-leave.tsx
 var React67 = __toESM(require("react"));
 function IllustrationParentalLeave(props) {
   return /* @__PURE__ */ React67.createElement(
@@ -8900,7 +8895,7 @@ function IllustrationParentalLeave(props) {
 }
 var parental_leave_default = IllustrationParentalLeave;
 
-// src/illustrations/content-limit.js
+// src/illustrations/content-limit.tsx
 var React68 = __toESM(require("react"));
 function IllustrationContentLimit(props) {
   return /* @__PURE__ */ React68.createElement(
@@ -8923,7 +8918,7 @@ function IllustrationContentLimit(props) {
 }
 var content_limit_default = IllustrationContentLimit;
 
-// src/illustrations/pto.js
+// src/illustrations/pto.tsx
 var React69 = __toESM(require("react"));
 function IllustrationPto(props) {
   return /* @__PURE__ */ React69.createElement(
@@ -8946,7 +8941,7 @@ function IllustrationPto(props) {
 }
 var pto_default = IllustrationPto;
 
-// src/illustrations/custom-branding.js
+// src/illustrations/custom-branding.tsx
 var React70 = __toESM(require("react"));
 function IllustrationCustomBranding(props) {
   return /* @__PURE__ */ React70.createElement(
@@ -8967,7 +8962,7 @@ function IllustrationCustomBranding(props) {
 }
 var custom_branding_default = IllustrationCustomBranding;
 
-// src/illustrations/record.js
+// src/illustrations/record.tsx
 var React71 = __toESM(require("react"));
 function IllustrationRecord(props) {
   return /* @__PURE__ */ React71.createElement(
@@ -8983,7 +8978,7 @@ function IllustrationRecord(props) {
 }
 var record_default = IllustrationRecord;
 
-// src/illustrations/desktop-app-and-chrome-extension.js
+// src/illustrations/desktop-app-and-chrome-extension.tsx
 var React72 = __toESM(require("react"));
 function IllustrationDesktopAppandChromeExtension(props) {
   return /* @__PURE__ */ React72.createElement(
@@ -9025,7 +9020,7 @@ function IllustrationDesktopAppandChromeExtension(props) {
 }
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
-// src/illustrations/remote-first.js
+// src/illustrations/remote-first.tsx
 var React73 = __toESM(require("react"));
 function IllustrationRemoteFirst(props) {
   return /* @__PURE__ */ React73.createElement(
@@ -9066,7 +9061,7 @@ function IllustrationRemoteFirst(props) {
 }
 var remote_first_default = IllustrationRemoteFirst;
 
-// src/illustrations/device-compatibility.js
+// src/illustrations/device-compatibility.tsx
 var React74 = __toESM(require("react"));
 function IllustrationDeviceCompatibility(props) {
   return /* @__PURE__ */ React74.createElement(
@@ -9094,7 +9089,7 @@ function IllustrationDeviceCompatibility(props) {
 }
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
-// src/illustrations/roadmap.js
+// src/illustrations/roadmap.tsx
 var React75 = __toESM(require("react"));
 function IllustrationRoadmap(props) {
   return /* @__PURE__ */ React75.createElement(
@@ -9116,7 +9111,7 @@ function IllustrationRoadmap(props) {
 }
 var roadmap_default = IllustrationRoadmap;
 
-// src/illustrations/downgrade.js
+// src/illustrations/downgrade.tsx
 var React76 = __toESM(require("react"));
 function IllustrationDowngrade(props) {
   return /* @__PURE__ */ React76.createElement(
@@ -9139,7 +9134,7 @@ function IllustrationDowngrade(props) {
 }
 var downgrade_default = IllustrationDowngrade;
 
-// src/illustrations/screenshot.js
+// src/illustrations/screenshot.tsx
 var React77 = __toESM(require("react"));
 function IllustrationScreenshot(props) {
   return /* @__PURE__ */ React77.createElement(
@@ -9162,7 +9157,7 @@ function IllustrationScreenshot(props) {
 }
 var screenshot_default = IllustrationScreenshot;
 
-// src/illustrations/embrace-the-weird.js
+// src/illustrations/embrace-the-weird.tsx
 var React78 = __toESM(require("react"));
 function IllustrationEmbracetheWeird(props) {
   return /* @__PURE__ */ React78.createElement(
@@ -9185,7 +9180,7 @@ function IllustrationEmbracetheWeird(props) {
 }
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
-// src/illustrations/share-with-your-team.js
+// src/illustrations/share-with-your-team.tsx
 var React79 = __toESM(require("react"));
 function IllustrationSharewithYourTeamTeamLibrary(props) {
   return /* @__PURE__ */ React79.createElement(
@@ -9209,7 +9204,7 @@ function IllustrationSharewithYourTeamTeamLibrary(props) {
 }
 var share_with_your_team_default = IllustrationSharewithYourTeamTeamLibrary;
 
-// src/illustrations/enterprise-plan.js
+// src/illustrations/enterprise-plan.tsx
 var React80 = __toESM(require("react"));
 function IllustrationEnterprisePlan(props) {
   return /* @__PURE__ */ React80.createElement(
@@ -9230,7 +9225,7 @@ function IllustrationEnterprisePlan(props) {
 }
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
-// src/illustrations/share.js
+// src/illustrations/share.tsx
 var React81 = __toESM(require("react"));
 function IllustrationShare(props) {
   return /* @__PURE__ */ React81.createElement(
@@ -9265,7 +9260,7 @@ function IllustrationShare(props) {
 }
 var share_default = IllustrationShare;
 
-// src/illustrations/faq-and-security.js
+// src/illustrations/faq-and-security.tsx
 var React82 = __toESM(require("react"));
 function IllustrationFaQandSecurity(props) {
   return /* @__PURE__ */ React82.createElement(
@@ -9288,7 +9283,7 @@ function IllustrationFaQandSecurity(props) {
 }
 var faq_and_security_default = IllustrationFaQandSecurity;
 
-// src/illustrations/starred.js
+// src/illustrations/starred.tsx
 var React83 = __toESM(require("react"));
 function IllustrationStarred(props) {
   return /* @__PURE__ */ React83.createElement(
@@ -9309,7 +9304,7 @@ function IllustrationStarred(props) {
 }
 var starred_default = IllustrationStarred;
 
-// src/illustrations/five-minute-limit.js
+// src/illustrations/five-minute-limit.tsx
 var React84 = __toESM(require("react"));
 function Illustration5MinuteLimit(props) {
   return /* @__PURE__ */ React84.createElement(
@@ -9332,7 +9327,7 @@ function Illustration5MinuteLimit(props) {
 }
 var five_minute_limit_default = Illustration5MinuteLimit;
 
-// src/illustrations/starter-plus-plan.js
+// src/illustrations/starter-plus-plan.tsx
 var React85 = __toESM(require("react"));
 function IllustrationStarterPlusPlan(props) {
   return /* @__PURE__ */ React85.createElement(
@@ -9355,7 +9350,7 @@ function IllustrationStarterPlusPlan(props) {
 }
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
-// src/illustrations/getting-started.js
+// src/illustrations/getting-started.tsx
 var React86 = __toESM(require("react"));
 function IllustrationGettingStarted(props) {
   return /* @__PURE__ */ React86.createElement(
@@ -9405,7 +9400,7 @@ function IllustrationGettingStarted(props) {
 }
 var getting_started_default = IllustrationGettingStarted;
 
-// src/illustrations/strong-upload-speed.js
+// src/illustrations/strong-upload-speed.tsx
 var React87 = __toESM(require("react"));
 function IllustrationStrongUploadSpeed(props) {
   return /* @__PURE__ */ React87.createElement(
@@ -9433,7 +9428,7 @@ function IllustrationStrongUploadSpeed(props) {
 }
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
-// src/illustrations/growth-through-empathy.js
+// src/illustrations/growth-through-empathy.tsx
 var React88 = __toESM(require("react"));
 function IllustrationGrowththroughEmpathy(props) {
   return /* @__PURE__ */ React88.createElement(
@@ -9510,7 +9505,7 @@ function IllustrationGrowththroughEmpathy(props) {
 }
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
-// src/illustrations/troubleshooting.js
+// src/illustrations/troubleshooting.tsx
 var React89 = __toESM(require("react"));
 function IllustrationTroubleshooting(props) {
   return /* @__PURE__ */ React89.createElement(
@@ -9561,7 +9556,7 @@ function IllustrationTroubleshooting(props) {
 }
 var troubleshooting_default = IllustrationTroubleshooting;
 
-// src/illustrations/health-plans.js
+// src/illustrations/health-plans.tsx
 var React90 = __toESM(require("react"));
 function IllustrationHealthPlans(props) {
   return /* @__PURE__ */ React90.createElement(
@@ -9584,7 +9579,7 @@ function IllustrationHealthPlans(props) {
 }
 var health_plans_default = IllustrationHealthPlans;
 
-// src/illustrations/upgrade.js
+// src/illustrations/upgrade.tsx
 var React91 = __toESM(require("react"));
 function IllustrationUpgrade(props) {
   return /* @__PURE__ */ React91.createElement(
@@ -9607,7 +9602,7 @@ function IllustrationUpgrade(props) {
 }
 var upgrade_default = IllustrationUpgrade;
 
-// src/illustrations/how-to-use-loom.js
+// src/illustrations/how-to-use-loom.tsx
 var React92 = __toESM(require("react"));
 function IllustrationHowtoUseLoom(props) {
   return /* @__PURE__ */ React92.createElement(
@@ -9628,7 +9623,7 @@ function IllustrationHowtoUseLoom(props) {
 }
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
-// src/illustrations/upload-drag-and-drop.js
+// src/illustrations/upload-drag-and-drop.tsx
 var React93 = __toESM(require("react"));
 function IllustrationUploadDragAndDrop(props) {
   return /* @__PURE__ */ React93.createElement(
@@ -9649,7 +9644,7 @@ function IllustrationUploadDragAndDrop(props) {
 }
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
-// src/illustrations/use-cases.js
+// src/illustrations/use-cases.tsx
 var React94 = __toESM(require("react"));
 function IllustrationUseCases(props) {
   return /* @__PURE__ */ React94.createElement(
@@ -9670,7 +9665,7 @@ function IllustrationUseCases(props) {
 }
 var use_cases_default = IllustrationUseCases;
 
-// src/illustrations/invite-members.js
+// src/illustrations/invite-members.tsx
 var React95 = __toESM(require("react"));
 function IllustrationInviteMembers(props) {
   return /* @__PURE__ */ React95.createElement(
@@ -9693,7 +9688,7 @@ function IllustrationInviteMembers(props) {
 }
 var invite_members_default = IllustrationInviteMembers;
 
-// src/illustrations/wellness.js
+// src/illustrations/wellness.tsx
 var React96 = __toESM(require("react"));
 function IllustrationWellness(props) {
   return /* @__PURE__ */ React96.createElement(
@@ -9722,7 +9717,7 @@ function IllustrationWellness(props) {
 }
 var wellness_default = IllustrationWellness;
 
-// src/illustrations/comments.js
+// src/illustrations/comments.tsx
 var React97 = __toESM(require("react"));
 function IllustrationComments(props) {
   return /* @__PURE__ */ React97.createElement(
@@ -9752,7 +9747,7 @@ function IllustrationComments(props) {
 }
 var comments_default = IllustrationComments;
 
-// src/illustrations/folders-empty-state-mobile.js
+// src/illustrations/folders-empty-state-mobile.tsx
 var React98 = __toESM(require("react"));
 function IllutrationFoldersEmptyStateMobile(props) {
   return /* @__PURE__ */ React98.createElement(
@@ -9784,7 +9779,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
 }
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
-// src/illustrations/help-ios.js
+// src/illustrations/help-ios.tsx
 var React99 = __toESM(require("react"));
 function IllustrationHelpIos(props) {
   return /* @__PURE__ */ React99.createElement(
@@ -9814,7 +9809,7 @@ function IllustrationHelpIos(props) {
 }
 var help_ios_default = IllustrationHelpIos;
 
-// src/illustrations/my-videos-empty-state-mobile.js
+// src/illustrations/my-videos-empty-state-mobile.tsx
 var React100 = __toESM(require("react"));
 function IllustrationMyVideosEmptyStateMobile(props) {
   return /* @__PURE__ */ React100.createElement(
@@ -9838,7 +9833,7 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 }
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
-// src/illustrations/recents-empty-state-mobile.js
+// src/illustrations/recents-empty-state-mobile.tsx
 var React101 = __toESM(require("react"));
 function IllustrationRecentsEmptyStateMobile(props) {
   return /* @__PURE__ */ React101.createElement(
@@ -9861,7 +9856,7 @@ function IllustrationRecentsEmptyStateMobile(props) {
 }
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
-// src/illustrations/chrome-notifications-empty-state.js
+// src/illustrations/chrome-notifications-empty-state.tsx
 var React102 = __toESM(require("react"));
 function IllustrationChromeNotificationsEmptyState(props) {
   return /* @__PURE__ */ React102.createElement(