@draftbit/core 47.0.1-2f600c.2 → 47.0.1-4681da.2

package/src/components/Button.js

@@ -7,7 +7,7 @@ const CONSTANTS = {
     padding: 8,
     icon: 24,
 };
-function Base({ Icon, icon, title, loading, disabled, style, activeOpacity, disabledOpacity, ...props }) {
+function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
     const titleStyles = {
         color,
@@ -28,11 +28,11 @@ function Base({ Icon, icon, title, loading, disabled, style, activeOpacity, disa
     if (textAlign === "right") {
         buttonStyles.justifyContent = "flex-end";
     }
-    return (React.createElement(Pressable, { disabled: disabled || loading, style: ({ pressed }) => {
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
             return [
                 styles.base,
                 {
-                    opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+                    opacity: pressed || disabled ? 0.75 : 1,
                 },
                 buttonStyles,
             ];

package/src/components/Button.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import {
   Text,
   Pressable,
-  PressableProps,
   Platform,
   StyleSheet,
   TextStyle,
+  PressableProps,
   ActivityIndicator,
 } from "react-native";
 
@@ -27,11 +27,6 @@ type BaseProps = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
-  onLongPress?: () => void;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-  delayLongPress?: number;
-  hitSlop?: number;
   icon?: string;
 } & PressableProps &
   IconSlot;
@@ -42,11 +37,6 @@ type Props = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
-  onLongPress?: () => void;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-  delayLongPress?: number;
-  hitSlop?: number;
   icon?: string;
   theme: Theme;
 } & PressableProps &
@@ -56,11 +46,10 @@ function Base({
   Icon,
   icon,
   title,
+  onPress,
   loading,
   disabled,
   style,
-  activeOpacity,
-  disabledOpacity,
   ...props
 }: BaseProps): JSX.Element {
   const {
@@ -102,12 +91,13 @@ function Base({
 
   return (
     <Pressable
+      onPress={onPress}
       disabled={disabled || loading}
       style={({ pressed }) => {
         return [
           styles.base,
           {
-            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+            opacity: pressed || disabled ? 0.75 : 1,
           },
           buttonStyles,
         ];

package/src/components/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { View, StyleSheet, Pressable, } from "react-native";
+import { View, StyleSheet, } from "react-native";
 import { useTheme } from "../../theming";
+import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
     const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
@@ -32,7 +33,7 @@ const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck,
             onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
         }
     };
-    return (React.createElement(Pressable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
+    return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
         React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
         React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
             React.createElement(View, { style: [

package/src/components/Checkbox/Checkbox.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import {
   View,
   StyleSheet,
-  Pressable,
-  PressableProps,
+  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
 } from "react-native";
 import { useTheme } from "../../theming";
 import type { IconSlot } from "../../interfaces/Icon";
 
+import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 
 export interface CheckboxProps {
@@ -27,7 +27,9 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
+const Checkbox: React.FC<
+  CheckboxProps & TouchableHighlightProps & IconSlot
+> = ({
   Icon,
   status,
   disabled = false,
@@ -85,7 +87,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
   };
 
   return (
-    <Pressable
+    <Touchable
       {...rest}
       onPress={handlePress}
       disabled={disabled}
@@ -109,7 +111,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
           ]}
         />
       </View>
-    </Pressable>
+    </Touchable>
   );
 };
 

package/src/components/Checkbox/CheckboxGroupRow.js

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { StyleSheet, View, Platform, Pressable, } from "react-native";
+import { StyleSheet, View, Platform, } from "react-native";
 import Checkbox from "./Checkbox";
 import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
+import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
 export var Direction;
 (function (Direction) {
@@ -40,7 +41,7 @@ const CheckboxGroupRow = ({ Icon, label = "Label", status, value, onPress, label
         }
     };
     const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Pressable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
+    return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
         React.createElement(View, { style: [
                 styles.label,
                 {

package/src/components/Checkbox/CheckboxGroupRow.tsx

@@ -6,13 +6,13 @@ import {
   TextStyle,
   View,
   Platform,
-  Pressable,
 } from "react-native";
 import Checkbox, { CheckboxProps } from "./Checkbox";
 import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import type { IconSlot } from "../../interfaces/Icon";
 import { Direction as GroupDirection } from "./context";
+import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
 
 export enum Direction {
@@ -92,7 +92,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
   const { textStyles, viewStyles } = extractStyles(style);
 
   return (
-    <Pressable
+    <Touchable
       onPress={handlePress}
       style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
       disabled={disabled}
@@ -125,7 +125,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
           uncheckedColor={uncheckedColor}
         />
       </View>
-    </Pressable>
+    </Touchable>
   );
 };
 

package/src/components/Checkbox/CheckboxRow.js

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { StyleSheet, View, Platform, Pressable, } from "react-native";
+import { StyleSheet, View, Platform, } from "react-native";
 import { isString } from "lodash";
 import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
+import Touchable from "../Touchable";
 import Checkbox from "./Checkbox";
 export var Direction;
 (function (Direction) {
@@ -45,7 +46,7 @@ const CheckboxRow = ({ label = "Label", labelStyle, labelContainerStyle, checkbo
         }
     };
     const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Pressable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
+    return (React.createElement(Touchable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], disabled: disabled, ...rest },
         React.createElement(View, { style: [
                 styles.label,
                 {

package/src/components/Checkbox/CheckboxRow.tsx

@@ -6,7 +6,6 @@ import {
   TextStyle,
   View,
   Platform,
-  Pressable,
 } from "react-native";
 import { isString } from "lodash";
 
@@ -14,6 +13,7 @@ import type { IconSlot } from "../../interfaces/Icon";
 import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
+import Touchable from "../Touchable";
 import Checkbox, { CheckboxProps } from "./Checkbox";
 
 export enum Direction {
@@ -100,7 +100,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
   const { textStyles, viewStyles } = extractStyles(style);
 
   return (
-    <Pressable
+    <Touchable
       onPress={handlePress}
       style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
       disabled={disabled}
@@ -130,7 +130,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
         uncheckedIcon={uncheckedIcon}
         size={size}
       />
-    </Pressable>
+    </Touchable>
   );
 };
 

package/src/components/DeprecatedButton.js

@@ -1,10 +1,11 @@
 import * as React from "react";
-import { ActivityIndicator, View, Text, StyleSheet, Pressable, } from "react-native";
+import { ActivityIndicator, View, Text, StyleSheet, } from "react-native";
 import color from "color";
 import Config from "./Config";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
-const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
+const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
     let backgroundColor, borderColor, textColor, borderWidth;
     const buttonColor = colorOverride || colors.primary;
     if (type === "solid") {
@@ -58,8 +59,19 @@ const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false,
             width: Config.buttonIconSize,
         },
     ];
-    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch" } },
-        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle] },
+    const { margin, marginEnd, marginTop, marginLeft, marginRight, marginBottom, marginHorizontal, marginVertical, ...innerStyles } = StyleSheet.flatten(style || {});
+    const margins = {
+        margin,
+        marginEnd,
+        marginTop,
+        marginLeft,
+        marginRight,
+        marginBottom,
+        marginHorizontal,
+        marginVertical,
+    };
+    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch", ...margins } },
+        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },
             React.createElement(View, { style: styles.content },
                 icon && loading !== true ? (React.createElement(View, { style: iconStyle },
                     React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,

package/src/components/DeprecatedButton.tsx

@@ -4,14 +4,14 @@ import {
   View,
   Text,
   StyleSheet,
+  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  Pressable,
-  PressableProps,
 } from "react-native";
 import color from "color";
 import Config from "./Config";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 
@@ -63,7 +63,7 @@ type Props = {
   elevation?: number;
   style?: StyleProp<ViewStyle>;
   theme: Theme;
-} & PressableProps &
+} & TouchableHighlightProps &
   IconSlot;
 
 const Button: React.FC<React.PropsWithChildren<Props>> = ({
@@ -77,6 +77,7 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   onPress,
   elevation = 0,
+  style,
   theme: { colors, disabledOpacity, roundness, typography },
   ...rest
 }) => {
@@ -136,15 +137,38 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
     },
   ];
 
+  const {
+    margin,
+    marginEnd,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    marginHorizontal,
+    marginVertical,
+    ...innerStyles
+  } = StyleSheet.flatten(style || {});
+
+  const margins = {
+    margin,
+    marginEnd,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    marginHorizontal,
+    marginVertical,
+  };
+
   return (
-    <Elevation style={{ elevation, alignSelf: "stretch" }}>
-      <Pressable
+    <Elevation style={{ elevation, alignSelf: "stretch", ...margins }}>
+      <Touchable
         {...rest}
         onPress={onPress}
         accessibilityState={{ disabled }}
         accessibilityRole="button"
         disabled={disabled || loading}
-        style={[styles.button, buttonStyle]}
+        style={[styles.button, buttonStyle, innerStyles]}
       >
         <View style={styles.content}>
           {icon && loading !== true ? (
@@ -167,7 +191,7 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
             {children}
           </Text>
         </View>
-      </Pressable>
+      </Touchable>
     </Elevation>
   );
 };

package/src/components/DeprecatedFAB.js

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
+import { ActivityIndicator, View, StyleSheet, } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
@@ -82,7 +83,7 @@ const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, co
         });
     }
     return (React.createElement(Elevation, { style: [{ elevation }, style] },
-        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
+        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
             React.createElement(View, { style: styles.content },
                 icon && loading !== true ? (React.createElement(View, { style: iconStyle },
                     React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,

package/src/components/DeprecatedFAB.tsx

@@ -3,15 +3,15 @@ import {
   ActivityIndicator,
   View,
   StyleSheet,
+  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  Pressable,
-  PressableProps,
 } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 
@@ -65,7 +65,7 @@ type Props = {
   elevation?: number;
   theme: Theme;
   style?: StyleProp<ViewStyle>;
-} & PressableProps &
+} & TouchableHighlightProps &
   IconSlot;
 
 const FAB: React.FC<React.PropsWithChildren<Props>> = ({
@@ -169,7 +169,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <Elevation style={[{ elevation }, style]}>
-      <Pressable
+      <Touchable
         {...rest}
         onPress={onPress}
         accessibilityState={{ disabled }}
@@ -200,7 +200,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
             </Text>
           ) : null}
         </View>
-      </Pressable>
+      </Touchable>
     </Elevation>
   );
 };

package/src/components/Touchable.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { Pressable } from "react-native";
-export default function Touchable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
-    return (React.createElement(Pressable, { disabled: disabled, onPress: onPress, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
+export default function Touchable({ children, disabled, onPress, style, ...props }) {
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, style: ({ pressed }) => {
             return [
                 {
-                    opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+                    opacity: pressed || disabled ? 0.75 : 1,
                 },
                 style,
             ];

package/src/components/Touchable.tsx

@@ -1,39 +1,29 @@
 import React from "react";
-import { Pressable, PressableProps, ViewStyle } from "react-native";
+import { Pressable, ViewStyle, PressableProps } from "react-native";
 
 type Props = {
   disabled?: boolean;
   children: React.ReactNode;
   style?: ViewStyle;
   onPress?: () => void;
-  onLongPress?: () => void;
-  delayLongPress?: number;
-  hitSlop?: number;
-  activeOpacity?: number;
-  disabledOpacity?: number;
 } & PressableProps;
 
 export default function Touchable({
   children,
   disabled,
   onPress,
-  activeOpacity,
-  disabledOpacity,
-  delayLongPress,
-  hitSlop,
   style,
   ...props
 }: Props) {
   return (
     <Pressable
-      disabled={disabled}
       onPress={onPress}
-      delayLongPress={delayLongPress ? delayLongPress : 500}
-      hitSlop={hitSlop ? hitSlop : 8}
+      disabled={disabled}
+      hitSlop={8}
       style={({ pressed }) => {
         return [
           {
-            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+            opacity: pressed || disabled ? 0.75 : 1,
           },
           style,
         ];

package/src/mappings/Button.js

@@ -1,8 +1,7 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, createStaticNumberProp, } from "@draftbit/types";
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
-    onLongPress: createActionProp(),
     icon: createIconProp({
         defaultValue: null,
         required: false,
@@ -14,36 +13,11 @@ const SEED_DATA_PROPS = {
     }),
     disabled: createDisabledProp(),
     loading: createLoadingProp(),
-    activeOpacity: createStaticNumberProp({
-        label: "Active Opacity",
-        description: "Opacity of the button when active.",
-        defaultValue: 0.8,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        precision: 2,
-        required: false,
-    }),
-    disabledOpacity: createStaticNumberProp({
-        label: "Disabled Opacity",
-        description: "Opacity of the button when disabled.",
-        defaultValue: 0.8,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        precision: 2,
-        required: false,
-    }),
-    delayLongPress: createStaticNumberProp({
-        label: "Delay Long Press",
-        description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-        required: false,
-    }),
-    hitSlop: createStaticNumberProp({
-        label: "Hit Slop",
-        description: "Sets additional distance outside of element in which a press can be detected",
-        required: false,
-    }),
+};
+const LAYOUT = {
+    backgroundColor: "transparent",
+    borderRadius: 8,
+    fontFamily: "system-700",
 };
 export const SEED_DATA = [
     {
@@ -60,8 +34,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "transparent",
             borderWidth: 1,
             textAlign: "center",
@@ -83,8 +56,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },
@@ -105,8 +77,7 @@ export const SEED_DATA = [
             StylesPanelSections.Effects,
         ],
         layout: {
-            borderRadius: 8,
-            fontFamily: "system-700",
+            ...LAYOUT,
             backgroundColor: "primary",
             textAlign: "center",
         },

package/src/mappings/Button.ts

@@ -7,13 +7,11 @@ import {
   createActionProp,
   Triggers,
   StylesPanelSections,
-  createStaticNumberProp,
 } from "@draftbit/types";
 
-const SEED_DATA_TRIGGERS = [Triggers.OnPress, Triggers.OnLongPress];
+const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
   onPress: createActionProp(),
-  onLongPress: createActionProp(),
   icon: createIconProp({
     defaultValue: null,
     required: false,
@@ -25,38 +23,12 @@ const SEED_DATA_PROPS = {
   }),
   disabled: createDisabledProp(),
   loading: createLoadingProp(),
-  activeOpacity: createStaticNumberProp({
-    label: "Active Opacity",
-    description: "Opacity of the button when active.",
-    defaultValue: 0.8,
-    min: 0,
-    max: 1,
-    step: 0.01,
-    precision: 2,
-    required: false,
-  }),
-  disabledOpacity: createStaticNumberProp({
-    label: "Disabled Opacity",
-    description: "Opacity of the button when disabled.",
-    defaultValue: 0.8,
-    min: 0,
-    max: 1,
-    step: 0.01,
-    precision: 2,
-    required: false,
-  }),
-  delayLongPress: createStaticNumberProp({
-    label: "Delay Long Press",
-    description:
-      "Duration (in milliseconds) from onPressIn before onLongPress is called.",
-    required: false,
-  }),
-  hitSlop: createStaticNumberProp({
-    label: "Hit Slop",
-    description:
-      "Sets additional distance outside of element in which a press can be detected",
-    required: false,
-  }),
+};
+
+const LAYOUT = {
+  backgroundColor: "transparent",
+  borderRadius: 8,
+  fontFamily: "system-700",
 };
 
 export const SEED_DATA = [
@@ -74,8 +46,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "transparent",
       borderWidth: 1,
       textAlign: "center",
@@ -97,8 +68,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },
@@ -119,8 +89,7 @@ export const SEED_DATA = [
       StylesPanelSections.Effects,
     ],
     layout: {
-      borderRadius: 8,
-      fontFamily: "system-700",
+      ...LAYOUT,
       backgroundColor: "primary",
       textAlign: "center",
     },