lupine.components 1.1.28 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/badge/badge-demo.tsx

@@ -40,8 +40,8 @@ export const badgeDemo: DemoStory<BadgeProps> = {
     content: 5,
     max: 99,
     dot: false,
-    color: '#ffffff',
-    bgColor: '#e74c3c',
+    color: 'var(--primary-bg-color, #ffffff)',
+    bgColor: 'var(--danger-bg-color, var(--primary-accent-color, #e74c3c))',
   },
   argTypes: {
     content: { control: 'number', description: 'Number or text to display' },
@@ -64,14 +64,30 @@ export const badgeDemo: DemoStory<BadgeProps> = {
               bgColor={args.bgColor}
               onClick={() => alert(`Badge clicked: ${args.content}`)}
             >
-              <div style={{ padding: '8px 16px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>Messages</div>
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Messages
+              </div>
             </Badge>
           </div>
 
           <div style={{ textAlign: 'center' }}>
             <div style={{ marginBottom: '16px' }}>Max Value (99+)</div>
             <Badge content={150} max={99}>
-              <div style={{ padding: '8px 16px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>Notifications</div>
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Notifications
+              </div>
             </Badge>
           </div>
 
@@ -85,14 +101,29 @@ export const badgeDemo: DemoStory<BadgeProps> = {
           <div style={{ textAlign: 'center' }}>
             <div style={{ marginBottom: '16px' }}>Custom Node Content</div>
             <Badge content={<CheckIcon />} bgColor='var(--success-color, #2ecc71)'>
-              <div style={{ width: '40px', height: '40px', backgroundColor: '#eee', borderRadius: '4px' }} />
+              <div
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  backgroundColor: 'var(--secondary-bg-color, #eee)',
+                  borderRadius: '4px',
+                }}
+              />
             </Badge>
           </div>
 
           <div style={{ textAlign: 'center' }}>
             <div style={{ marginBottom: '16px' }}>Text Content</div>
             <Badge content='NEW' bgColor='var(--primary-accent-color, #0a74c9)'>
-              <div style={{ padding: '8px 16px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>Features</div>
+              <div
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f0f0)',
+                  borderRadius: '4px',
+                }}
+              >
+                Features
+              </div>
             </Badge>
           </div>
 

package/src/component-pool/badge/badge.tsx

@@ -38,8 +38,8 @@ const badgeCss: CssProps = {
     lineHeight: '1',
     whiteSpace: 'nowrap',
 
-    backgroundColor: 'var(--danger-color, #e74c3c)',
-    color: '#ffffff',
+    backgroundColor: 'var(--danger-bg-color, var(--primary-accent-color, #e74c3c))',
+    color: 'var(--primary-bg-color, #ffffff)',
     boxShadow: '0 0 0 1px var(--primary-bg-color, #ffffff)',
 
     zIndex: 10,

package/src/component-pool/breadcrumbs/breadcrumbs-demo.tsx

@@ -59,17 +59,31 @@ export const breadcrumbsDemo: DemoStory<BreadcrumbsProps> = {
       <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
         <div>
           <h3 style={{ marginBottom: '20px' }}>Auto-Collapsing Long Breadcrumbs</h3>
-          <p style={{ color: '#666', fontSize: '13px', marginBottom: '10px' }}>
+          <p style={{ color: 'var(--secondary-color, #666)', fontSize: '13px', marginBottom: '10px' }}>
             Scale the window (or iframe) down to see the middle sections collapse into an ellipsis `...`
           </p>
-          <div style={{ padding: '16px', border: '1px solid #eee', borderRadius: '8px', backgroundColor: '#fafafa' }}>
+          <div
+            style={{
+              padding: '16px',
+              border: '1px solid var(--primary-border, #eee)',
+              borderRadius: '8px',
+              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
+            }}
+          >
             <Breadcrumbs items={longItems} autoCollapse={args.autoCollapse} />
           </div>
         </div>
 
         <div>
           <h3 style={{ marginBottom: '20px' }}>Short Breadcrumbs</h3>
-          <div style={{ padding: '16px', border: '1px solid #eee', borderRadius: '8px', backgroundColor: '#fafafa' }}>
+          <div
+            style={{
+              padding: '16px',
+              border: '1px solid var(--primary-border, #eee)',
+              borderRadius: '8px',
+              backgroundColor: 'var(--secondary-bg-color, #fafafa)',
+            }}
+          >
             <Breadcrumbs items={shortItems} autoCollapse={args.autoCollapse} />
           </div>
         </div>

package/src/component-pool/breadcrumbs/breadcrumbs.tsx

@@ -47,7 +47,7 @@ export const Breadcrumbs = (props: BreadcrumbsProps) => {
       transition: 'color 0.2s',
     },
     '.&-item.is-active': {
-      color: 'var(--primary-text-color, #111827)',
+      color: 'var(--primary-color, #111827)',
       fontWeight: '500',
     },
     '.&-item a': {
@@ -60,7 +60,7 @@ export const Breadcrumbs = (props: BreadcrumbsProps) => {
       transition: 'color 0.2s',
     },
     '.&-item a:hover': {
-      color: 'var(--primary-text-color, #111827)',
+      color: 'var(--primary-color, #111827)',
     },
     '.&-separator': {
       display: 'inline-flex',

package/src/component-pool/card/card-demo.tsx

@@ -81,8 +81,8 @@ export const cardDemo: DemoStory<any> = {
                         padding: '4px 12px',
                         borderRadius: '4px',
                         border: 'none',
-                        backgroundColor: 'var(--primary-color)',
-                        color: '#fff',
+                        backgroundColor: 'var(--primary-accent-color, #1890ff)',
+                        color: 'var(--primary-bg-color, #fff)',
                         cursor: 'pointer',
                       }}
                     >
@@ -140,8 +140,9 @@ export const cardDemo: DemoStory<any> = {
                   style={{
                     padding: '8px 16px',
                     borderRadius: '6px',
-                    border: '1px solid var(--primary-color)',
-                    background: 'none',
+                    border: '1px solid var(--primary-accent-color, #1890ff)',
+                    color: 'var(--primary-accent-color, #1890ff)',
+                    background: 'transparent',
                   }}
                 >
                   Preview
@@ -151,8 +152,8 @@ export const cardDemo: DemoStory<any> = {
                     padding: '8px 16px',
                     borderRadius: '6px',
                     border: 'none',
-                    background: 'var(--primary-color)',
-                    color: '#fff',
+                    background: 'var(--primary-accent-color, #1890ff)',
+                    color: 'var(--primary-bg-color, #fff)',
                   }}
                 >
                   Add to Cart

package/src/component-pool/carousel/carousel-demo.tsx

@@ -29,7 +29,7 @@ export const carouselDemo: DemoStory<any> = {
         fontWeight: 'bold',
         marginBottom: '20px',
         color: 'var(--primary-color)',
-        borderBottom: '2px solid var(--secondary-border-color)',
+        borderBottom: '2px solid var(--primary-border, #eee)',
         paddingBottom: '10px',
       },
       '.carousel-container': {
@@ -148,8 +148,8 @@ export const carouselDemo: DemoStory<any> = {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  backgroundColor: '#f0f4f8',
-                  color: '#2c3e50',
+                  backgroundColor: 'var(--secondary-bg-color, #f0f4f8)',
+                  color: 'var(--primary-color, #2c3e50)',
                   fontSize: '24px',
                 }}
               >
@@ -168,8 +168,8 @@ export const carouselDemo: DemoStory<any> = {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  backgroundColor: '#e8f5e9',
-                  color: '#2e7d32',
+                  backgroundColor: 'var(--success-bg-color, #e8f5e9)',
+                  color: 'var(--success-color, #2e7d32)',
                   fontSize: '24px',
                 }}
               >

package/src/component-pool/carousel/carousel.tsx

@@ -68,8 +68,8 @@ const carouselCss: CssProps = {
     width: '40px',
     height: '40px',
     borderRadius: '50%',
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-    border: '1px solid var(--secondary-border-color, #eee)',
+    backgroundColor: 'var(--primary-bg-color, rgba(255, 255, 255, 0.9))',
+    border: '1px solid var(--primary-border, #eee)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -77,8 +77,9 @@ const carouselCss: CssProps = {
     zIndex: 10,
     transition: 'all 0.3s ease',
     boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+    color: 'var(--primary-color, #000)',
     '&:hover': {
-      backgroundColor: '#fff',
+      backgroundColor: 'var(--secondary-bg-color, #fff)',
       transform: 'translateY(-50%) scale(1.1)',
     },
     '&.disabled': {

package/src/component-pool/copy-button/copy-button.tsx

@@ -30,8 +30,8 @@ const css: CssProps = {
 
   // Default styles based on variant
   '&.variant-solid': {
-    backgroundColor: 'var(--primary-color, #3b82f6)',
-    color: '#fff',
+    backgroundColor: 'var(--primary-accent-color, #3b82f6)',
+    color: 'var(--primary-bg-color, #fff)',
     '&:hover': {
       filter: 'brightness(1.1)',
     },
@@ -42,7 +42,7 @@ const css: CssProps = {
   '&.variant-outline': {
     border: '1px solid var(--secondary-border-color, #e5e7eb)',
     backgroundColor: 'var(--primary-bg-color, #fff)',
-    color: 'var(--primary-text-color, #111827)',
+    color: 'var(--primary-color, #111827)',
     '&:hover': {
       backgroundColor: 'var(--secondary-bg-color, #f3f4f6)',
     },
@@ -55,7 +55,7 @@ const css: CssProps = {
     color: 'var(--secondary-color, #6b7280)',
     '&:hover': {
       backgroundColor: 'var(--secondary-bg-color, #f3f4f6)',
-      color: 'var(--primary-text-color, #111827)',
+      color: 'var(--primary-color, #111827)',
     },
     '&:active': {
       transform: 'scale(0.95)',
@@ -80,9 +80,9 @@ const css: CssProps = {
     borderColor: 'var(--success-color, #10b981)',
   },
   '&.is-copied.variant-solid': {
-    backgroundColor: 'var(--success-color, #10b981)',
+    backgroundColor: 'var(--success-bg-color, var(--success-color, #10b981))',
     borderColor: 'transparent',
-    color: '#fff',
+    color: 'var(--success-text-color, #fff)',
   },
   '&.is-copied .&-default-content': {
     display: 'none',

package/src/component-pool/date-picker/date-picker.tsx

@@ -62,7 +62,7 @@ const datePickerCss: CssProps = {
     display: 'flex',
     alignItems: 'center',
     padding: '6px 12px 4px 12px',
-    borderBottom: '1px solid var(--secondary-border-color, #f0f0f0)',
+    borderBottom: '1px solid var(--primary-border, #f0f0f0)',
     gap: '4px',
   },
 
@@ -71,8 +71,8 @@ const datePickerCss: CssProps = {
     border: '1px solid transparent',
     backgroundColor: 'transparent',
     cursor: 'pointer',
-    color: 'var(--primary-color-normal, #666)',
-    '&:hover': { color: 'var(--primary-color, #1890ff)' },
+    color: 'var(--primary-color, #666)',
+    '&:hover': { color: 'var(--primary-accent-color, #1890ff)' },
     fontSize: '16px',
     fontWeight: 'bold',
   },
@@ -84,19 +84,23 @@ const datePickerCss: CssProps = {
     position: 'relative',
     '.year-input': {
       width: '60px',
-      border: '1px solid var(--secondary-border-color, #d9d9d9)',
+      border: '1px solid var(--primary-border, #d9d9d9)',
       borderRadius: '4px',
       padding: '4px',
       fontSize: '14px',
       textAlign: 'center',
       cursor: 'pointer',
-      '&:focus': { borderColor: 'var(--primary-color, #1890ff)', outline: 'none' },
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      '&:focus': { borderColor: 'var(--primary-accent-color, #1890ff)', outline: 'none' },
     },
   },
 
   '.&-month-select': {
-    border: '1px solid var(--secondary-border-color, #d9d9d9)',
+    border: '1px solid var(--primary-border, #d9d9d9)',
     borderRadius: '4px',
+    backgroundColor: 'transparent',
+    color: 'inherit',
     padding: '2px 4px',
     cursor: 'pointer',
   },
@@ -128,18 +132,18 @@ const datePickerCss: CssProps = {
     transition: 'all 0.2s',
 
     '&:hover': {
-      backgroundColor: 'var(--primary-bg-color-hover, #e6f7ff)',
-      color: 'var(--primary-color, #1890ff)',
+      backgroundColor: 'var(--secondary-bg-color, #e6f7ff)',
+      color: 'var(--primary-accent-color, #1890ff)',
     },
 
     '&.selected': {
-      backgroundColor: 'var(--primary-color, #1890ff)',
+      backgroundColor: 'var(--primary-accent-color, #1890ff)',
       color: '#fff',
       fontWeight: 'bold',
     },
 
     '&.today': {
-      color: 'var(--primary-color, #1890ff)',
+      color: 'var(--primary-accent-color, #1890ff)',
       fontWeight: 'bold',
       '&::after': {
         content: '""',
@@ -148,12 +152,12 @@ const datePickerCss: CssProps = {
         width: '4px',
         height: '4px',
         borderRadius: '50%',
-        backgroundColor: 'var(--primary-color, #1890ff)',
+        backgroundColor: 'var(--primary-accent-color, #1890ff)',
       },
     },
 
     '&.not-this-month': {
-      color: 'var(--secondary-color-light, #d9d9d9)',
+      color: 'var(--secondary-color, #d9d9d9)',
     },
   },
 
@@ -166,7 +170,7 @@ const datePickerCss: CssProps = {
     padding: '2px',
     borderRadius: '4px',
     cursor: 'pointer',
-    backgroundColor: 'var(--primary-color, #1890ff)',
+    backgroundColor: 'var(--primary-accent-color, #1890ff)',
     color: '#fff',
     border: 'none',
     transition: 'opacity 0.2s',
@@ -178,10 +182,10 @@ const datePickerCss: CssProps = {
     top: '100%',
     left: 0,
     right: 0,
-    backgroundColor: '#fff',
+    backgroundColor: 'var(--primary-bg-color, #fff)',
     boxShadow: 'var(--cover-box-shadow, 0 4px 12px rgba(0,0,0,0.1))',
     borderRadius: '4px',
-    border: '1px solid var(--secondary-border-color, #f0f0f0)',
+    border: '1px solid var(--primary-border, #f0f0f0)',
     maxHeight: '200px',
     overflowY: 'auto',
     scrollbarWidth: 'none',
@@ -198,7 +202,7 @@ const datePickerCss: CssProps = {
       cursor: 'pointer',
       fontSize: '13px',
       '&:hover': { backgroundColor: 'var(--secondary-bg-color, #f5f5f5)' },
-      '&.active': { color: 'var(--primary-color, #1890ff)', fontWeight: 'bold' },
+      '&.active': { color: 'var(--primary-accent-color, #1890ff)', fontWeight: 'bold' },
     },
   },
 };

package/src/component-pool/i-editor/i-editor-demo.tsx

@@ -2,7 +2,7 @@ import { CssProps, RefProps } from 'lupine.web';
 import { DemoStory } from '../../demo/demo-types';
 import { IEditor } from './i-editor';
 
-const IEditorDemoPage = () => {
+export const IEditorDemoPage = () => {
   let editor: IEditor | undefined;
 
   const ref: RefProps = {

package/src/component-pool/p-editor/p-editor-demo.tsx

@@ -3,7 +3,7 @@ import { DemoStory } from '../../demo/demo-types';
 import { PEditor } from './p-editor';
 import { PEditorOptions } from './p-editor-types';
 
-const PEditorDemoPage = (props: { args: PEditorOptions }) => {
+export const PEditorDemoPage = (props: { args: PEditorOptions }) => {
   let editor: PEditor | undefined;
 
   const ref: RefProps = {

package/src/component-pool/radial-progress/radial-progress-demo.tsx

@@ -49,7 +49,7 @@ export const radialProgressDemo: DemoStory<RadialProgressProps> = {
               marginTop: '20px',
             }}
           >
-            <RadialProgress value={10} size={ButtonSize.SmallLarge} />
+            <RadialProgress value={10} size={ButtonSize.SmallSmall} />
             <RadialProgress value={30} size={ButtonSize.Small} />
             <RadialProgress value={args.value} size={args.size} color={args.color} trackColor={args.trackColor} />
             <RadialProgress value={85} size={ButtonSize.LargeLarge} color='#49e57e' />

package/src/component-pool/range/gauge.tsx

@@ -8,8 +8,8 @@ export type GaugeHighlightRange = {
 };
 
 export type GaugeHookProps = {
-  setValue: (val: number | [number, number]) => void;
-  getValue: () => number | [number, number];
+  setValue?: (val: number | [number, number]) => void;
+  getValue?: () => number | [number, number];
 };
 
 export type GaugeProps = {

package/src/component-pool/time-picker/time-picker.tsx

@@ -64,7 +64,7 @@ const timePickerCss: CssProps = {
   '.&-columns': {
     display: 'flex',
     height: '220px',
-    borderBottom: '1px solid var(--secondary-border-color, #eee)',
+    borderBottom: '1px solid var(--primary-border, #eee)',
   },
 
   '.&-column': {
@@ -85,15 +85,15 @@ const timePickerCss: CssProps = {
     cursor: 'pointer',
     fontSize: '13px',
     transition: 'all 0.2s',
-    color: 'var(--primary-color-normal, #333)',
+    color: 'var(--primary-color, #333)',
 
     '&:hover': {
       backgroundColor: 'var(--secondary-bg-color, #f5f5f5)',
     },
 
     '&.selected': {
-      backgroundColor: 'var(--primary-bg-color-hover, #e6f7ff)',
-      color: 'var(--primary-color, #1890ff)',
+      backgroundColor: 'var(--secondary-bg-color, #e6f7ff)',
+      color: 'var(--primary-accent-color, #1890ff)',
       fontWeight: 'bold',
     },
   },
@@ -102,19 +102,19 @@ const timePickerCss: CssProps = {
     padding: '8px',
     display: 'flex',
     justifyContent: 'flex-end',
-    borderBottom: '1px solid var(--secondary-border-color, #f0f0f0)',
+    borderBottom: '1px solid var(--primary-border, #f0f0f0)',
   },
 
   ':global(.lupine-picker-host .top) .&-footer': {
     borderBottom: 'none',
-    borderTop: '1px solid var(--secondary-border-color, #f0f0f0)',
+    borderTop: '1px solid var(--primary-border, #f0f0f0)',
   },
 
   '.&-ok-btn': {
     padding: '2px 0 0 0',
     borderRadius: 'var(--border-radius-m, 6px)',
     cursor: 'pointer',
-    backgroundColor: 'var(--primary-color, #1890ff)',
+    backgroundColor: 'var(--primary-accent-color, #1890ff)',
     color: '#fff',
     border: 'none',
     transition: 'opacity 0.2s',

package/src/component-pool/tour/tour-demo.tsx

@@ -58,12 +58,26 @@ export const tourDemo: DemoStory<any> = {
         <div style={{ display: 'flex', gap: '20px', marginBottom: '40px' }}>
           <div
             id='tour-step-2'
-            style={{ padding: '20px', backgroundColor: '#f0f2f5', borderRadius: '8px', width: '200px' }}
+            style={{
+              padding: '20px',
+              backgroundColor: 'var(--secondary-bg-color, #f0f2f5)',
+              color: 'var(--primary-color, inherit)',
+              borderRadius: '8px',
+              width: '200px',
+            }}
           >
             <h3>Feature Card</h3>
             <p>This is some pseudo content to highlight.</p>
           </div>
-          <div style={{ padding: '20px', backgroundColor: '#f0f2f5', borderRadius: '8px', width: '200px' }}>
+          <div
+            style={{
+              padding: '20px',
+              backgroundColor: 'var(--secondary-bg-color, #f0f2f5)',
+              color: 'var(--primary-color, inherit)',
+              borderRadius: '8px',
+              width: '200px',
+            }}
+          >
             <h3>Another Card</h3>
             <p>This will not be highlighted.</p>
           </div>

package/src/component-pool/tour/tour.tsx

@@ -62,7 +62,7 @@ export const Tour = (props: TourProps) => {
       width: '280px',
       boxShadow: 'var(--cover-box-shadow, 0 4px 12px rgba(0,0,0,0.15))',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      color: 'var(--primary-text-color, #333)',
+      color: 'var(--primary-color, #333)',
       boxSizing: 'border-box',
     },
 
@@ -77,7 +77,7 @@ export const Tour = (props: TourProps) => {
       fontSize: '14px',
       lineHeight: '1.5',
       marginBottom: '16px',
-      color: 'var(--secondary-text-color)',
+      color: 'var(--secondary-color, #666)',
     },
 
     '.&-footer': {
@@ -88,7 +88,7 @@ export const Tour = (props: TourProps) => {
 
     '.&-steps-count': {
       fontSize: '12px',
-      color: 'var(--secondary-text-color)',
+      color: 'var(--secondary-color, #666)',
     },
 
     '.&-buttons': {
@@ -103,10 +103,11 @@ export const Tour = (props: TourProps) => {
       fontSize: '14px',
       border: 'none',
       backgroundColor: 'transparent',
+      color: 'var(--primary-color, #333)',
     },
 
     '.&-btn-primary': {
-      backgroundColor: 'var(--primary-color, #1890ff)',
+      backgroundColor: 'var(--primary-accent-color, #1890ff)',
       color: 'var(--primary-bg-color, white)',
     },
 

package/src/components/button-demo.tsx

@@ -23,12 +23,65 @@ export const buttonDemo: DemoStory<ButtonProps> = {
     const msg = new HtmlVar('');
     return (
       <div css={{ padding: '20px' }}>
-        <Button
-          {...args}
-          onClick={() => {
-            msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
-          }}
-        />
+        <div class='mx-l my-l'>
+          <Button
+            {...args}
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
+        <hr />
+
+        <div class='mx-l my-l'>
+          <Button
+            size={ButtonSize.SmallSmall}
+            text='SmallSmall Button'
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
+        <div class='mx-l my-l'>
+          <Button
+            size={ButtonSize.Small}
+            text='Small Button'
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
+        <div class='mx-l my-l'>
+          <Button
+            size={ButtonSize.Medium}
+            text={
+              <>
+                <i class='icon ifc-icon ma-account-cog-outline mr-m'></i>Button
+              </>
+            }
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
+        <div class='mx-l my-l'>
+          <Button
+            size={ButtonSize.Large}
+            text='Large Button'
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
+        <div class='mx-l my-l'>
+          <Button
+            size={ButtonSize.LargeLarge}
+            text='Large Button'
+            onClick={() => {
+              msg.value = `Clicked at ${new Date().toLocaleTimeString()}`;
+            }}
+          />
+        </div>
         <div css={{ marginTop: '10px', fontSize: '13px', color: 'var(--secondary-color, #999)' }}>{msg.node}</div>
       </div>
     );