react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,344 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _platform = require("../../platform");
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _overlay = require("../overlay");
+var _hairline = require("../../utils/hairline");
+var _number = require("../../utils/number");
+var _DropdownMenuContext = require("./DropdownMenuContext");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
+const isSameFrame = (prev, next) => prev != null && Math.abs(prev.x - next.x) < 0.5 && Math.abs(prev.y - next.y) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5;
+const DropdownMenu = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    children,
+    activeColor,
+    activeIcon,
+    direction = 'down',
+    disabled = false,
+    zIndex: zIndexProp = 10,
+    duration,
+    overlay = false,
+    closeOnClickOverlay = true,
+    closeOnClickOutside = true,
+    swipeThreshold,
+    onOpen,
+    onClose,
+    onOpened,
+    onClosed,
+    tokensOverride,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useDropdownMenuTokens)(tokensOverride);
+  const [menuValue = {}, onMenuChange] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: {}
+  });
+  const [activeIndex, setActiveIndex] = (0, _react().useState)(null);
+  const activeIndexRef = (0, _react().useRef)(null);
+  const [panel, setPanel] = (0, _react().useState)(null);
+  const [mounted, setMounted] = (0, _react().useState)(false);
+  const [barHeight, setBarHeight] = (0, _react().useState)(0);
+  const barRef = (0, _react().useRef)(null);
+  const [barFrame, setBarFrame] = (0, _react().useState)(null);
+  const [barWidth, setBarWidth] = (0, _react().useState)(0);
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = (0, _reactNative().useWindowDimensions)();
+  const panelRegistryRef = (0, _react().useRef)(new Map());
+  const zIndex = (0, _number.parseNumber)(zIndexProp, 10);
+  const durationMs = duration === undefined ? 200 : Math.max(0, (0, _number.parseNumber)(duration, 0.2)) * 1000;
+  const thresholdRaw = swipeThreshold === undefined ? undefined : (0, _number.parseNumberLike)(swipeThreshold);
+  const threshold = thresholdRaw !== undefined && thresholdRaw > 0 ? Math.floor(thresholdRaw) : undefined;
+  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const animationRef = (0, _react().useRef)(null);
+  const runAnimation = (0, _react().useCallback)((toValue, onFinished) => {
+    animationRef.current?.stop();
+    if (durationMs === 0) {
+      progress.setValue(toValue);
+      onFinished?.();
+      return;
+    }
+    const animation = _reactNative().Animated.timing(progress, {
+      toValue,
+      duration: durationMs,
+      useNativeDriver: _platform.nativeDriverEnabled
+    });
+    animationRef.current = animation;
+    animation.start(({
+      finished
+    }) => {
+      if (!finished) return;
+      onFinished?.();
+    });
+  }, [durationMs, progress]);
+  const registerPanel = (0, _react().useCallback)((index, content) => {
+    panelRegistryRef.current.set(index, content);
+    if (activeIndexRef.current === index) {
+      setPanel(content);
+    }
+  }, []);
+  const showItem = (0, _react().useCallback)(index => {
+    if (disabled) return;
+    activeIndexRef.current = index;
+    setActiveIndex(index);
+    setPanel(panelRegistryRef.current.get(index) ?? null);
+  }, [disabled]);
+  const closeMenu = (0, _react().useCallback)(() => {
+    activeIndexRef.current = null;
+    setActiveIndex(null);
+  }, []);
+  const toggleItem = (0, _react().useCallback)(index => {
+    if (disabled) return;
+    if (activeIndexRef.current === index) {
+      closeMenu();
+      return;
+    }
+    showItem(index);
+  }, [closeMenu, disabled, showItem]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    toggleItem,
+    showItem,
+    close: closeMenu
+  }), [closeMenu, showItem, toggleItem]);
+  const requestMeasure = (0, _react().useCallback)(fallbackHeight => {
+    const node = barRef.current;
+    if (!node) {
+      const fallback = {
+        x: 0,
+        y: 0,
+        width: barWidth || windowWidth,
+        height: fallbackHeight ?? barHeight
+      };
+      setBarFrame(prev => isSameFrame(prev, fallback) ? prev : fallback);
+      return;
+    }
+    (0, _platform.measureInWindow)(node, rect => {
+      if (rect) {
+        const next = {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
+        };
+        if (!Number.isFinite(next.x) || !Number.isFinite(next.y) || !Number.isFinite(next.width) || !Number.isFinite(next.height)) return;
+        setBarFrame(prev => isSameFrame(prev, next) ? prev : next);
+        return;
+      }
+      const fallback = {
+        x: 0,
+        y: 0,
+        width: barWidth || windowWidth,
+        height: fallbackHeight ?? barHeight
+      };
+      setBarFrame(prev => isSameFrame(prev, fallback) ? prev : fallback);
+    });
+  }, [barHeight, barWidth, windowWidth]);
+  const prevActiveIndexRef = (0, _react().useRef)(null);
+  (0, _react().useEffect)(() => {
+    const prev = prevActiveIndexRef.current;
+    prevActiveIndexRef.current = activeIndex;
+    if (activeIndex !== null && prev === null) {
+      setMounted(true);
+      requestMeasure();
+      setPanel(panelRegistryRef.current.get(activeIndex) ?? null);
+      onOpen?.();
+      progress.setValue(0);
+      runAnimation(1, () => onOpened?.());
+      return;
+    }
+    if (activeIndex === null && prev !== null) {
+      onClose?.();
+      runAnimation(0, () => {
+        setMounted(false);
+        setPanel(null);
+        onClosed?.();
+      });
+    }
+  }, [activeIndex, onClose, onClosed, onOpen, onOpened, progress, requestMeasure, runAnimation]);
+  (0, _react().useEffect)(() => {
+    if (!mounted) return;
+    requestMeasure();
+  }, [mounted, requestMeasure, windowHeight]);
+  (0, _react().useEffect)(() => () => {
+    animationRef.current?.stop();
+  }, []);
+  const barScrollable = threshold !== undefined && _react().default.Children.count(children) > threshold;
+  const contextValue = (0, _react().useMemo)(() => ({
+    activeIndex,
+    registerPanel,
+    toggleItem,
+    showItem,
+    closeMenu,
+    activeColor,
+    activeIcon,
+    direction,
+    disabled,
+    menuValue,
+    onMenuChange
+  }), [activeColor, activeIcon, activeIndex, closeMenu, direction, disabled, registerPanel, showItem, toggleItem, menuValue, onMenuChange]);
+  const shouldRenderMask = mounted && (overlay || closeOnClickOutside);
+  const shouldCloseOnMask = closeOnClickOverlay || closeOnClickOutside;
+  const resolvedBarTop = barFrame?.y ?? 0;
+  const resolvedBarHeight = barFrame?.height ?? barHeight;
+  const resolvedBarLeft = barFrame?.x ?? 0;
+  const resolvedBarWidth = barFrame?.width ?? (barWidth || windowWidth);
+  const resolvedBarBottom = resolvedBarTop + resolvedBarHeight;
+  const bottomInset = Math.max(0, windowHeight - resolvedBarTop);
+  const insetStyle = (0, _react().useMemo)(() => direction === 'up' ? {
+    bottom: bottomInset
+  } : {
+    top: resolvedBarBottom
+  }, [bottomInset, direction, resolvedBarBottom]);
+  const panelPositionStyle = (0, _react().useMemo)(() => ({
+    left: resolvedBarLeft,
+    width: resolvedBarWidth
+  }), [resolvedBarLeft, resolvedBarWidth]);
+  const panelRadiusStyle = direction === 'up' ? styles.panelUp : styles.panelDown;
+  const panelAnimatedStyle = (0, _react().useMemo)(() => {
+    const offset = 8;
+    const translate = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: direction === 'up' ? [offset, 0] : [-offset, 0]
+    });
+    return {
+      opacity: progress,
+      transform: [{
+        translateY: translate
+      }]
+    };
+  }, [direction, progress]);
+  const {
+    zIndex: stackZIndex
+  } = (0, _overlay.useOverlayStack)({
+    visible: mounted,
+    lockScroll: shouldRenderMask,
+    zIndex,
+    type: 'dropdown-menu'
+  });
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const barChildren = (0, _react().useMemo)(() => _react().default.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
+    const element = child;
+    return /*#__PURE__*/_react().default.cloneElement(element, {
+      index,
+      barScrollable
+    });
+  }), [barScrollable, children]);
+  const barStyle = (0, _react().useMemo)(() => [styles.barWrapper, {
+    height: tokens.sizing.barHeight,
+    backgroundColor: tokens.colors.barBackground,
+    paddingHorizontal: tokens.spacing.horizontal,
+    zIndex: mounted ? resolvedZIndex + 1 : undefined,
+    ...tokens.shadow
+  }, (0, _hairline.createHairlineBorderBottom)(tokens.colors.divider)], [mounted, resolvedZIndex, tokens.colors.barBackground, tokens.colors.divider, tokens.shadow, tokens.sizing.barHeight, tokens.spacing.horizontal]);
+  const handleBarLayout = (0, _react().useCallback)(event => {
+    const {
+      height,
+      width
+    } = event.nativeEvent.layout;
+    setBarHeight(height);
+    setBarWidth(width);
+    requestMeasure(height);
+  }, [requestMeasure]);
+  return /*#__PURE__*/_react().default.createElement(_DropdownMenuContext.DropdownMenuContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [styles.container, style]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    ref: barRef,
+    collapsable: false,
+    style: barStyle,
+    onLayout: handleBarLayout
+  }, barScrollable ? /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: styles.barScrollContent
+  }, barChildren) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.bar
+  }, barChildren)), mounted ? /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.portal,
+    pointerEvents: "box-none"
+  }, shouldRenderMask ? /*#__PURE__*/_react().default.createElement(AnimatedPressable, {
+    style: [styles.mask, insetStyle, {
+      backgroundColor: overlay ? tokens.colors.mask : 'transparent',
+      opacity: progress,
+      zIndex: resolvedZIndex
+    }],
+    testID: "rv-dropdown-mask",
+    pointerEvents: mounted ? 'auto' : 'none',
+    onPress: () => {
+      if (shouldCloseOnMask) {
+        closeMenu();
+      }
+    }
+  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [styles.panel, insetStyle, panelPositionStyle, panelRadiusStyle, panelAnimatedStyle, {
+      backgroundColor: tokens.colors.panelBackground,
+      maxHeight: tokens.sizing.panelMaxHeight,
+      zIndex: resolvedZIndex + 1
+    }],
+    pointerEvents: "box-none"
+  }, panel))) : null));
+});
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%'
+  },
+  barWrapper: {
+    flexDirection: 'row',
+    position: 'relative'
+  },
+  bar: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  barScrollContent: {
+    flexDirection: 'row'
+  },
+  portal: {
+    ..._reactNative().StyleSheet.absoluteFillObject
+  },
+  mask: {
+    ..._reactNative().StyleSheet.absoluteFillObject
+  },
+  panel: {
+    position: 'absolute',
+    overflow: 'hidden'
+  },
+  panelUp: {
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12
+  },
+  panelDown: {
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12
+  }
+});
+DropdownMenu.displayName = 'DropdownMenu';
+var _default = exports.default = DropdownMenu;

package/dist/cjs/dropdown-menu/DropdownMenuContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownMenuContext = exports.DropdownMenuContext = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+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 DropdownMenuContext = exports.DropdownMenuContext = /*#__PURE__*/_react().default.createContext(null);
+const useDropdownMenuContext = () => {
+  const ctx = (0, _react().useContext)(DropdownMenuContext);
+  if (!ctx) throw new Error('DropdownItem must be used within DropdownMenu');
+  return ctx;
+};
+exports.useDropdownMenuContext = useDropdownMenuContext;

package/dist/cjs/dropdown-menu/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropdownItem", {
+  enumerable: true,
+  get: function () {
+    return _DropdownItem.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useDropdownMenuTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.useDropdownMenuTokens;
+  }
+});
+var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = Object.assign(_DropdownMenu.default, {
+  Item: _DropdownItem.default
+});

package/dist/cjs/dropdown-menu/tokens.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownMenuTokens = void 0;
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography
+  } = foundations;
+  return {
+    colors: {
+      text: palette.default[900],
+      activeText: palette.danger[500],
+      placeholder: palette.default[500],
+      disabledText: palette.default[400],
+      arrow: palette.default[500],
+      panelBackground: '#ffffff',
+      mask: 'rgba(0,0,0,0.45)',
+      divider: palette.default[200],
+      barBackground: '#ffffff'
+    },
+    spacing: {
+      horizontal: spacing.md,
+      vertical: spacing.sm,
+      titlePadding: spacing.xs
+    },
+    sizing: {
+      barHeight: 48,
+      titleFontSize: 15,
+      titleLineHeight: fontSize.lg * typography.lineHeightMultiplier,
+      panelMaxHeight: 320
+    },
+    shadow: {
+      shadowColor: 'rgba(100, 101, 102, 0.12)',
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 1,
+      shadowRadius: 12,
+      elevation: 3
+    }
+  };
+};
+const useDropdownMenuTokens = exports.useDropdownMenuTokens = (0, _designSystem.createComponentTokensHook)('dropdownMenu', createTokens);

package/dist/cjs/empty/Empty.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Empty = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _image = _interopRequireDefault(require("../image"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const PRESET_ICONS = {
+  default: _reactNativeSystemIcon().Description,
+  error: _reactNativeSystemIcon().Fail,
+  network: _reactNativeSystemIcon().Fail,
+  search: _reactNativeSystemIcon().Search
+};
+const Empty = props => {
+  const {
+    tokensOverride,
+    image: imageProp,
+    imageSize,
+    imageStyle,
+    description,
+    descriptionStyle,
+    children,
+    style,
+    gap: gapProp,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useEmptyTokens)(tokensOverride);
+  const image = imageProp ?? tokens.defaults.image;
+  const gap = gapProp ?? tokens.defaults.gap;
+  const resolvedImageSize = imageSize ?? tokens.sizing.image;
+  const renderImage = () => {
+    if (/*#__PURE__*/_react().default.isValidElement(image)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [tokens.layout.imageWrapper, {
+          width: resolvedImageSize,
+          height: resolvedImageSize
+        }, imageStyle]
+      }, image);
+    }
+    if ((0, _utils.isString)(image)) {
+      if (/^https?:/.test(image)) {
+        return /*#__PURE__*/_react().default.createElement(_image.default, {
+          src: image,
+          width: resolvedImageSize,
+          height: resolvedImageSize,
+          fit: "contain",
+          showLoading: false,
+          showError: false,
+          containerStyle: [{
+            backgroundColor: tokens.colors.imageBackground
+          }, imageStyle]
+        });
+      }
+      const IconComponent = PRESET_ICONS[image] || PRESET_ICONS.default;
+      const iconSize = resolvedImageSize * tokens.sizing.iconScale;
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [tokens.layout.imageWrapper, {
+          width: resolvedImageSize,
+          height: resolvedImageSize
+        }, imageStyle]
+      }, /*#__PURE__*/_react().default.createElement(IconComponent, {
+        size: iconSize,
+        color: tokens.colors.icon
+      }));
+    }
+    return null;
+  };
+  const renderDescription = () => {
+    if (!(0, _utils.isRenderable)(description)) return null;
+    if ((0, _utils.isText)(description)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.descriptionText, {
+          marginTop: gap,
+          paddingHorizontal: tokens.spacing.descriptionPaddingHorizontal,
+          color: tokens.colors.description,
+          fontSize: tokens.typography.descriptionSize,
+          lineHeight: tokens.typography.descriptionLineHeight,
+          fontFamily: tokens.typography.descriptionFontFamily,
+          fontWeight: tokens.typography.descriptionFontWeight
+        }, descriptionStyle]
+      }, description);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: {
+        marginTop: gap,
+        paddingHorizontal: tokens.spacing.descriptionPaddingHorizontal
+      }
+    }, description);
+  };
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: [tokens.layout.container, style]
+  }, rest), renderImage(), renderDescription(), (0, _utils.isRenderable)(children) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      marginTop: tokens.spacing.footerMarginTop
+    }
+  }, (0, _utils.isText)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, null, children) : children));
+};
+exports.Empty = Empty;
+Empty.displayName = 'Empty';

package/dist/cjs/empty/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Empty = require("./Empty");
+var _default = exports.default = _Empty.Empty;

package/dist/cjs/empty/tokens.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmptyTokens = exports.createEmptyTokens = void 0;
+var _designSystem = require("../../design-system");
+const createEmptyTokens = foundations => {
+  const paddingVertical = foundations.spacing.xl;
+  const paddingHorizontal = 0;
+  const gap = foundations.spacing.lg;
+  return {
+    defaults: {
+      image: 'default',
+      gap
+    },
+    layout: {
+      container: {
+        width: '100%',
+        paddingVertical,
+        paddingHorizontal,
+        alignItems: 'center'
+      },
+      imageWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      descriptionText: {
+        textAlign: 'center'
+      },
+      footer: {}
+    },
+    colors: {
+      description: foundations.palette.default[500],
+      icon: foundations.palette.default[300],
+      imageBackground: 'transparent'
+    },
+    typography: {
+      descriptionSize: foundations.fontSize.sm,
+      descriptionLineHeight: 20,
+      descriptionFontFamily: foundations.typography.fontFamily,
+      descriptionFontWeight: foundations.typography.weight.regular
+    },
+    sizing: {
+      image: 160,
+      iconScale: 0.6
+    },
+    spacing: {
+      descriptionPaddingHorizontal: 60,
+      footerMarginTop: 24
+    }
+  };
+};
+exports.createEmptyTokens = createEmptyTokens;
+const useEmptyTokens = exports.useEmptyTokens = (0, _designSystem.createComponentTokensHook)('empty', createEmptyTokens);