@elevasis/ui 2.21.0 → 2.22.0

package/dist/{chunk-EDX6WIN3.js → chunk-IOTLB6ND.js}

@@ -3,9 +3,9 @@ import { TableSelectionToolbar, SortableHeader } from './chunk-TUMSNGTX.js';
 import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
-import { useDealTasksDue, useDealsLookup, useCreateDealTask, useDealsSummary, useDeleteDeal, usePaginationState, useDeals, useTableSort, sortData, useTableSelection, useDealDetail, useCompany } from './chunk-7GG6OSD7.js';
-import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
+import { useDealTasksDue, useDealsLookup, useCreateDealTask, useDealsSummary, useDeleteDeal, usePaginationState, useDeals, useTableSort, sortData, useTableSelection, useDealDetail, useCompany } from './chunk-B4FHWKEF.js';
+import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { CenteredErrorState, CardHeader, PageTitleCaption, EmptyState, ActivityTimeline } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { PAGE_SIZE_DEFAULT, formatTimeAgo } from './chunk-SGXXJE52.js';

package/dist/{chunk-GBMNCNHX.js → chunk-KVJ3LFH2.js}

@@ -3,8 +3,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cloneElement } from 'react';
 
 // src/components/modal/CustomModal.tsx
+var FULL_SIZE = "80%";
 var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
   const canClose = loading === true ? false : true;
+  const resolvedSize = size === "full" ? FULL_SIZE : size;
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -16,7 +18,7 @@ var CustomModal = ({ children, opened, onClose, loading, style, size }) => {
       closeOnEscape: canClose,
       centered: true,
       style,
-      size,
+      size: resolvedSize,
       children
     }
   );

package/dist/{chunk-VQESMHQV.js → chunk-LJWV4TWV.js}

@@ -38,7 +38,6 @@ function createFeatureAccessHook({
     };
   };
 }
-var createUseFeatureAccess = createFeatureAccessHook;
 
 // ../core/src/organization-model/helpers.ts
 function defaultPathFor(id) {
@@ -333,4 +332,4 @@ function ElevasisFeaturesProvider({
   return /* @__PURE__ */ jsx(ElevasisFeaturesContext.Provider, { value, children });
 }
 
-export { ElevasisFeaturesProvider, createFeatureAccessHook, createUseFeatureAccess, useElevasisFeatures, useOptionalElevasisFeatures };
+export { ElevasisFeaturesProvider, createFeatureAccessHook, useElevasisFeatures, useOptionalElevasisFeatures };

package/dist/{chunk-EGKNRM6P.js → chunk-LKVBEE63.js}

@@ -2,9 +2,9 @@ import { ResourceHealthChart } from './chunk-LGKLC5MG.js';
 import { useCyberColors, HeroStatsRow } from './chunk-TSSKOQBX.js';
 import { AppShellCenteredContainer, AppShellLoader } from './chunk-M25JL54Z.js';
 import { STATUS_COLORS, getStatusIcon, formatDuration, getStatusColors, AGENT_CONSTANTS, shouldAnimateEdge, TIMELINE_CONSTANTS, calculateBarPosition, CONTAINER_CONSTANTS, useExecutionPath, useUnifiedWorkflowLayout, WORKFLOW_CONSTANTS, useReactFlowAgent } from './chunk-E4WQGJNS.js';
-import { useExecuteResource, useDashboardMetrics, useResources, useTimeRangeDates, useUnresolvedErrors, useRecentExecutionsByResource, useCommandQueue, useScheduledTasks, useResourcesHealth } from './chunk-7GG6OSD7.js';
+import { useExecuteResource, useDashboardMetrics, useResources, useTimeRangeDates, useUnresolvedErrors, useRecentExecutionsByResource, useCommandQueue, useScheduledTasks, useResourcesHealth } from './chunk-B4FHWKEF.js';
 import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, useFitViewTrigger } from './chunk-22UVE3RA.js';
-import { glassBase } from './chunk-Q5HC6ENG.js';
+import { glassBase } from './chunk-XOTJNW4Q.js';
 import { GlowDot, CardHeader, EmptyState, PageTitleCaption, TabCountBadge } from './chunk-XUYBOO32.js';
 import { formatTimeAgo, getTimeRangeDates, formatRelativeTime } from './chunk-SGXXJE52.js';
 import { ResourceStatusColors } from './chunk-KRWALB24.js';

package/dist/{chunk-BJWIKEQG.js → chunk-LVJGPE6H.js}

@@ -4,10 +4,10 @@ import { TableSelectionToolbar, SortableHeader } from './chunk-TUMSNGTX.js';
 import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
-import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-7GG6OSD7.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
+import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-B4FHWKEF.js';
 import { useCreateTask, useCreateMilestone, useProjectMilestones, useUpdateTask, useProjects, useDeleteProject, useProject, useProjectNotes, useUpdateMilestone, useCreateNote, showApiErrorNotification, projectKeys } from './chunk-Z6FAH4XV.js';
-import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
+import { SubshellContentContainer } from './chunk-TKAYX2SP.js';
 import { StatusBadge, EmptyState, PageTitleCaption, CenteredErrorState, StatCard, CardHeader } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { PAGE_SIZE_DEFAULT, formatTimeAgo, formatDate, formatRelativeTime } from './chunk-SGXXJE52.js';
@@ -1097,7 +1097,7 @@ function renderMilestoneBullet(status) {
 function getMilestoneSurfaceStyles(status) {
   const normalizedStatus = status ?? "upcoming";
   const accent = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "color-mix(in srgb, var(--color-primary) 72%, white)" : "color-mix(in srgb, var(--color-primary) 36%, var(--color-border))";
-  const background = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0%, transparent 100%)" : "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)";
+  const background = normalizedStatus === "completed" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)" : normalizedStatus === "in_progress" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0%, transparent 100%)" : "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)";
   return {
     accent,
     background
@@ -1482,7 +1482,7 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
                                       {
                                         fw: 700,
                                         size: "lg",
-                                        c: milestone.status === "completed" ? "var(--color-background)" : "var(--color-text)",
+                                        c: "var(--color-text)",
                                         children: milestone.name
                                       }
                                     ),
@@ -1501,15 +1501,7 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
                                       }
                                     )
                                   ] }),
-                                  milestone.description && /* @__PURE__ */ jsx(
-                                    Text,
-                                    {
-                                      size: "sm",
-                                      c: milestone.status === "completed" ? "color-mix(in srgb, var(--color-background) 82%, transparent)" : "var(--color-text-dimmed)",
-                                      maw: 900,
-                                      children: milestone.description
-                                    }
-                                  )
+                                  milestone.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-dimmed)", maw: 900, children: milestone.description })
                                 ] }),
                                 /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
                                   milestone.due_date && /* @__PURE__ */ jsxs(

package/dist/{chunk-TIIPYB2Z.js → chunk-QZJM3RYI.js}

@@ -1,4 +1,4 @@
-import { usePresetsContext } from './chunk-Q5HC6ENG.js';
+import { usePresetsContext } from './chunk-XOTJNW4Q.js';
 import { useMemo } from 'react';
 
 var BUILT_IN_NAMES = /* @__PURE__ */ new Set([

package/dist/{chunk-7YQKVWSD.js → chunk-SQ5JGELM.js}

@@ -1,10 +1,16 @@
 import { useUserProfile } from './chunk-QHSW4WHM.js';
 import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Button, Loader, Menu, Text, Badge } from '@mantine/core';
-import { IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
+import { Badge, Group, Button, Loader, Menu, Text } from '@mantine/core';
+import { IconLock, IconChevronDown, IconBuilding, IconCheck } from '@tabler/icons-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+function RoleBadge({ name, isSystem }) {
+  return /* @__PURE__ */ jsx(Badge, { color: isSystem ? "gray" : "primary", variant: "light", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+    isSystem && /* @__PURE__ */ jsx(IconLock, { size: 10 }),
+    name
+  ] }) });
+}
 function OrganizationSwitcher({
   currentOrganization,
   memberships,
@@ -64,7 +70,14 @@ function OrganizationSwitcher({
             Menu.Item,
             {
               leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-              rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+              rightSection: /* @__PURE__ */ jsx(
+                RoleBadge,
+                {
+                  slug: membership.role.slug,
+                  name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                  isSystem: true
+                }
+              ),
               onClick: () => {
                 const workosOrgId = membership.organization?.workos_org_id;
                 if (!workosOrgId) {
@@ -84,7 +97,14 @@ function OrganizationSwitcher({
               Menu.Item,
               {
                 leftSection: /* @__PURE__ */ jsx(IconBuilding, { size: 14 }),
-                rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: membership.role.slug }),
+                rightSection: /* @__PURE__ */ jsx(
+                  RoleBadge,
+                  {
+                    slug: membership.role.slug,
+                    name: membership.role.slug.charAt(0).toUpperCase() + membership.role.slug.slice(1),
+                    isSystem: true
+                  }
+                ),
                 onClick: () => {
                   const workosOrgId = membership.organization?.workos_org_id;
                   if (!workosOrgId) {
@@ -346,4 +366,4 @@ function createUseOrgInitialization(useOrganizations, useApiClient) {
   };
 }
 
-export { OrganizationSwitcher, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };
+export { OrganizationSwitcher, RoleBadge, createOrganizationsSlice, createUseOrgInitialization, createUseOrganizations };

package/dist/{chunk-RX4UWZZR.js → chunk-TKAYX2SP.js}

@@ -79,9 +79,11 @@ var SubshellSidebar = ({
           borderRight: "1px solid var(--color-border)",
           boxShadow: "var(--card-shadow)",
           clipPath: "inset(-100px -100px -100px 0)",
-          minHeight: `calc(100vh - ${topbarHeight}px)`,
+          height: `calc(100vh - ${topbarHeight}px)`,
+          minHeight: 0,
           marginTop: `${topbarHeight}px`,
-          fontFamily: "var(--elevasis-font-family-subtitle)"
+          fontFamily: "var(--elevasis-font-family-subtitle)",
+          overflow: "hidden"
         },
         children
       }
@@ -94,7 +96,8 @@ var SubshellSidebar = ({
         position: "relative",
         flexShrink: 0,
         marginTop: `${topbarHeight}px`,
-        minHeight: `calc(100vh - ${topbarHeight}px)`
+        height: `calc(100vh - ${topbarHeight}px)`,
+        minHeight: 0
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -123,6 +126,8 @@ var SubshellSidebar = ({
                 style: {
                   width: `${width}px`,
                   flexShrink: 0,
+                  height: "100%",
+                  minHeight: 0,
                   display: "flex",
                   flexDirection: "column",
                   opacity: isOpen ? 1 : 0,

package/dist/{chunk-ATEHYDL3.js → chunk-WWJ6S2HQ.js}

@@ -1,9 +1,9 @@
 import { CyberAreaChart, CostTrendChart, ActivityTrendChart } from './chunk-TSSKOQBX.js';
 import { AppShellLoader } from './chunk-M25JL54Z.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
-import { CustomModal } from './chunk-GBMNCNHX.js';
+import { CustomModal } from './chunk-KVJ3LFH2.js';
 import { formatDuration } from './chunk-E4WQGJNS.js';
-import { useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useExecutionLogsFilters, useExecutionLogs, useExecutionHealth, useErrorAnalysis, useTimeRangeDates, useErrorDetail, useResolveErrorsByExecution, useResources, useCostTrends, useCostSummary, useCostByModel, useCostBreakdown, useActivityFilters, useActivityTrend, useActivities, useNotifications, useMarkAllAsRead, useTestNotification } from './chunk-7GG6OSD7.js';
+import { useResolveError, useResolveAllErrors, usePaginationState, useErrorDetails, useMarkAsRead, useExecutionLogsFilters, useExecutionLogs, useExecutionHealth, useErrorAnalysis, useTimeRangeDates, useErrorDetail, useResolveErrorsByExecution, useResources, useCostTrends, useCostSummary, useCostByModel, useCostBreakdown, useActivityFilters, useActivityTrend, useActivities, useNotifications, useMarkAllAsRead, useTestNotification } from './chunk-B4FHWKEF.js';
 import { CenteredErrorState, CardHeader, StatsCardSkeleton, TrendIndicator, DetailCardSkeleton, EmptyState, PageTitleCaption, JsonViewer } from './chunk-XUYBOO32.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { formatBucketTime, PAGE_SIZE_DEFAULT, getTimeRangeDates } from './chunk-SGXXJE52.js';
@@ -175,6 +175,7 @@ var activityTypeLabels = {
   webhook_executed: "Webhook Out",
   webhook_failed: "Webhook Fail",
   credential_change: "Credential",
+  credential_read: "Credential Read",
   api_key_change: "API Key",
   deployment_change: "Deployment",
   membership_change: "Membership"
@@ -243,6 +244,7 @@ var activityTypeOptions = [
   { value: "webhook_executed", label: "Webhook Executed" },
   { value: "webhook_failed", label: "Webhook Failed" },
   { value: "credential_change", label: "Credential Changes" },
+  { value: "credential_read", label: "Credential Reads" },
   { value: "api_key_change", label: "API Key Changes" },
   { value: "deployment_change", label: "Deployment Changes" },
   { value: "membership_change", label: "Membership Changes" }
@@ -323,6 +325,7 @@ function getNavigationPath(activity) {
     case "hitl_action":
       return "/command-queue";
     case "credential_change":
+    case "credential_read":
       return "/settings/credentials";
     case "api_key_change":
       return "/settings/api-keys";
@@ -1599,6 +1602,7 @@ function getNavigationPath2(activity) {
     case "hitl_action":
       return "/operations/command-queue";
     case "credential_change":
+    case "credential_read":
       return "/settings/credentials";
     case "api_key_change":
       return "/settings/api-keys";

package/dist/{chunk-Q5HC6ENG.js → chunk-XOTJNW4Q.js}

@@ -129,7 +129,7 @@ var tacticalPreset = {
     Fragment,
     null,
     createElement(AppBackground, {
-      gridGlowColor: "color-mix(in srgb, #5A6070 30%, transparent)",
+      gridGlowColor: "color-mix(in srgb, #5A5A5A 30%, transparent)",
       gridGlowIntensity: 50
     }),
     createElement(AmbientBloomGrid, { intensity: 0.07, color: "#5A6070", size: 1.2 })

package/dist/{chunk-ULZ2B3NC.js → chunk-ZBCTB5CA.js}

@@ -1,4 +1,4 @@
-import { ElevasisFeaturesProvider } from './chunk-VQESMHQV.js';
+import { ElevasisFeaturesProvider } from './chunk-LJWV4TWV.js';
 import { jsx } from 'react/jsx-runtime';
 
 function createTestFeaturesProvider({

package/dist/components/index.css

@@ -125,83 +125,14 @@
   }
 }
 
-/* src/theme/custom.css */
-.mantine-Button-root[data-variant=default] {
-  background-color: var(--color-surface);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-}
-.mantine-Button-root[data-variant=default]:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Accordion-control:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Menu-item:hover:not([data-disabled]) {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Select-option:hover {
-  background-color: var(--color-surface-hover) !important;
-}
-[data-mantine-color-scheme=dark] .mantine-Tabs-root {
-  --tab-border-color: var(--color-border);
-}
-.mantine-Tabs-tab:hover {
-  background-color: var(--color-surface-hover);
-}
-.mantine-Pagination-control:not([data-active]) {
-  background: var(--color-surface);
-}
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-subtle);
-}
-.mantine-Checkbox-input {
-  background-color: var(--color-surface);
-  border-color: var(--color-border);
-}
-.mantine-Checkbox-input:checked {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
-  background-color: var(--color-surface-hover);
-  border-color: var(--color-border);
-}
-.mantine-Timeline-root {
-  --tl-color: var(--color-primary);
-}
-.mantine-Timeline-item {
-  --item-border-color: var(--color-border);
-}
-.mantine-Timeline-itemBullet {
-  border-color: var(--color-border);
-}
-.mantine-Timeline-itemBullet:where([data-with-child]) {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-.recharts-surface:focus {
-  outline: none;
-}
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+/* src/graph/Graph.globals.css */
+.elevasis-graph-root .react-flow__node.selected,
+.elevasis-graph-root .react-flow__node:focus,
+.elevasis-graph-root .react-flow__node:focus-visible {
+  outline: none !important;
 }
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
+.elevasis-graph-root .react-flow__node.selected > * {
+  box-shadow: none;
 }
 
 /* src/graph/Graph.module.css */
@@ -309,7 +240,7 @@
       transparent 1px),
     radial-gradient(
       ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
+      color-mix(in srgb, var(--color-primary) 1.25%, transparent) 0%,
       transparent 70%);
   background-color: color-mix(in srgb, var(--color-background) 50%, var(--glass-background));
   backdrop-filter: var(--glass-blur);
@@ -328,7 +259,7 @@
       transparent 1px),
     radial-gradient(
       ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 9%, transparent) 0%,
+      color-mix(in srgb, var(--color-primary) 2.25%, transparent) 0%,
       transparent 70%);
   background-size:
     40px 40px,
@@ -578,12 +509,81 @@
   }
 }
 
-/* src/graph/Graph.globals.css */
-.elevasis-graph-root .react-flow__node.selected,
-.elevasis-graph-root .react-flow__node:focus,
-.elevasis-graph-root .react-flow__node:focus-visible {
-  outline: none !important;
+/* src/theme/custom.css */
+.mantine-Button-root[data-variant=default] {
+  background-color: var(--color-surface);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
 }
-.elevasis-graph-root .react-flow__node.selected > * {
-  box-shadow: none;
+.mantine-Button-root[data-variant=default]:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Accordion-control:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Menu-item:hover:not([data-disabled]) {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Select-option:hover {
+  background-color: var(--color-surface-hover) !important;
+}
+[data-mantine-color-scheme=dark] .mantine-Tabs-root {
+  --tab-border-color: var(--color-border);
+}
+.mantine-Tabs-tab:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Pagination-control:not([data-active]) {
+  background: var(--color-surface);
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-subtle);
+}
+.mantine-Checkbox-input {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
+}
+.mantine-Checkbox-input:checked {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border);
+}
+.mantine-Timeline-root {
+  --tl-color: var(--color-primary);
+}
+.mantine-Timeline-item {
+  --item-border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet {
+  border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet:where([data-with-child]) {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.recharts-surface:focus {
+  outline: none;
+}
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }