@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/commonjs/components/Toast/Toast.js

@@ -9,10 +9,11 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const SWIPE_DISMISS_THRESHOLD = 80;
-const SWIPE_VELOCITY_THRESHOLD = 0.5;
-const STACK_OFFSET = 8;
-const STACK_SCALE_STEP = 0.04;
+const DEFAULT_SWIPE_DISMISS_THRESHOLD = 80;
+const DEFAULT_SWIPE_VELOCITY_THRESHOLD = 0.5;
+const DEFAULT_STACK_OFFSET = 8;
+const DEFAULT_STACK_SCALE_STEP = 0.04;
+const DEFAULT_AUTO_DISMISS_MS = 3000;
 const Toast = ({
   toast,
   index,
@@ -28,6 +29,16 @@ const Toast = ({
   const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
   const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
   const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
+  const swipeDismissThreshold = toastTokens?.swipeDismissThreshold ?? DEFAULT_SWIPE_DISMISS_THRESHOLD;
+  const swipeVelocityThreshold = toastTokens?.swipeVelocityThreshold ?? DEFAULT_SWIPE_VELOCITY_THRESHOLD;
+  const stackOffset = toastTokens?.stackOffset ?? DEFAULT_STACK_OFFSET;
+  const stackScaleStep = toastTokens?.stackScaleStep ?? DEFAULT_STACK_SCALE_STEP;
+  const stackMinScale = toastTokens?.stackMinScale ?? 0.9;
+  const defaultDurationMs = toastTokens?.defaultDurationMs ?? DEFAULT_AUTO_DISMISS_MS;
+  const enableSwipeDismiss = toastTokens?.enableSwipeDismiss ?? true;
+  const enterSpringDamping = toastTokens?.enterSpringDamping ?? 18;
+  const enterSpringStiffness = toastTokens?.enterSpringStiffness ?? 180;
+  const enterSpringMass = toastTokens?.enterSpringMass ?? 1;
   const enterFrom = position === 'top' ? -120 : 120;
   const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(enterFrom)).current;
   const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
@@ -53,16 +64,16 @@ const Toast = ({
   (0, _react.useEffect)(() => {
     _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
       toValue: 0,
-      damping: 18,
-      stiffness: 180,
-      mass: 1,
+      damping: enterSpringDamping,
+      stiffness: enterSpringStiffness,
+      mass: enterSpringMass,
       useNativeDriver: true
     }), _reactNative.Animated.timing(opacity, {
       toValue: 1,
       duration: theme.motion.duration.fast,
       useNativeDriver: true
     })]).start();
-    const duration = toast.duration ?? 3000;
+    const duration = toast.duration ?? defaultDurationMs;
     if (duration > 0) {
       const timer = setTimeout(() => dismiss(true), duration);
       return () => clearTimeout(timer);
@@ -78,7 +89,7 @@ const Toast = ({
       (0, _index.setNativeValue)(opacity, fade);
     },
     onPanResponderRelease: (_evt, gesture) => {
-      if (Math.abs(gesture.dx) > SWIPE_DISMISS_THRESHOLD || Math.abs(gesture.vx) > SWIPE_VELOCITY_THRESHOLD) {
+      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
         const direction = gesture.dx >= 0 ? 1 : -1;
         _reactNative.Animated.parallel([_reactNative.Animated.timing(translateX, {
           toValue: direction * 500,
@@ -105,8 +116,8 @@ const Toast = ({
   }),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const stackTranslate = position === 'top' ? index * STACK_OFFSET : -index * STACK_OFFSET;
-  const stackScale = Math.max(1 - index * STACK_SCALE_STEP, 0.9);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
   const handleActionPress = () => {
     toast.action?.onPress();
     dismiss(true);
@@ -121,7 +132,7 @@ const Toast = ({
         height: iconCircleSize,
         borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
-      }],
+      }, toast.iconCircleStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.iconGlyph, {
           color: tint,
@@ -134,7 +145,7 @@ const Toast = ({
   };
   const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    ...panResponder.panHandlers,
+    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
     accessibilityRole: "alert",
     accessibilityLiveRegion: "assertive",
     accessibilityLabel: a11yLabel,
@@ -152,7 +163,7 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }, toast.style],
+    }, toast.style, toast.containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.tintBar, {
         width: tintBarWidth,
@@ -167,7 +178,7 @@ const Toast = ({
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
             ...(0, _index.fontFor)(theme, 'semibold')
-          }, toast.textStyle],
+          }, toast.textStyle, toast.messageStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -186,7 +197,7 @@ const Toast = ({
           pressed
         }) => [styles.actionBtn, {
           backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }],
+        }, toast.actionButtonStyle],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: tint,

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -9,12 +9,14 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const TOOLTIP_GAP = 8;
-const SCREEN_PADDING = 8;
-const PRESS_AUTO_HIDE_MS = 4000;
-const ARROW_HALF_WIDTH = 4; // half of 8px arrow base
-const ARROW_HEIGHT = 6;
-const ARROW_CORNER_PADDING = 12;
+const DEFAULT_TOOLTIP_GAP = 8;
+const DEFAULT_SCREEN_PADDING = 8;
+const DEFAULT_PRESS_AUTO_HIDE_MS = 4000;
+const DEFAULT_ARROW_HALF_WIDTH = 4; // half of 8px arrow base
+const DEFAULT_ARROW_HEIGHT = 6;
+const DEFAULT_ARROW_CORNER_PADDING = 12;
+const DEFAULT_MAX_WIDTH = 240;
+const DEFAULT_LINE_HEIGHT = 18;
 const Tooltip = props => {
   const {
     content,
@@ -24,14 +26,28 @@ const Tooltip = props => {
     visible: controlledVisible,
     onVisibleChange,
     hideOnContentPress = true,
-    maxWidth = 240,
+    maxWidth,
     showArrow = true,
     accessibilityLabel,
     style,
+    containerStyle,
+    arrowStyle: arrowStyleOverride,
+    messageStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tooltipTokens = theme.components.tooltip;
+  const TOOLTIP_GAP = tooltipTokens?.gap ?? DEFAULT_TOOLTIP_GAP;
+  const SCREEN_PADDING = tooltipTokens?.screenPadding ?? DEFAULT_SCREEN_PADDING;
+  const PRESS_AUTO_HIDE_MS = tooltipTokens?.pressAutoHideMs ?? DEFAULT_PRESS_AUTO_HIDE_MS;
+  const ARROW_HALF_WIDTH = tooltipTokens?.arrowHalfWidth ?? DEFAULT_ARROW_HALF_WIDTH;
+  const ARROW_HEIGHT = tooltipTokens?.arrowHeight ?? DEFAULT_ARROW_HEIGHT;
+  const ARROW_CORNER_PADDING = tooltipTokens?.arrowCornerPadding ?? DEFAULT_ARROW_CORNER_PADDING;
+  const MESSAGE_LINE_HEIGHT = tooltipTokens?.lineHeight ?? DEFAULT_LINE_HEIGHT;
+  const resolvedMaxWidth = maxWidth ?? tooltipTokens?.maxWidth ?? DEFAULT_MAX_WIDTH;
+  const enableScaleAnimation = tooltipTokens?.enableScaleAnimation ?? false;
+  const exitDurationMs = tooltipTokens?.exitDurationMs ?? 150;
   const isControlled = trigger === 'manual' || typeof controlledVisible === 'boolean';
   const [internalVisible, setInternalVisible] = (0, _react.useState)(false);
   const visible = isControlled ? Boolean(controlledVisible) : internalVisible;
@@ -41,7 +57,7 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = (0, _react.useRef)(null);
-  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0.85)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : enableScaleAnimation ? 0.85 : 1)).current;
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0)).current;
   const autoHideTimer = (0, _react.useRef)(null);
   const didMount = (0, _react.useRef)(false);
@@ -93,17 +109,21 @@ const Tooltip = props => {
     }
     if (visible) {
       measureAnchor();
-      _reactNative.Animated.parallel([_reactNative.Animated.spring(scale, {
-        toValue: 1,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(opacity, {
+      const enterAnims = [_reactNative.Animated.timing(opacity, {
         toValue: 1,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
-      })]).start();
+      })];
+      if (enableScaleAnimation) {
+        enterAnims.push(_reactNative.Animated.spring(scale, {
+          toValue: 1,
+          damping: theme.motion.spring.snappy.damping,
+          stiffness: theme.motion.spring.snappy.stiffness,
+          mass: theme.motion.spring.snappy.mass,
+          useNativeDriver: true
+        }));
+      }
+      _reactNative.Animated.parallel(enterAnims).start();
       if (trigger === 'press') {
         if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
         autoHideTimer.current = setTimeout(() => {
@@ -111,15 +131,19 @@ const Tooltip = props => {
         }, PRESS_AUTO_HIDE_MS);
       }
     } else {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(scale, {
-        toValue: 0.85,
-        duration: 150,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(opacity, {
+      const exitAnims = [_reactNative.Animated.timing(opacity, {
         toValue: 0,
-        duration: 150,
+        duration: exitDurationMs,
         useNativeDriver: true
-      })]).start();
+      })];
+      if (enableScaleAnimation) {
+        exitAnims.push(_reactNative.Animated.timing(scale, {
+          toValue: 0.85,
+          duration: exitDurationMs,
+          useNativeDriver: true
+        }));
+      }
+      _reactNative.Animated.parallel(exitAnims).start();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;
@@ -156,7 +180,7 @@ const Tooltip = props => {
         arrowOffset: 0
       };
     }
-    const tooltipWidth = size.width || Math.min(maxWidth, screen.width - SCREEN_PADDING * 2);
+    const tooltipWidth = size.width || Math.min(resolvedMaxWidth, screen.width - SCREEN_PADDING * 2);
     const tooltipHeight = size.height || 0;
 
     // Choose placement.
@@ -215,7 +239,7 @@ const Tooltip = props => {
       placement: resolved,
       arrowOffset
     };
-  }, [anchor, size, placement, maxWidth]);
+  }, [anchor, size, placement, resolvedMaxWidth, SCREEN_PADDING, TOOLTIP_GAP, ARROW_CORNER_PADDING]);
 
   // Build the cloned trigger.
   const triggerProps = {};
@@ -292,7 +316,7 @@ const Tooltip = props => {
         rotate: '-90deg'
       }]
     };
-  }, [showArrow, position, theme]);
+  }, [showArrow, position, theme, ARROW_HALF_WIDTH, ARROW_HEIGHT]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       ref: wrapperRef,
@@ -321,12 +345,12 @@ const Tooltip = props => {
             position: 'absolute',
             top: position.top,
             left: position.left,
-            maxWidth,
+            maxWidth: resolvedMaxWidth,
             opacity,
             transform: [{
               scale
             }]
-          }, style],
+          }, style, containerStyle],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.tooltip, {
               backgroundColor: theme.colors.background.inverse,
@@ -337,15 +361,15 @@ const Tooltip = props => {
               shadowColor: theme.shadows.lg.shadowColor
             }],
             children: typeof content === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: {
+              style: [{
                 color: theme.colors.text.inverse,
                 fontSize: theme.typography.fontSize.sm,
-                lineHeight: 18
-              },
+                lineHeight: MESSAGE_LINE_HEIGHT
+              }, messageStyle],
               children: content
             }) : content
           }), arrowStyle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: arrowStyle,
+            style: [arrowStyle, arrowStyleOverride],
             pointerEvents: "none"
           }) : null]
         }) : null

package/lib/commonjs/components/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "AppBar", {
     return _index19.AppBar;
   }
 });
-Object.defineProperty(exports, "AppIcon", {
-  enumerable: true,
-  get: function () {
-    return _index20.AppIcon;
-  }
-});
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,
   get: function () {
@@ -156,37 +150,43 @@ Object.defineProperty(exports, "FormField", {
 Object.defineProperty(exports, "ImageGallery", {
   enumerable: true,
   get: function () {
-    return _index21.ImageGallery;
+    return _index20.ImageGallery;
   }
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () {
-    return _index22.Input;
+    return _index21.Input;
   }
 });
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
-    return _index23.ListItem;
+    return _index22.ListItem;
   }
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
-    return _index25.Modal;
+    return _index24.Modal;
   }
 });
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
-    return _index26.NumberInput;
+    return _index25.NumberInput;
   }
 });
 Object.defineProperty(exports, "OTPInput", {
   enumerable: true,
   get: function () {
-    return _index27.OTPInput;
+    return _index26.OTPInput;
+  }
+});
+Object.defineProperty(exports, "PickerTrigger", {
+  enumerable: true,
+  get: function () {
+    return _index27.PickerTrigger;
   }
 });
 Object.defineProperty(exports, "ProgressBar", {
@@ -237,22 +237,16 @@ Object.defineProperty(exports, "Skeleton", {
     return _index35.Skeleton;
   }
 });
-Object.defineProperty(exports, "SkeletonAvatar", {
-  enumerable: true,
-  get: function () {
-    return _index35.SkeletonAvatar;
-  }
-});
-Object.defineProperty(exports, "SkeletonCard", {
+Object.defineProperty(exports, "SkeletonCircle", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonCard;
+    return _index35.SkeletonCircle;
   }
 });
-Object.defineProperty(exports, "SkeletonCircle", {
+Object.defineProperty(exports, "SkeletonClockProvider", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonCircle;
+    return _index35.SkeletonClockProvider;
   }
 });
 Object.defineProperty(exports, "SkeletonContent", {
@@ -267,12 +261,6 @@ Object.defineProperty(exports, "SkeletonList", {
     return _index35.SkeletonList;
   }
 });
-Object.defineProperty(exports, "SkeletonListItem", {
-  enumerable: true,
-  get: function () {
-    return _index35.SkeletonListItem;
-  }
-});
 Object.defineProperty(exports, "SkeletonProvider", {
   enumerable: true,
   get: function () {
@@ -300,7 +288,7 @@ Object.defineProperty(exports, "Slider", {
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function () {
-    return _index24.Spinner;
+    return _index23.Spinner;
   }
 });
 Object.defineProperty(exports, "Stepper", {
@@ -357,6 +345,18 @@ Object.defineProperty(exports, "toast", {
     return _index41.toast;
   }
 });
+Object.defineProperty(exports, "useReduceMotion", {
+  enumerable: true,
+  get: function () {
+    return _index35.useReduceMotion;
+  }
+});
+Object.defineProperty(exports, "useSkeletonClock", {
+  enumerable: true,
+  get: function () {
+    return _index35.useSkeletonClock;
+  }
+});
 Object.defineProperty(exports, "useSkeletonDefaults", {
   enumerable: true,
   get: function () {
@@ -390,14 +390,14 @@ var _index16 = require("./FormField/index.js");
 var _index17 = require("./FloatingActionButton/index.js");
 var _index18 = require("./ForceUpdateDialog/index.js");
 var _index19 = require("./AppBar/index.js");
-var _index20 = require("./AppIcon/index.js");
-var _index21 = require("./ImageGallery/index.js");
-var _index22 = require("./Input/index.js");
-var _index23 = require("./ListItem/index.js");
-var _index24 = require("./Spinner/index.js");
-var _index25 = require("./Modal/index.js");
-var _index26 = require("./NumberInput/index.js");
-var _index27 = require("./OTPInput/index.js");
+var _index20 = require("./ImageGallery/index.js");
+var _index21 = require("./Input/index.js");
+var _index22 = require("./ListItem/index.js");
+var _index23 = require("./Spinner/index.js");
+var _index24 = require("./Modal/index.js");
+var _index25 = require("./NumberInput/index.js");
+var _index26 = require("./OTPInput/index.js");
+var _index27 = require("./PickerTrigger/index.js");
 var _index28 = require("./ProgressBar/index.js");
 var _index29 = require("./Radio/index.js");
 var _index30 = require("./Rating/index.js");

package/lib/commonjs/theme/tokens.js

@@ -54,6 +54,39 @@ const radius = {
   '2xl': 28,
   full: 9999
 };
+
+// `field` tokens hold the canonical dimensions every input-like control
+// inherits via FieldBase. Heights, radii and padding ladders here are the
+// single source of truth — Input, Select, SearchBar, NumberInput, OTPInput
+// cell and PickerTrigger fall through to these unless their own component
+// tokens override. Fill / border colours resolve at theme-build time inside
+// the providers (which know `colors.*`) — these defaults are dimension-only.
+const fieldSizes = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
 const components = {
   button: {
     xs: {
@@ -122,26 +155,33 @@ const components = {
     }
   },
   searchBar: {
+    // `borderRadius: radius.full` keeps the historical pill shape as the
+    // library default. Brands wanting SearchBar to share Input / Select's
+    // rounded-rect shape override per size to match `field.<size>.borderRadius`
+    // (10 / 12 / 14), or drop a single value in via theme merge.
     sm: {
       height: 36,
       paddingHorizontal: 10,
       fontSize: 13,
       iconSize: 16,
-      gap: 6
+      gap: 6,
+      borderRadius: radius.full
     },
     md: {
       height: 44,
       paddingHorizontal: 12,
       fontSize: 15,
       iconSize: 18,
-      gap: 8
+      gap: 8,
+      borderRadius: radius.full
     },
     lg: {
       height: 52,
       paddingHorizontal: 14,
       fontSize: 16,
       iconSize: 20,
-      gap: 10
+      gap: 10,
+      borderRadius: radius.full
     },
     cancelButtonWidth: 72
   },
@@ -165,6 +205,14 @@ const components = {
       paddingVertical: '2xl'
     }
   },
+  field: {
+    defaultVariant: 'outlined',
+    sm: fieldSizes.sm,
+    md: fieldSizes.md,
+    lg: fieldSizes.lg
+    // Variant fill / border colours are filled in at theme-build time by the
+    // light/dark Theme objects below — they need access to `colors.*`.
+  },
   listItem: {
     sm: {
       paddingVertical: 'sm',
@@ -233,7 +281,6 @@ const components = {
     lg: {
       boxSize: 24
     },
-    borderWidth: 1.5,
     labelGap: 10
   },
   radio: {
@@ -249,7 +296,6 @@ const components = {
       outer: 24,
       inner: 12
     },
-    borderWidth: 1.5,
     labelGap: 10
   },
   switch: {
@@ -499,7 +545,8 @@ const lightTheme = exports.lightTheme = {
       primary: '#E5E5EC',
       secondary: '#EFEFF3',
       focus: '#5B5BD6',
-      error: '#E5484D'
+      error: '#E5484D',
+      width: 1.5
     },
     surface: {
       pressed: 'rgba(15, 15, 26, 0.06)',
@@ -553,7 +600,8 @@ const darkTheme = exports.darkTheme = {
       primary: '#27272F',
       secondary: '#1C1C26',
       focus: '#7C7CE8',
-      error: '#F87171'
+      error: '#F87171',
+      width: 1.5
     },
     surface: {
       pressed: 'rgba(255, 255, 255, 0.08)',