react-native-system-ui 0.0.2 → 0.0.3

package/dist/cjs/platform/scrollLock.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setBodyScrollLocked = exports.isBodyScrollLocked = void 0;
+let locked = false;
+let previousOverflow = '';
+const setBodyScrollLocked = nextLocked => {
+  if (typeof document === 'undefined') return;
+  if (nextLocked && !locked) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    locked = true;
+    return;
+  }
+  if (!nextLocked && locked) {
+    document.body.style.overflow = previousOverflow;
+    locked = false;
+  }
+};
+exports.setBodyScrollLocked = setBodyScrollLocked;
+const isBodyScrollLocked = () => locked;
+exports.isBodyScrollLocked = isBodyScrollLocked;

package/dist/cjs/utils/array.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toArray = void 0;
+const toArray = value => {
+  if (value === undefined || value === null) return [];
+  if (Array.isArray(value)) return value;
+  return [value];
+};
+exports.toArray = toArray;

package/dist/cjs/utils/color.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withAlpha = exports.hexToRgb = exports.extractFirstColorToken = exports.ensureRgba = void 0;
+var _number = require("./number");
+const hexRegex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const hexToRgb = input => {
+  if (!hexRegex.test(input)) return null;
+  const normalized = input.length === 4 ? `#${input[1]}${input[1]}${input[2]}${input[2]}${input[3]}${input[3]}` : input;
+  const intVal = parseInt(normalized.slice(1), 16);
+  const r = intVal >> 16 & 255;
+  const g = intVal >> 8 & 255;
+  const b = intVal & 255;
+  return [r, g, b];
+};
+exports.hexToRgb = hexToRgb;
+const parseRgbChannels = input => {
+  const match = input.match(/^rgba?\(([^)]*)\)$/i);
+  if (!match) return null;
+  const parts = match[1].split(',').map(part => part.trim()).slice(0, 3);
+  const numeric = parts.map(value => Number(value));
+  if (!numeric.every(channel => Number.isFinite(channel))) return null;
+  return [numeric[0], numeric[1], numeric[2]];
+};
+const withAlpha = (color, alpha) => {
+  const clamped = (0, _number.clamp01)(alpha);
+  const trimmed = color?.trim?.() ?? '';
+  if (!trimmed) return color;
+  if (trimmed.startsWith('#')) {
+    const rgb = hexToRgb(trimmed);
+    return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamped})` : color;
+  }
+  const rgb = parseRgbChannels(trimmed);
+  if (rgb) return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamped})`;
+  return trimmed;
+};
+exports.withAlpha = withAlpha;
+const ensureRgba = (color, alpha) => {
+  const trimmed = color.trim().toLowerCase();
+  if (trimmed.startsWith('rgba')) return color;
+  return withAlpha(color, alpha);
+};
+exports.ensureRgba = ensureRgba;
+const gradientColorRegex = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
+const extractFirstColorToken = input => {
+  if (!input) return undefined;
+  const match = input.match(gradientColorRegex);
+  return match ? match[0] : undefined;
+};
+exports.extractFirstColorToken = extractFirstColorToken;

package/dist/cjs/utils/createPlatformShadow.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.createPlatformShadow = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+const hexToRgba = (hex, alpha) => {
+  const normalized = hex.replace('#', '');
+  const expand = normalized.length === 3 ? normalized.split('').map(char => char + char).join('') : normalized;
+  if (expand.length < 6) {
+    return hex;
+  }
+  const bigint = parseInt(expand.slice(0, 6), 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  const clampedAlpha = Math.max(0, Math.min(1, alpha));
+  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
+};
+const ensureRgbaColor = (color, alpha) => {
+  const trimmed = color.trim().toLowerCase();
+  if (trimmed.startsWith('#')) {
+    return hexToRgba(trimmed, alpha);
+  }
+  if (trimmed.startsWith('rgba')) {
+    return color;
+  }
+  if (trimmed.startsWith('rgb(')) {
+    return color.replace(/rgb\(([^)]*)\)/i, (_, inner) => `rgba(${inner}, ${alpha})`);
+  }
+  return color;
+};
+const createPlatformShadow = config => {
+  const nativeShadow = {
+    shadowColor: config.color,
+    shadowOpacity: config.opacity,
+    shadowRadius: config.radius,
+    shadowOffset: {
+      width: config.offsetX ?? 0,
+      height: config.offsetY
+    },
+    ...(config.elevation !== undefined ? {
+      elevation: config.elevation
+    } : null)
+  };
+  if (_reactNative().Platform.OS !== 'web') {
+    return nativeShadow;
+  }
+  const blur = Math.max(config.radius * 1.5, config.radius);
+  const boxShadowColor = ensureRgbaColor(config.color, config.opacity);
+  return {
+    boxShadow: `${config.offsetX ?? 0}px ${config.offsetY}px ${blur}px ${boxShadowColor}`
+  };
+};
+exports.createPlatformShadow = createPlatformShadow;
+var _default = exports.default = createPlatformShadow;

package/dist/cjs/utils/date.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.times = exports.padZero = exports.isValidDate = exports.getTrueValue = exports.getMonthEndDay = exports.formatDuration = void 0;
+const padZero = (value, length = 2) => {
+  const str = String(value);
+  return str.length >= length ? str : `${'0'.repeat(length - str.length)}${str}`;
+};
+exports.padZero = padZero;
+const times = (count, iteratee) => {
+  return Array.from({
+    length: count
+  }, (_, index) => iteratee(index));
+};
+exports.times = times;
+const getTrueValue = value => {
+  if (!value) return 0;
+  const parsed = parseInt(value, 10);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+exports.getTrueValue = getTrueValue;
+const getMonthEndDay = (year, month) => {
+  return 32 - new Date(year, month - 1, 32).getDate();
+};
+exports.getMonthEndDay = getMonthEndDay;
+const isValidDate = value => {
+  return value instanceof Date && !Number.isNaN(value.getTime());
+};
+exports.isValidDate = isValidDate;
+const formatDuration = (format, currentTime) => {
+  const {
+    days
+  } = currentTime;
+  let {
+    hours,
+    minutes,
+    seconds,
+    milliseconds
+  } = currentTime;
+  let template = format;
+  if (template.includes('DD')) {
+    template = template.replace('DD', padZero(days));
+  } else {
+    hours += days * 24;
+  }
+  if (template.includes('HH')) {
+    template = template.replace('HH', padZero(hours));
+  } else {
+    minutes += hours * 60;
+  }
+  if (template.includes('mm')) {
+    template = template.replace('mm', padZero(minutes));
+  } else {
+    seconds += minutes * 60;
+  }
+  if (template.includes('ss')) {
+    template = template.replace('ss', padZero(seconds));
+  } else {
+    milliseconds += seconds * 1000;
+  }
+  if (template.includes('S')) {
+    const ms = padZero(milliseconds, 3);
+    if (template.includes('SSS')) {
+      template = template.replace('SSS', ms);
+    } else if (template.includes('SS')) {
+      template = template.replace('SS', ms.slice(0, 2));
+    } else {
+      template = template.replace('S', ms.charAt(0));
+    }
+  }
+  return template;
+};
+exports.formatDuration = formatDuration;

package/dist/cjs/utils/deepMerge.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepMerge = deepMerge;
+const isPlainObject = value => {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+function deepMerge(target, source) {
+  if (!source) {
+    return target;
+  }
+  if (!Array.isArray(target) && !isPlainObject(target)) {
+    return source;
+  }
+  const output = Array.isArray(target) ? [...target] : {
+    ...target
+  };
+  Object.keys(source).forEach(key => {
+    const sourceValue = source[key];
+    if (sourceValue === undefined) {
+      return;
+    }
+    const targetValue = target[key];
+    if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+      ;
+      output[key] = deepMerge(targetValue, sourceValue);
+      return;
+    }
+    ;
+    output[key] = Array.isArray(sourceValue) ? [...sourceValue] : isPlainObject(sourceValue) ? {
+      ...sourceValue
+    } : sourceValue;
+  });
+  return output;
+}

package/dist/cjs/utils/hairline.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHairlineWidth = exports.createHairlineView = exports.createHairlineBorderTop = exports.createHairlineBorderRight = exports.createHairlineBorderLeft = exports.createHairlineBorderBottom = exports.createHairlineBorder = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+const getHairlineWidth = () => _reactNative().Platform.OS === 'web' ? 1 : _reactNative().StyleSheet.hairlineWidth;
+exports.getHairlineWidth = getHairlineWidth;
+const createHairlineBorder = ({
+  color,
+  position = 'all',
+  enabled = true
+} = {}) => {
+  if (!enabled) return {};
+  const width = getHairlineWidth();
+  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
+  return {
+    [`${key}Width`]: width,
+    ...(color && {
+      [`${key}Color`]: color
+    })
+  };
+};
+exports.createHairlineBorder = createHairlineBorder;
+const createHairlineBorderTop = color => createHairlineBorder({
+  color,
+  position: 'top'
+});
+exports.createHairlineBorderTop = createHairlineBorderTop;
+const createHairlineBorderRight = color => createHairlineBorder({
+  color,
+  position: 'right'
+});
+exports.createHairlineBorderRight = createHairlineBorderRight;
+const createHairlineBorderBottom = color => createHairlineBorder({
+  color,
+  position: 'bottom'
+});
+exports.createHairlineBorderBottom = createHairlineBorderBottom;
+const createHairlineBorderLeft = color => createHairlineBorder({
+  color,
+  position: 'left'
+});
+exports.createHairlineBorderLeft = createHairlineBorderLeft;
+const createHairlineView = ({
+  left,
+  right,
+  top,
+  bottom,
+  width,
+  color,
+  position = 'bottom'
+} = {}) => {
+  const isWeb = _reactNative().Platform.OS === 'web';
+  const borderWidth = width ?? (isWeb ? 1 : _reactNative().StyleSheet.hairlineWidth);
+  const style = {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left,
+    right,
+    top,
+    bottom
+  };
+  if (position !== 'all') {
+    const s = style;
+    if (s[position] === undefined) s[position] = 0;
+  }
+  const key = position === 'all' ? 'border' : `border${position[0].toUpperCase()}${position.slice(1)}`;
+  const mutableStyle = style;
+  mutableStyle[`${key}Width`] = borderWidth;
+  if (color) mutableStyle[`${key}Color`] = color;
+  if (isWeb && (!width || width === 1 || width === _reactNative().StyleSheet.hairlineWidth)) {
+    const scales = {
+      top: {
+        scaleY: 0.5
+      },
+      bottom: {
+        scaleY: 0.5
+      },
+      left: {
+        scaleX: 0.5
+      },
+      right: {
+        scaleX: 0.5
+      },
+      all: {
+        scale: 0.5
+      }
+    };
+    if (scales[position]) {
+      style.transform = [scales[position]];
+    }
+  }
+  return style;
+};
+exports.createHairlineView = createHairlineView;

package/dist/cjs/utils/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _array = require("./array");
+Object.keys(_array).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _array[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _array[key];
+    }
+  });
+});
+var _color = require("./color");
+Object.keys(_color).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _color[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _color[key];
+    }
+  });
+});
+var _createPlatformShadow = require("./createPlatformShadow");
+Object.keys(_createPlatformShadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _createPlatformShadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createPlatformShadow[key];
+    }
+  });
+});
+var _date = require("./date");
+Object.keys(_date).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _date[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _date[key];
+    }
+  });
+});
+var _deepMerge = require("./deepMerge");
+Object.keys(_deepMerge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _deepMerge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _deepMerge[key];
+    }
+  });
+});
+var _hairline = require("./hairline");
+Object.keys(_hairline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hairline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hairline[key];
+    }
+  });
+});
+var _number = require("./number");
+Object.keys(_number).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _number[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _number[key];
+    }
+  });
+});
+var _promise = require("./promise");
+Object.keys(_promise).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _promise[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _promise[key];
+    }
+  });
+});
+var _string = require("./string");
+Object.keys(_string).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _string[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _string[key];
+    }
+  });
+});
+var _validate = require("./validate");
+Object.keys(_validate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _validate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _validate[key];
+    }
+  });
+});

package/dist/cjs/utils/number.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parsePercentage = exports.parseNumberLike = exports.parseNumber = exports.parseDecimalLength = exports.numberToString = exports.isNumericLike = exports.formatNumber = exports.clampValue = exports.clamp01 = exports.clamp = exports.addNumber = void 0;
+var _validate = require("./validate");
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+exports.clamp = clamp;
+const clamp01 = value => clamp(value, 0, 1);
+exports.clamp01 = clamp01;
+const parseNumberLike = (value, fallback) => {
+  if ((0, _validate.isFiniteNumber)(value)) return value;
+  if ((0, _validate.isString)(value)) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+exports.parseNumberLike = parseNumberLike;
+const parseNumber = (value, fallback = 0) => parseNumberLike(value, fallback) ?? fallback;
+exports.parseNumber = parseNumber;
+const parsePercentage = percentage => {
+  if ((0, _validate.isNumber)(percentage)) return percentage;
+  if ((0, _validate.isString)(percentage)) {
+    const normalized = percentage.trim().replace('%', '');
+    const parsed = Number(normalized);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+exports.parsePercentage = parsePercentage;
+const isNumericLike = value => (0, _validate.isNumber)(value) || (0, _validate.isString)(value) && value.trim() !== '' && !Number.isNaN(Number(value));
+exports.isNumericLike = isNumericLike;
+const addNumber = (num1, num2) => {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+};
+exports.addNumber = addNumber;
+const formatNumber = (value, integer, decimalLength) => {
+  let next = value;
+  if (integer) next = Math.trunc(next);
+  if (decimalLength !== undefined) {
+    const factor = 10 ** decimalLength;
+    next = Math.round(next * factor) / factor;
+  }
+  return next;
+};
+exports.formatNumber = formatNumber;
+const numberToString = (value, decimalLength) => {
+  if (value === null || value === undefined || !Number.isFinite(value)) return '';
+  if (decimalLength !== undefined) return value.toFixed(decimalLength);
+  return String(value);
+};
+exports.numberToString = numberToString;
+const parseDecimalLength = value => {
+  if (value === undefined) return undefined;
+  const parsed = (0, _validate.isNumber)(value) ? value : Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed)) return undefined;
+  return Math.max(0, Math.floor(parsed));
+};
+exports.parseDecimalLength = parseDecimalLength;
+const clampValue = (value, min, max) => {
+  let next = value;
+  if ((0, _validate.isFiniteNumber)(min)) {
+    next = Math.max(next, min);
+  }
+  if ((0, _validate.isFiniteNumber)(max)) {
+    next = Math.min(next, max);
+  }
+  return next;
+};
+exports.clampValue = clampValue;

package/dist/cjs/utils/promise.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPromiseLike = void 0;
+var _validate = require("./validate");
+const isPromiseLike = value => (0, _validate.isObject)(value) && (0, _validate.isFunction)(value.then);
+exports.isPromiseLike = isPromiseLike;

package/dist/cjs/utils/string.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.trimExtraChar = exports.formatNumberInput = exports.ensureSpace = void 0;
+var _validate = require("./validate");
+const ensureSpace = (value, autoInsertSpace) => {
+  if (!autoInsertSpace) {
+    return value;
+  }
+  return (0, _validate.isTwoCNChar)(value) ? value.split('').join(' ') : value;
+};
+exports.ensureSpace = ensureSpace;
+const trimExtraChar = (value, char, regExp) => {
+  const index = value.indexOf(char);
+  if (index === -1) return value;
+  if (char === '-' && index !== 0) {
+    return value.slice(0, index);
+  }
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+};
+exports.trimExtraChar = trimExtraChar;
+const formatNumberInput = (value, allowDot = true, allowMinus = true) => {
+  let next = value;
+  if (allowDot) {
+    next = trimExtraChar(next, '.', /\./g);
+  } else {
+    next = next.split('.')[0];
+  }
+  if (allowMinus) {
+    next = trimExtraChar(next, '-', /-/g);
+  } else {
+    next = next.replace(/-/g, '');
+  }
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return next.replace(regExp, '');
+};
+exports.formatNumberInput = formatNumberInput;

package/dist/cjs/utils/validate.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidNode = exports.isUndefined = exports.isTwoCNChar = exports.isText = exports.isString = exports.isRenderable = exports.isPlainObject = exports.isObject = exports.isNumber = exports.isImageUrlString = exports.isFunction = exports.isFiniteNumber = exports.isDef = exports.isBoolean = void 0;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+const isDef = val => val !== undefined && val !== null;
+exports.isDef = isDef;
+const isRenderable = node => node != null && typeof node !== 'boolean';
+exports.isRenderable = isRenderable;
+const isText = node => typeof node === 'string' || typeof node === 'number';
+exports.isText = isText;
+const isNumber = val => typeof val === 'number' && !Number.isNaN(val);
+exports.isNumber = isNumber;
+const isFiniteNumber = val => isNumber(val) && Number.isFinite(val);
+exports.isFiniteNumber = isFiniteNumber;
+const isString = val => typeof val === 'string';
+exports.isString = isString;
+const isBoolean = val => typeof val === 'boolean';
+exports.isBoolean = isBoolean;
+const isFunction = val => typeof val === 'function';
+exports.isFunction = isFunction;
+const isUndefined = val => typeof val === 'undefined';
+exports.isUndefined = isUndefined;
+const isObject = val => val !== null && typeof val === 'object';
+exports.isObject = isObject;
+const isValidNode = node => isRenderable(node) && (typeof node !== 'string' || node.length > 0);
+exports.isValidNode = isValidNode;
+const isPlainObject = val => !!val && typeof val === 'object' && !Array.isArray(val) && ! /*#__PURE__*/(0, _react().isValidElement)(val);
+exports.isPlainObject = isPlainObject;
+const isTwoCNChar = value => /^(?:[\u4e00-\u9fa5]){2}$/.test(value);
+exports.isTwoCNChar = isTwoCNChar;
+const isImageUrlString = url => /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i.test(url);
+exports.isImageUrlString = isImageUrlString;

package/dist/es/{index-bar → components/index-bar}/IndexBar.js

@@ -1,8 +1,9 @@
 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); }
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { isFiniteNumber, isUndefined } from '../../utils/validate';
+import { SafeAreaView } from '../safe-area-view';
 import { useIndexBarTokens } from './tokens';
 const IndexBarBase = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {