@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/components/index.ts

@@ -27,7 +27,7 @@ export { NewTabs } from './NewTabs'
 export type { NewTabsProps, NewTabItem } from './NewTabs'
 
 export { StepIndicator } from './StepIndicator'
-export type { StepIndicatorProps, StepItem } from './StepIndicator'
+export type { StepIndicatorProps } from './StepIndicator'
 
 export { AvatarUpload } from './AvatarUpload'
 export type { AvatarUploadProps } from './AvatarUpload'
@@ -75,6 +75,7 @@ export { Button, ButtonText, GhostButton } from './Button'
 export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button'
 
 export { Select } from './Select'
+export type { SelectProps, SelectOption } from './Select'
 
 export { Tooltip } from './Tooltip'
 
@@ -87,11 +88,26 @@ export { EntityHeader } from './EntityHeader'
 
 export { Alert } from './Alert'
 
+export { Toggle } from './Toggle'
+export type { ToggleProps } from './Toggle'
+
+export { FeatureToggle } from './FeatureToggle'
+export type { FeatureToggleProps } from './FeatureToggle'
+
+export { AccountManagerCard } from './AccountManagerCard'
+export type { AccountManagerCardProps } from './AccountManagerCard'
+
+export { NotificationBanner } from './NotificationBanner'
+export type { NotificationBannerProps, NotificationBannerVariant } from './NotificationBanner'
+
 export { NPSScore } from './NPSScore'
 
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { RadioCardGroup } from './RadioCard'
+export type { RadioCardGroupProps, RadioCardOption } from './RadioCard'
+
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
 
@@ -143,6 +159,15 @@ export {
   BookingTypesIcon,
   SecurityIcon,
   UploadIcon,
+  WarningTriangleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  UserGroupIcon,
+  CurrencyPoundIcon,
+  CurrencyDollarIcon,
+  CurrencyEuroIcon,
+  PercentIcon,
+  LayersIcon,
   SettingsPageWaiversIcon,
 } from '../icons'
 

package/src/v2/dashboard-analytics/blog-posts/index.ts

@@ -1,2 +1,2 @@
 export { Blog } from './Blog';
-export type { BlogProps } from './Blog';
+export type { BlogProps, BlogPost } from './Blog';

package/src/v2/dashboard-analytics/chart/Chart.tsx

@@ -23,7 +23,7 @@ export const Chart: React.FC<ChartProps> = ({
   isRevenue = false,
   className = '',
   period = 'today',
-  bookingType = 'bookings_for',
+  bookingType: _bookingType = 'bookings_for',
   isFullWidth: propIsFullWidth = false,
   isLoading = false,
   isRefreshing = false
@@ -55,11 +55,12 @@ export const Chart: React.FC<ChartProps> = ({
       
       return () => clearTimeout(timer);
     }
+    return undefined;
   }, [data, period]);
   const [isMobile, setIsMobile] = React.useState(false);
   const [isTablet, setIsTablet] = React.useState(false);
   const [detectedFullWidth, setDetectedFullWidth] = React.useState(false);
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const [_dimensions, _setDimensions] = React.useState({ width: 0, height: 0 });
   const chartRef = React.useRef<HTMLDivElement>(null);
 
   const isFullWidth = propIsFullWidth || detectedFullWidth;
@@ -71,7 +72,7 @@ export const Chart: React.FC<ChartProps> = ({
       
       if (chartRef.current) {
         const rect = chartRef.current.getBoundingClientRect();
-        setDimensions({ width: rect.width, height: rect.height });
+        _setDimensions({ width: rect.width, height: rect.height });
       }
     };
 
@@ -108,7 +109,7 @@ export const Chart: React.FC<ChartProps> = ({
   }, [period, forceRecalculation]);
 
   React.useEffect(() => {
-    if (propIsFullWidth !== undefined) return; 
+    if (propIsFullWidth !== undefined) return undefined;
     
     const checkChartWidth = () => {
       if (chartRef.current) {
@@ -153,7 +154,7 @@ export const Chart: React.FC<ChartProps> = ({
       
       setTimeout(() => {
         const rect = currentRef.getBoundingClientRect();
-        setDimensions({ width: rect.width, height: rect.height });
+        _setDimensions({ width: rect.width, height: rect.height });
       }, 10);
     }
   }, [period, forceResize, animationKey]);
@@ -548,26 +549,28 @@ export const Chart: React.FC<ChartProps> = ({
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="#E8E9EF" />
-               <XAxis 
-                dataKey="time" 
+               {/* @ts-ignore recharts tickMargin typing issue */}
+               <XAxis
+                dataKey="time"
                 type="category"
                 axisLine={false}
                 tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
+                tick={{
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                  fill: '#626A90'
                 }}
-                tickMargin={isMobile ? 5 : 10}
+                {...{ tickMargin: isMobile ? 5 : 10 } as any}
                 interval={xAxisInterval}
               />
-              <YAxis 
+              {/* @ts-ignore recharts tickMargin typing issue */}
+              <YAxis
                 domain={[yAxisMin, yAxisMax]}
                 ticks={ticks}
                 axisLine={false}
                 tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
+                tick={{
+                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                  fill: '#626A90'
                 }}
                 tickFormatter={(value) => {
                   if (isRevenue) {
@@ -575,8 +578,8 @@ export const Chart: React.FC<ChartProps> = ({
                   }
                   return value.toString();
                 }}
-                tickMargin={isMobile ? 3 : 5}
-                width={isMobile ? 30 : (isTablet ? 35 : 40)} 
+                {...{ tickMargin: isMobile ? 3 : 5 } as any}
+                width={isMobile ? 30 : (isTablet ? 35 : 40)}
               />
               <Tooltip content={CustomTooltip} />
               {currentTimeRef && (

package/src/v2/dashboard-analytics/venue-card/VenueCard.tsx

@@ -1,8 +1,8 @@
-import React, { ReactSVGElement } from 'react';
+import React from 'react';
 import './VenueCard.scss';
 
 interface VenueCardProps {
-  icon: string | ReactSVGElement;
+  icon: string | React.ReactNode;
   title: string;
   value: string;
   className?: string;

package/src/v2/icons/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 export const DashboardIcon = ({ width = 24, height = 24, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
     <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
         <path
@@ -112,8 +114,8 @@ export const CalendarSmallIcon = () => (
     </svg>
 )
 
-export const SearchIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22" fill="none">
+export const SearchIcon = ({ className }: { className?: string } = {}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22" fill="none" className={className}>
         <path d="M14.6593 13.7979L17.2683 16.4068L16.4068 17.2684L13.7978 14.6594C12.8597 15.4099 11.67 15.8589 10.3761 15.8589C7.34958 15.8589 4.89331 13.4026 4.89331 10.3761C4.89331 7.34965 7.34958 4.89337 10.3761 4.89337C13.4025 4.89337 15.8588 7.34965 15.8588 10.3761C15.8588 11.6701 15.4098 12.8598 14.6593 13.7979ZM13.4371 13.3458C14.182 12.5781 14.6404 11.5309 14.6404 10.3761C14.6404 8.02006 12.7321 6.11176 10.3761 6.11176C8.02 6.11176 6.1117 8.02006 6.1117 10.3761C6.1117 12.7322 8.02 14.6405 10.3761 14.6405C11.5309 14.6405 12.5781 14.1821 13.3458 13.4371L13.4371 13.3458Z" fill="currentColor"/>
     </svg>
 )
@@ -149,22 +151,22 @@ export const ClearIcon = () => (
     </svg>
 )
 
-export const ChevronLeftIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ChevronLeftIcon = ({ className }: { className?: string } = {}) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
         <path d="M19 12H5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
         <path d="M12 19L5 12L12 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </svg>
 )
 
-export const ChevronRightIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ChevronRightIcon = ({ className }: { className?: string } = {}) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
         <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
         <path d="M12 5L19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </svg>
 )
 
-export const ArrowRightIcon   = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
-    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ArrowRightIcon   = ({ width = 24, height = 24, className }: { width?: number; height?: number; className?: string } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
         <path d="M20.1716 14.9999L14.8076 9.63589L16.2218 8.22168L24 15.9999L16.2218 23.778L14.8076 22.3638L20.1716 16.9999H8V14.9999H20.1716Z" fill="currentColor"/>
     </svg>
 )
@@ -570,6 +572,42 @@ export const ReportsEmptyIcon = () => (
   </svg>
 )
 
+export const CurrencyPoundIcon = ({ size = 28 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.0049 26.0028C10.482 26.0028 6.00488 21.5257 6.00488 16.0028C6.00488 10.48 10.482 6.00281 16.0049 6.00281C21.5277 6.00281 26.0049 10.48 26.0049 16.0028C26.0049 21.5257 21.5277 26.0028 16.0049 26.0028ZM16.0049 24.0028C20.4232 24.0028 24.0049 20.4211 24.0049 16.0028C24.0049 11.5845 20.4232 8.00281 16.0049 8.00281C11.5866 8.00281 8.00488 11.5845 8.00488 16.0028C8.00488 20.4211 11.5866 24.0028 16.0049 24.0028ZM13.0049 17.0028H12.0049V15.0028H13.0049V14.0028C13.0049 12.0698 14.5719 10.5028 16.5049 10.5028C17.9741 10.5028 19.2319 11.4081 19.7509 12.6913L17.7644 13.1879C17.4971 12.7756 17.0329 12.5028 16.5049 12.5028C15.6765 12.5028 15.0049 13.1744 15.0049 14.0028V15.0028H18.0049V17.0028H15.0049V19.0028H20.0049V21.0028H12.0049V19.0028H13.0049V17.0028Z" fill="currentColor"/>
+  </svg>
+)
+
+export const CurrencyDollarIcon = ({ size = 28 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.0049 6.00293C21.5277 6.00293 26.0049 10.4801 26.0049 16.0029C26.0048 21.5258 21.5276 26.0029 16.0049 26.0029C10.4821 26.0029 6.00498 21.5257 6.00488 16.0029C6.00488 10.4801 10.482 6.00294 16.0049 6.00293ZM16.0049 8.00293C11.5866 8.00294 8.00488 11.5847 8.00488 16.0029C8.00498 20.4211 11.5866 24.0029 16.0049 24.0029C20.4231 24.0029 24.0048 20.4212 24.0049 16.0029C24.0049 11.5847 20.4232 8.00293 16.0049 8.00293Z" fill="currentColor"/>
+    <path d="M16.6406 11.0566C17.1463 11.1166 17.592 11.2403 17.9766 11.4316C18.5455 11.7013 18.9858 12.0792 19.2979 12.5645C19.6099 13.0498 19.798 13.6118 19.8623 14.25L17.5352 14.3447C17.5076 14.0391 17.4257 13.7735 17.2881 13.5488C17.1504 13.3241 16.9613 13.153 16.7227 13.0361C16.6964 13.0217 16.6682 13.0108 16.6406 12.998V15.0479C17.423 15.2098 18.0521 15.4116 18.5273 15.6523C19.0596 15.922 19.436 16.2456 19.6562 16.623C19.8857 16.9916 20 17.4189 20 17.9043C19.9999 18.4973 19.8441 19.0138 19.5322 19.4541C19.2293 19.8856 18.7928 20.2231 18.2236 20.4658C17.7669 20.6533 17.2392 20.7638 16.6406 20.8008V21.8945H15.4844V20.7812C14.9232 20.7263 14.4228 20.6047 13.9834 20.4121C13.3775 20.1335 12.9041 19.7463 12.5645 19.252C12.2342 18.7487 12.0459 18.1602 12 17.4863L14.3408 17.3643C14.3959 17.7058 14.4967 17.9985 14.6436 18.2412C14.7904 18.4749 14.993 18.6544 15.25 18.7803C15.3229 18.8134 15.4012 18.8405 15.4844 18.8643V16.7012C14.7468 16.5271 14.14 16.3413 13.666 16.1377C13.1521 15.904 12.7757 15.6075 12.5371 15.248C12.2984 14.8885 12.1797 14.4341 12.1797 13.8857C12.1797 13.3106 12.3264 12.8074 12.6201 12.376C12.9139 11.9446 13.3405 11.6116 13.9004 11.3779C14.3555 11.1807 14.8837 11.0652 15.4844 11.0283V9.89551H16.6406V11.0566ZM16.6406 18.9297C16.7662 18.914 16.8809 18.8921 16.9844 18.8613C17.1954 18.7894 17.3566 18.6818 17.4668 18.5381C17.5861 18.3943 17.6455 18.2185 17.6455 18.0117C17.6455 17.8142 17.595 17.6437 17.4941 17.5C17.4023 17.3472 17.2187 17.2116 16.9434 17.0947C16.8559 17.0576 16.7549 17.0215 16.6406 16.9854V18.9297ZM15.4844 12.8799C15.2469 12.9202 15.0491 12.9986 14.8916 13.1172C14.6622 13.2969 14.548 13.5262 14.5479 13.8047C14.5479 14.0204 14.5982 14.2009 14.6992 14.3447C14.8094 14.4884 14.9976 14.6102 15.2637 14.709C15.331 14.734 15.4047 14.7578 15.4844 14.7822V12.8799Z" fill="currentColor"/>
+  </svg>
+)
+
+export const CurrencyEuroIcon = ({ size = 28 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.0049 6.00293C21.5277 6.00293 26.0049 10.4801 26.0049 16.0029C26.0048 21.5258 21.5276 26.0029 16.0049 26.0029C10.4821 26.0029 6.00498 21.5257 6.00488 16.0029C6.00488 10.4801 10.482 6.00294 16.0049 6.00293ZM16.0049 8.00293C11.5866 8.00294 8.00488 11.5847 8.00488 16.0029C8.00498 20.4211 11.5866 24.0029 16.0049 24.0029C20.4231 24.0029 24.0048 20.4212 24.0049 16.0029C24.0049 11.5847 20.4232 8.00293 16.0049 8.00293Z" fill="currentColor"/>
+    <path d="M16.5049 11.0811C17.2005 11.0811 17.8432 11.2205 18.4326 11.499C19.0219 11.7686 19.52 12.1588 19.9258 12.6709C20.3412 13.1829 20.6207 13.7943 20.7656 14.5039L18.1719 14.6123C18.0656 14.1182 17.8579 13.727 17.5488 13.4395C17.2397 13.143 16.8723 12.9952 16.4473 12.9951C15.9932 12.9951 15.6069 13.1299 15.2881 13.3994C14.9692 13.66 14.7277 14.024 14.5635 14.4912C14.554 14.5175 14.546 14.5445 14.5371 14.5713H17.1572L16.9688 15.6904H14.3301C14.3216 15.8212 14.3164 15.9561 14.3164 16.0947C14.3164 16.2617 14.3233 16.4235 14.3359 16.5801H16.8389L16.6787 17.6982H14.5635L14.6279 17.8652C14.7886 18.2447 15.009 18.5483 15.2881 18.7764C15.6069 19.0368 15.9933 19.167 16.4473 19.167C16.8916 19.167 17.268 19.0097 17.5771 18.6953C17.8863 18.3719 18.0849 17.9451 18.1719 17.415L20.7949 17.5361C20.65 18.2639 20.3745 18.8937 19.9688 19.4238C19.5631 19.9536 19.0606 20.362 18.4619 20.6494C17.8725 20.9369 17.2199 21.0811 16.5049 21.0811C15.8286 21.081 15.2008 20.9594 14.6211 20.7168C14.0511 20.4652 13.548 20.1152 13.1133 19.666C12.6786 19.2168 12.3411 18.6907 12.0996 18.0889C12.0491 17.9611 12.0048 17.8307 11.9648 17.6982H10.7949V16.5801H11.7568C11.7442 16.4211 11.7373 16.2594 11.7373 16.0947C11.7373 15.9581 11.7422 15.8232 11.751 15.6904H10.7949V14.5713H11.9395C11.9849 14.4107 12.0388 14.2534 12.0996 14.0996C12.3411 13.489 12.6787 12.9588 13.1133 12.5098C13.5481 12.0605 14.051 11.7096 14.6211 11.458C15.2007 11.2065 15.8287 11.0811 16.5049 11.0811Z" fill="currentColor"/>
+  </svg>
+)
+
+export const PercentIcon = ({ size = 24 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="19" y1="5" x2="5" y2="19" />
+    <circle cx="6.5" cy="6.5" r="2.5" />
+    <circle cx="17.5" cy="17.5" r="2.5" />
+  </svg>
+)
+
+export const LayersIcon = ({ size = 24 }: { size?: number } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="12 2 2 7 12 12 22 7 12 2" />
+    <polyline points="2 17 12 22 22 17" />
+    <polyline points="2 12 12 17 22 12" />
+  </svg>
+)
+
 export const SelectCheckIcon = () => (
   <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
     <path
@@ -582,6 +620,135 @@ export const SelectCheckIcon = () => (
   </svg>
 )
 
+/* ─── Icons used by shadcn/ui components ───────────────────────────────────── */
+
+interface ShadcnIconProps {
+  className?: string
+  size?: number
+}
+
+export const IconTick: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <path d="M25.5029 11.5693L14.4727 24.1348L7.62012 17.6074L10.3799 14.7109L14.2148 18.3643L22.4971 8.93066L25.5029 11.5693Z" fill="currentColor" />
+  </svg>
+)
+
+export const IconCross: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <path d="M24.1895 11.4658L18.7676 16.5L24.1895 21.5342L21.4668 24.4658L15.8281 19.2295L10.1895 24.4658L7.4668 21.5342L12.8877 16.5L7.4668 11.4658L10.1895 8.53418L15.8281 13.7695L21.4668 8.53418L24.1895 11.4658Z" fill="currentColor" />
+  </svg>
+)
+
+export const IconRing: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <circle cx="16" cy="16" r="15" stroke="currentColor" strokeWidth="2" fill="none"/>
+  </svg>
+)
+
+export const MailIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M2.667 2.667h10.666A1.333 1.333 0 0 1 14.667 4v8a1.333 1.333 0 0 1-1.334 1.333H2.667A1.333 1.333 0 0 1 1.333 12V4a1.333 1.333 0 0 1 1.334-1.333z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M14.667 4L8 8.667 1.333 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const PhoneIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M14.667 11.28v2a1.333 1.333 0 0 1-1.454 1.333 13.193 13.193 0 0 1-5.753-2.046 13 13 0 0 1-4-4 13.193 13.193 0 0 1-2.047-5.78A1.333 1.333 0 0 1 2.747 1.333h2a1.333 1.333 0 0 1 1.333 1.147c.085.64.241 1.268.467 1.873a1.333 1.333 0 0 1-.3 1.407L5.22 6.787a10.667 10.667 0 0 0 4 4l1.027-1.027a1.333 1.333 0 0 1 1.407-.3c.605.226 1.233.382 1.873.467a1.333 1.333 0 0 1 1.14 1.353z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const LockIcon = ({ size = 24, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const NotificationSuccessIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M13.333 4L6 11.333 2.667 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const NotificationErrorIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const NotificationInfoIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <circle cx="8" cy="8" r="6.667" stroke="currentColor" strokeWidth="1.2"/>
+    <path d="M8 7.333V10.667M8 5.333h.007" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+  </svg>
+)
+
+export const NotificationCloseIcon = ({ size = 16, className = '' }: { size?: number; className?: string } = {}) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const AuthBackgroundGraphic = ({ className = '' }: { className?: string } = {}) => (
+  <svg width="489" height="588" viewBox="0 0 489 588" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <g clipPath="url(#auth-bg-clip)">
+      <path d="M-17.7607 -1.80137C3.60513 -22.7649 13.5775 -28.1841 25.5659 -31.7493C37.5544 -35.3145 49.8146 -35.3145 61.803 -31.7493C73.7915 -28.1841 83.7639 -22.7649 105.13 -1.80136L140.062 32.4732C161.428 53.4367 166.951 63.2214 170.585 74.9841C174.218 86.7467 174.218 98.7762 170.585 110.539C166.951 122.302 161.428 132.086 140.062 153.05L105.13 187.324C83.7639 208.288 73.7915 213.707 61.8031 217.272C49.8146 220.837 37.5543 220.837 25.5659 217.272C13.5775 213.707 3.60513 208.288 -17.7607 187.324L-52.6929 153.05C-74.0588 132.086 -79.5819 122.302 -83.2156 110.539C-86.8492 98.7762 -86.8492 86.7468 -83.2156 74.9841C-79.5819 63.2214 -74.0588 53.4367 -52.6929 32.4732L-17.7607 -1.80137Z" fill="var(--surface-tertiary)"/>
+      <path d="M174.305 176.142C195.671 155.178 205.643 149.759 217.632 146.194C229.62 142.629 241.88 142.629 253.869 146.194C265.857 149.759 275.83 155.178 297.195 176.142L332.128 210.416C353.494 231.38 359.017 241.164 362.65 252.927C366.284 264.69 366.284 276.719 362.65 288.482C359.017 300.245 353.494 310.029 332.128 330.993L297.195 365.267C275.83 386.231 265.857 391.65 253.869 395.215C241.88 398.781 229.62 398.781 217.632 395.215C205.643 391.65 195.671 386.231 174.305 365.267L139.373 330.993C118.007 310.029 112.484 300.245 108.85 288.482C105.217 276.719 105.217 264.69 108.85 252.927C112.484 241.164 118.007 231.38 139.373 210.416L174.305 176.142Z" fill="var(--surface-tertiary)"/>
+      <path d="M-60.1281 280.648C-38.7623 259.685 -28.7899 254.265 -16.8015 250.7C-4.81308 247.135 7.4472 247.135 19.4356 250.7C31.424 254.265 41.3964 259.685 62.7623 280.648L97.6945 314.923C119.06 335.886 124.583 345.671 128.217 357.434C131.851 369.196 131.851 381.226 128.217 392.988C124.583 404.751 119.06 414.536 97.6945 435.499L62.7623 469.774C41.3964 490.737 31.424 496.156 19.4356 499.722C7.44721 503.287 -4.81308 503.287 -16.8015 499.722C-28.7899 496.156 -38.7623 490.737 -60.1281 469.774L-95.0604 435.499C-116.426 414.536 -121.949 404.751 -125.583 392.988C-129.217 381.226 -129.217 369.196 -125.583 357.434C-121.949 345.671 -116.426 335.886 -95.0604 314.923L-60.1281 280.648Z" fill="var(--surface-tertiary)"/>
+      <path d="M256.215 -83.7118C277.581 -104.675 287.554 -110.094 299.542 -113.66C311.53 -117.225 323.791 -117.225 335.779 -113.66C347.768 -110.094 357.74 -104.675 379.106 -83.7118L414.038 -49.4372C435.404 -28.4737 440.927 -18.689 444.561 -6.92635C448.194 4.83635 448.194 16.8658 444.561 28.6285C440.927 40.3912 435.404 50.1758 414.038 71.1394L379.106 105.414C357.74 126.377 347.768 131.797 335.779 135.362C323.791 138.927 311.53 138.927 299.542 135.362C287.554 131.797 277.581 126.377 256.215 105.414L221.283 71.1394C199.917 50.1758 194.394 40.3912 190.761 28.6285C187.127 16.8658 187.127 4.83635 190.761 -6.92635C194.394 -18.689 199.917 -28.4737 221.283 -49.4372L256.215 -83.7118Z" fill="var(--surface-tertiary)"/>
+    </g>
+    <defs>
+      <clipPath id="auth-bg-clip">
+        <rect width="489" height="588" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export const IconDot: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <circle cx="16" cy="16" r="4" fill="currentColor" />
+  </svg>
+)
+
+export const IconThreeDots: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <path d="M9 14C10.1046 14 11 14.8954 11 16C11 17.1046 10.1046 18 9 18C7.89543 18 7 17.1046 7 16C7 14.8954 7.89543 14 9 14ZM16 14C17.1046 14 18 14.8954 18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14ZM23 14C24.1046 14 25 14.8954 25 16C25 17.1046 24.1046 18 23 18C21.8954 18 21 17.1046 21 16C21 14.8954 21.8954 14 23 14Z" fill="currentColor" />
+  </svg>
+)
+
+export const IconGripVertical: React.FC<ShadcnIconProps> = ({ className = '', size = 24 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={`flex-shrink-0 ${className}`}>
+    <path d="M13 20C14.1046 20 15 20.8954 15 22C15 23.1046 14.1046 24 13 24C11.8954 24 11 23.1046 11 22C11 20.8954 11.8954 20 13 20ZM19 20C20.1046 20 21 20.8954 21 22C21 23.1046 20.1046 24 19 24C17.8954 24 17 23.1046 17 22C17 20.8954 17.8954 20 19 20ZM13 14C14.1046 14 15 14.8954 15 16C15 17.1046 14.1046 18 13 18C11.8954 18 11 17.1046 11 16C11 14.8954 11.8954 14 13 14ZM19 14C20.1046 14 21 14.8954 21 16C21 17.1046 20.1046 18 19 18C17.8954 18 17 17.1046 17 16C17 14.8954 17.8954 14 19 14ZM13 8C14.1046 8 15 8.89543 15 10C15 11.1046 14.1046 12 13 12C11.8954 12 11 11.1046 11 10C11 8.89543 11.8954 8 13 8ZM19 8C20.1046 8 21 8.89543 21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8Z" fill="currentColor" />
+  </svg>
+)
+
+// ── Sandbox icon aliases (used by shadcn ui components) ─────────────────────
+export const IconArrowLeft = ArrowLeftIcon
+export const IconArrowRight = ArrowRightIcon
+export const IconChevronLeft = ChevronLeftIcon
+export const IconChevronRight = ChevronRightIcon
+export const IconSearch = SearchIcon
+
+export const IconChevronDown: React.FC<{ className?: string }> = ({ className }) => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const IconLeft: React.FC<{ className?: string }> = ({ className }) => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const IconRight: React.FC<{ className?: string }> = ({ className }) => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M9 18L15 12L9 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
 export const LocationIcon = ({ width = 48, height = 48, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
   <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
     <path d="M16 22.4853L20.2426 18.2426C22.5858 15.8995 22.5858 12.1005 20.2426 9.75736C17.8995 7.41421 14.1005 7.41421 11.7574 9.75736C9.41421 12.1005 9.41421 15.8995 11.7574 18.2426L16 22.4853ZM21.6569 19.6569L16 25.3137L10.3432 19.6569C7.21895 16.5327 7.21895 11.4673 10.3432 8.34315C13.4673 5.21895 18.5327 5.21895 21.6569 8.34315C24.781 11.4673 24.781 16.5327 21.6569 19.6569ZM9 26H23V28H9V26Z" fill="currentColor"/>
@@ -608,4 +775,3 @@ export const SettingsPageWaiversIcon = ({ size = 24, className = '', ...props }:
     <path d="M29.3657 27.8354C31.4117 26.4405 34.0772 25.7503 37.729 26.1685L38.4731 26.2661L38.6235 26.2974C39.3599 26.4857 39.8491 27.2053 39.7339 27.9731C39.6184 28.741 38.9395 29.2849 38.1802 29.2485L38.0278 29.2339L37.395 29.1489C34.308 28.7933 32.394 29.4019 31.0562 30.314C29.5595 31.3345 28.5809 32.8586 27.5396 34.6099C26.5775 36.2279 25.4604 38.2594 23.6812 39.4409C21.8382 40.6643 19.5533 40.8605 16.5776 39.8687L15.9731 39.6548L15.8325 39.5933C15.1516 39.2557 14.8228 38.4502 15.0952 37.7231C15.3681 36.996 16.1461 36.6045 16.8813 36.7983L17.0278 36.8452L17.5229 37.021C19.9234 37.8245 21.1853 37.498 22.0229 36.9419C23.1024 36.2249 23.8614 34.9277 24.9614 33.0776C25.9824 31.3606 27.2536 29.2757 29.3657 27.8354ZM22.0132 6.82178C22.3878 6.08288 23.2909 5.78703 24.0298 6.16162L30.855 9.62256L30.9878 9.69775C31.6279 10.1082 31.8654 10.9454 31.5142 11.6382L21.6284 31.1382C21.5083 31.375 21.327 31.5762 21.104 31.7202L14.7261 35.8394C14.2781 36.1287 13.7106 36.1585 13.2349 35.9175C12.759 35.6762 12.4459 35.2001 12.4146 34.6675L11.9673 27.0884C11.9517 26.8234 12.0075 26.5586 12.1274 26.3218L22.0132 6.82178ZM14.9878 27.3149L15.2583 31.9224L19.1372 29.4185L28.1606 11.6196L24.0112 9.51611L14.9878 27.3149Z" fill="currentColor"/>
   </svg>
 )
-

package/src/v2/index.ts

@@ -81,9 +81,9 @@ export type { EmptyStateProps } from './components/EmptyState'
 export { StepIndicator } from './components/StepIndicator'
 export type { StepIndicatorProps } from './components/StepIndicator'
 
-// RadioCard Component
-export { RadioCard } from './components/RadioCard'
-export type { RadioCardProps, RadioCardOption } from './components/RadioCard'
+// RadioCardGroup Component
+export { RadioCardGroup } from './components/RadioCard'
+export type { RadioCardGroupProps, RadioCardOption } from './components/RadioCard'
 
 // AvatarUpload Component
 export { AvatarUpload } from './components/AvatarUpload'
@@ -102,10 +102,6 @@ export type { QuickFilterProps, QuickFilterOption } from './components/QuickFilt
 // Navigation Components
 // ============================================================================
 
-// Core Navigation
-export { Navigation } from './navigation/Navigation'
-export type { NavigationProps } from './navigation/Navigation'
-
 // Navigation Building Blocks
 export { NavigationItem } from './navigation/NavigationItem'
 export type { NavigationItemProps } from './navigation/NavigationItem'
@@ -172,6 +168,16 @@ export { NAVIGATION_ITEMS } from './navigation/config'
 // Icons
 export * from './icons'
 
+// New v2 components
+export { Toggle } from './components/Toggle'
+export type { ToggleProps } from './components/Toggle'
+export { FeatureToggle } from './components/FeatureToggle'
+export type { FeatureToggleProps } from './components/FeatureToggle'
+export { AccountManagerCard } from './components/AccountManagerCard'
+export type { AccountManagerCardProps } from './components/AccountManagerCard'
+export { NotificationBanner } from './components/NotificationBanner'
+export type { NotificationBannerProps } from './components/NotificationBanner'
+
 // ============================================================================
 // Hooks
 // ============================================================================
@@ -212,4 +218,79 @@ export type { AuthLayoutProps, LoginPageProps, ResetPasswordPageProps, CreatePas
  * - @/v2/styles/components/Button.scss
  * - @/v2/styles/form/NewInput.scss
  * - @/v2/styles/navigation/*.scss
+ *
+ * shadcn/ui components are available from:
+ * - @/v2/shadcn/components/ui/
  */
+
+// shadcn/ui components
+// Note: shadcn components with name collisions (Button, Checkbox) should be imported
+// directly from '@licklist/design/v2/shadcn' to avoid ambiguity with native v2 components.
+export {
+  cn,
+  buttonVariants,
+  Input,
+  Label,
+  Badge,
+  badgeVariants,
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Separator,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+  Skeleton,
+  Switch,
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TooltipProvider as ShadcnTooltipProvider,
+  TooltipTrigger as ShadcnTooltipTrigger,
+  TooltipContent as ShadcnTooltipContent,
+} from './shadcn'
+// shadcn Button and Checkbox exported with Shadcn prefix to avoid collision with native v2 components
+export { Button as ShadcnButton, Checkbox as ShadcnCheckbox, Tooltip as ShadcnTooltip } from './shadcn'

package/src/v2/navigation/DashboardLayout/AdminSidebar.scss

@@ -41,18 +41,48 @@
         cursor: pointer;
         width: 100%;
         box-sizing: border-box;
+        border: none;
+        font: inherit;
+        text-align: left;
 
-        &:hover {
+        &:hover:not(.admin-sidebar__header--active) {
             background: var(--surfaces-main-background-secondary-hover, #F0F0F4);
         }
 
-        &:active {
+        &:active:not(.admin-sidebar__header--active) {
             background: var(--surfaces-main-background-secondary-pressed, #E8E8EC);
         }
 
         &--collapsed {
             justify-content: center;
         }
+
+        &--active {
+            background: linear-gradient(
+                to top right,
+                var(--gradient-stop3, #0E8CE2) 0%,
+                var(--gradient-stop2, #5D5BF4) 50%,
+                var(--gradient-stop1, #6200EE) 100%
+            );
+            border-radius: 8px;
+
+            .admin-sidebar__title {
+                color: white;
+            }
+
+            .admin-sidebar__badge {
+                background: rgba(255, 255, 255, 0.2);
+
+                span {
+                    color: white;
+                }
+            }
+
+            .admin-sidebar__avatar {
+                border: 2px solid rgba(255, 255, 255, 0.8);
+                background: white;
+            }
+        }
     }
 
     &__avatar {
@@ -65,12 +95,16 @@
         justify-content: center;
         overflow: hidden;
         position: relative;
-        border: 2px solid var(--borders-main-border-primary);
-        background: var(--surfaces-main-background-secondary);
+        border: 2px solid var(--borders-main-border-secondary, #C8CAD8);
+        background: white;
 
         img {
             width: 100%;
             height: 100%;
+            object-fit: contain;
+        }
+
+        &--photo img {
             object-fit: cover;
         }
     }
@@ -105,7 +139,7 @@
         width: fit-content;
         transition: background 0.2s ease;
 
-        .admin-sidebar__header:hover & {
+        .admin-sidebar__header:hover:not(.admin-sidebar__header--active) & {
             background: var(--surfaces-main-surface-primary, #FFFFFF);
         }
 
@@ -140,12 +174,16 @@
         outline: none;
         width: 100%;
         color: var(--fills-main-fill-primary, #14215A);
+        background: none;
+        border: none;
+        font: inherit;
+        text-align: left;
 
-        &:hover:not(&--active) {
+        &:hover:not(.admin-sidebar__link--active) {
             background: var(--surfaces-main-background-secondary-hover, #F0F0F4);
         }
 
-        &:active:not(&--active) {
+        &:active:not(.admin-sidebar__link--active) {
             background: var(--surfaces-main-background-secondary-pressed, #E8E8EC);
         }
 
@@ -197,7 +235,7 @@
 
     &__link-text {
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 13px;
         line-height: 16px;
         color: var(--labels-main-label-primary, #121E52);