@moderneinc/neo-styled-components 5.0.0-next.e7f738 → 5.0.0

package/dist/Checkbox/Checkbox.d.ts

@@ -1,11 +1,12 @@
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import type { ReactNode } from 'react';
 /**
- * Custom checkbox icons matching Figma design
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
+ * NeoCheckbox uses Lucide icons (square / square-check / square-minus): a rounded
+ * outline drawn in `currentColor`, with the check/minus mark sharing that stroke —
+ * so a single per-state `color` (set in StyledCheckbox) drives every variant.
  *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
- * Check/minus paths scaled from Untitled UI (originally 24x24)
  */
 type CheckboxSize = 'xs' | 'small' | 'medium';
 declare module '@mui/material/Checkbox' {

package/dist/index.d.ts

@@ -640,11 +640,12 @@ interface StyledComponent<ComponentProps extends {}, SpecificComponentProps exte
 }
 
 /**
- * Custom checkbox icons matching Figma design
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
+ * NeoCheckbox uses Lucide icons (square / square-check / square-minus): a rounded
+ * outline drawn in `currentColor`, with the check/minus mark sharing that stroke —
+ * so a single per-state `color` (set in StyledCheckbox) drives every variant.
  *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
- * Check/minus paths scaled from Untitled UI (originally 24x24)
  */
 type CheckboxSize = 'xs' | 'small' | 'medium';
 declare module '@mui/material/Checkbox' {

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import MuiAvatar from '@mui/material/Avatar';
-import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import React, { useContext, createContext, forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
@@ -600,11 +600,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$m = [
+const __iconNode$p = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$m);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$p);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -614,11 +614,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$m);
  */
 
 
-const __iconNode$l = [
+const __iconNode$o = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$l);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$o);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -628,7 +628,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$n = [
   [
     "path",
     {
@@ -639,7 +639,7 @@ const __iconNode$k = [
   ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
   ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
 ];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$k);
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$n);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -649,7 +649,7 @@ const BadgeInfo = createLucideIcon("badge-info", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$m = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -661,7 +661,7 @@ const __iconNode$j = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$j);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$m);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -671,8 +671,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -682,8 +682,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
+const __iconNode$k = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$k);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -693,8 +693,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
  */
 
 
-const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+const __iconNode$j = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -704,8 +704,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$f);
+const __iconNode$i = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -715,11 +715,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$h = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$e);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -729,12 +729,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$d);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -744,11 +744,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$f = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -758,12 +758,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$b);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$e);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -773,12 +773,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$b
  */
 
 
-const __iconNode$a = [
+const __iconNode$d = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$a);
+const Columns3 = createLucideIcon("columns-3", __iconNode$d);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -788,12 +788,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$c = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$9);
+const ListFilter = createLucideIcon("list-filter", __iconNode$c);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -803,8 +803,8 @@ const ListFilter = createLucideIcon("list-filter", __iconNode$9);
  */
 
 
-const __iconNode$8 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$8);
+const __iconNode$b = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$b);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -814,12 +814,12 @@ const Minus = createLucideIcon("minus", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$a = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
 ];
-const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$7);
+const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$a);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -829,12 +829,12 @@ const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$9 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
 ];
-const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$6);
+const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$9);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -844,11 +844,11 @@ const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$5);
+const Plus = createLucideIcon("plus", __iconNode$8);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -858,11 +858,52 @@ const Plus = createLucideIcon("plus", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$7 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$7);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$6 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+const SquareCheck = createLucideIcon("square-check", __iconNode$6);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M8 12h8", key: "1wcyev" }]
+];
+const SquareMinus = createLucideIcon("square-minus", __iconNode$5);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+];
+const Square = createLucideIcon("square", __iconNode$4);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -1731,20 +1772,6 @@ const NeoCard = (props) => {
 };
 NeoCard.displayName = 'NeoCard';
 
-// Border radius per size (from Figma)
-const borderRadiusConfig = {
-    xs: 2,
-    small: 3,
-    medium: 4,
-};
-// Unchecked: Rounded square outline (20x20 viewBox)
-const UncheckedIcon$1 = ({ size = 'medium' }) => (jsx(SvgIcon, { viewBox: "0 0 20 20", children: jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: borderRadiusConfig[size], fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }));
-// Checked: Filled rounded square with white checkmark
-// Path scaled from Untitled UI 24x24 (M20 6L9 17L4 12) to 20x20
-const CheckedIcon$1 = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M15 6L8.5 13L5 9.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
-// Indeterminate: Filled rounded square with white minus
-// Path scaled from Untitled UI 24x24 (M5 12H19) to 20x20
-const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M5 10H15", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" })] }));
 const CheckboxContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
@@ -1777,7 +1804,7 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
-// Figma-exact border radius for xs checkbox — no matching design token
+// xs focus-ring radius — no matching design token (box corner comes from the icon)
 const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
@@ -1790,11 +1817,11 @@ const StyledCheckbox = styled(Checkbox, {
         },
         small: {
             size: 16,
-            borderRadius: borderRadius.xXS, // From Figma: 2px for small
+            borderRadius: borderRadius.xXS, // focus-ring radius (small)
         },
         medium: {
             size: 20,
-            borderRadius: borderRadius.xS, // From Figma: 4px for medium
+            borderRadius: borderRadius.xS, // focus-ring radius (medium)
         },
     };
     const config = sizeConfig[size];
@@ -1806,37 +1833,30 @@ const StyledCheckbox = styled(Checkbox, {
         color: semanticColors.border.primary,
         borderRadius: config.borderRadius,
         flexShrink: 0,
-        // Root element
-        [`&.${checkboxClasses.root}`]: {
-            '&:hover': {
-                backgroundColor: 'transparent',
-            },
+        // Suppress MUI's grey hover background
+        '&:hover': {
+            backgroundColor: 'transparent',
         },
-        // Checkbox icon (unchecked)
-        [`& .${checkboxClasses.root}`]: {
-            width: config.size,
-            height: config.size,
+        // Hover on the unchecked box — subtle blue outline affordance (enabled only)
+        [`&:hover:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate}):not(.${checkboxClasses.disabled})`]: {
+            color: colors.digitalBlue[300],
         },
-        // Checked state
+        // Checked / Indeterminate — primary blue outline + mark
         [`&.${checkboxClasses.checked}`]: {
-            color: semanticColors.buttons.primary.default,
+            color: colors.digitalBlue[600],
         },
-        // Indeterminate state
         [`&.${checkboxClasses.indeterminate}`]: {
-            color: semanticColors.buttons.primary.default,
+            color: colors.digitalBlue[600],
         },
-        // Disabled state
+        // Disabled — enabled colors dimmed to 40%. Checked/indeterminate keep
+        // digitalBlue[600] via the rules above; re-assert the unchecked outline
+        // token so it beats MUI's default `.Mui-disabled` color.
         [`&.${checkboxClasses.disabled}`]: {
-            color: semanticColors.border.primary,
+            opacity: 0.4,
             cursor: 'not-allowed',
-            // When checked and disabled
-            [`&.${checkboxClasses.checked}`]: {
-                color: semanticColors.border.primary,
-            },
-            // When indeterminate and disabled
-            [`&.${checkboxClasses.indeterminate}`]: {
-                color: semanticColors.border.primary,
-            },
+        },
+        [`&.${checkboxClasses.disabled}:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate})`]: {
+            color: semanticColors.border.primary,
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
@@ -1844,11 +1864,10 @@ const StyledCheckbox = styled(Checkbox, {
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
-        // Custom SVG icons
+        // Size the Lucide icon (color comes from `color` → currentColor → stroke)
         '& svg': {
             width: config.size,
             height: config.size,
-            fill: 'currentColor',
         },
     };
 });
@@ -1899,10 +1918,10 @@ const StyledCheckbox = styled(Checkbox, {
 const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }) => {
     // Add custom class to identify NeoCheckbox instances
     const combinedClassName = className ? `neo-checkbox ${className}` : 'neo-checkbox';
-    // Create size-specific icons
-    const defaultIcon = icon || jsx(UncheckedIcon$1, { size: size });
-    const defaultCheckedIcon = checkedIcon || jsx(CheckedIcon$1, { size: size });
-    const defaultIndeterminateIcon = indeterminateIcon || jsx(IndeterminateIcon, { size: size });
+    // Default icons (sized via CSS on the SVG); overridable per instance
+    const defaultIcon = icon || jsx(Square, {});
+    const defaultCheckedIcon = checkedIcon || jsx(SquareCheck, {});
+    const defaultIndeterminateIcon = indeterminateIcon || jsx(SquareMinus, {});
     // If no label, return just the checkbox
     if (!label && !helperText) {
         return (jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
@@ -2762,11 +2781,13 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
-        // Style row selection checkboxes to match header (16px, proper spacing)
+        // Style row selection checkboxes to match header (16px, proper spacing).
+        // Target `& svg` (not `.MuiSvgIcon-root`) so the rule also matches the
+        // lucide `<svg>` icons NeoCheckbox renders, mirroring the header rule.
         [`& .${gridClasses.cellCheckbox}`]: {
             [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
-                [`& .${svgIconClasses.root}`]: {
+                '& svg': {
                     width: 16,
                     height: 16,
                 },
@@ -6297,6 +6318,9 @@ const NeoRipplingDot = props => (jsx(Box$1, { "aria-hidden": "true", ...props, s
             borderRadius: '50%',
             border: '1px solid currentColor',
             animation: `${ripple} 5.6s ease-in-out infinite`,
+            '@media (prefers-reduced-motion: reduce)': {
+                display: 'none',
+            },
         },
         ...props.sx,
     } }));
@@ -7409,6 +7433,9 @@ const NeoVibratingDot = props => (jsx(Box$1, { "aria-hidden": "true", ...props,
         verticalAlign: 'middle',
         flexShrink: 0,
         animation: `${vibrate} 5.6s ease-in-out infinite`,
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+        },
         ...props.sx,
     } }));
 NeoVibratingDot.displayName = 'NeoVibratingDot';