agora-ui-foundation 1.0.0

package/lib/components/share-selection/index.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _index = require("./index");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/ShareSelectionWindow',
+  tags: ['autodocs'],
+  argTypes: {
+    currentShareType: {
+      control: {
+        type: 'text'
+      }
+    },
+    onChangeShareType: {
+      action: 'onChangeShareType'
+    },
+    cards: {
+      control: {
+        type: 'object'
+      }
+    },
+    applications: {
+      control: {
+        type: 'object'
+      }
+    },
+    shareWithAudio: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    isFluent: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    currentShareType: 'basic',
+    onChangeShareType: function onChangeShareType(type) {
+      console.log(type);
+    },
+    screens: [{
+      key: '1',
+      title: '屏幕',
+      content: '屏幕内容'
+    }, {
+      key: '2',
+      title: '窗口',
+      content: '窗口内容',
+      active: true
+    }, {
+      key: '3',
+      title: '白板',
+      content: '白板内容'
+    }, {
+      key: '4',
+      title: '文件',
+      content: '文件内容'
+    }, {
+      key: '5',
+      title: '视频',
+      content: '视频内容'
+    }],
+    applications: [{
+      key: '1',
+      title: '应用1',
+      content: '应用1内容'
+    }, {
+      key: '2',
+      title: '应用2',
+      content: '应用2内容'
+    }, {
+      key: '3',
+      title: '应用3',
+      content: '应用3内容'
+    }],
+    shareWithAudio: true,
+    isFluent: true
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: ["\u7070\u8272\u8FB9\u6846\u662F\u4E3A\u4E86\u65B9\u4FBF\u67E5\u770B\u7EC4\u4EF6\u7684\u8FB9\u754C", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          border: '1px solid #eee'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ShareSelectionWindow, _objectSpread({}, props))
+      })]
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/slider/index.css

@@ -0,0 +1,59 @@
+.fcr-slider {
+  position: relative;
+  height: 5px;
+  border-radius: var(--fcr_cornerradius_round);
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  transition: background 0.2s ease;
+}
+.fcr-slider.is-active {
+  background: var(--fcr_web_ui_scene_fill5);
+}
+
+.fcr-slider__track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-slider__thumb {
+  position: relative;
+  top: -4.5px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--fcr_ui_scene_white10);
+  cursor: pointer;
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
+  backdrop-filter: blur(25px);
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease;
+  transform-origin: center;
+  user-select: none;
+}
+.fcr-slider__thumb:hover {
+  transform: scale(1.2);
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-slider.is-active .fcr-slider__thumb {
+  transform: scale(1.2);
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+
+.fcr-slider.is-disabled{
+  cursor: not-allowed;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  color: var(--fcr_ui_scene_text1);
+  opacity: 0.5;
+}
+
+.fcr-slider.is-disabled .fcr-slider__thumb{
+  cursor: not-allowed;
+
+}

package/lib/components/slider/index.d.ts

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import './index.css';
+type SliderProps = {
+    /**
+     * 设置初始取值。
+     */
+    /** @en
+     * default value
+     */
+    defaultValue?: number;
+    /**
+     * 设置当前取值
+     */
+    /** @en
+     * current value
+     */
+    value?: number;
+    /**
+     * 最小值
+     */
+    /** @en
+     * min
+     */
+    min?: number;
+    /**
+     * 最大值
+     */
+    /** @en
+     * max
+     */
+    max?: number;
+    /**
+     * 步长，取值必须大于 0，并且可被 (max - min) 整除。
+     */
+    /** @en
+     * The step size, which must be greater than 0 and divisible by (max - min).
+     */
+    step?: number;
+    /**
+     * 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入
+     */
+    /** @en
+     * When the value of the Slider changes, the onChange event is triggered and the changed value is passed as a parameter to the
+     */
+    onChange?: (val: number) => any;
+    draggableDom?: HTMLDivElement | Document;
+    disabled?: boolean;
+};
+export declare const FcrSlider: FC<SliderProps>;
+export {};

package/lib/components/slider/index.js

@@ -0,0 +1,167 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrSlider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.epsilon.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _useNamespace = require("../../utilities/use-namespace");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var isMultiple = function isMultiple(a, b) {
+  if (b === 0) {
+    throw new Error('The divisor cannot be 0');
+  }
+  var absA = Math.abs(a);
+  var absB = Math.abs(b);
+  var quotient = absA / absB;
+  return Math.abs(quotient - Math.round(quotient)) < Number.EPSILON;
+};
+var FcrSlider = exports.FcrSlider = function FcrSlider(_ref) {
+  var value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    onChange = _ref.onChange,
+    draggableDom = _ref.draggableDom,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  if (step <= 0) {
+    throw new Error('Step must be greater than 0!');
+  }
+  if (!isMultiple(max - min, step) || !isMultiple(defaultValue - min, step)) {
+    throw new Error('Step must be divisible by max or defaultValue!');
+  }
+  draggableDom = draggableDom || document;
+  var ns = (0, _useNamespace.useNamespace)('slider');
+  var sliderRef = (0, _react.useRef)(null);
+  var thumbRef = (0, _react.useRef)(null);
+  var diff = (0, _react.useRef)(0);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+
+  // 获取 step 的小数位数，以处理计算过程中的小数精度问题
+  var stepDecimalPlaces = (0, _react.useMemo)(function () {
+    return (step.toString().split('.')[1] || []).length;
+  }, [step]);
+  var getValueByPercentage = (0, _react.useCallback)(function (percentage) {
+    // 将所有数转为整数，避免计算精度问题
+    var power = Math.pow(10, stepDecimalPlaces);
+    var intMin = min * power;
+    var intMax = max * power;
+    var intStep = step * power;
+    var initialValue = intMin + (intMax - intMin) * percentage / 100;
+    return (intMin + Math.round((initialValue - intMin) / intStep) * intStep) / power;
+  }, [max, min, step, stepDecimalPlaces]);
+  var getWidthPercentByValue = (0, _react.useCallback)(function (value) {
+    var _value = Math.max(Math.min(value, max), min);
+    return Number((Math.round((_value - min) / step) * step * 100 / (max - min)).toFixed(2));
+  }, [max, min, step]);
+  var handleMouseDown = function handleMouseDown(event) {
+    diff.current = event.clientX - thumbRef.current.getBoundingClientRect().left;
+    setIsActive(true);
+    draggableDom.addEventListener('mousemove', handleMouseMove);
+    draggableDom.addEventListener('mouseup', handleMouseUp);
+    draggableDom.addEventListener('mouseleave', handleMouseLeave);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    cleanupListeners();
+  };
+  var cleanupListeners = function cleanupListeners() {
+    setIsActive(false);
+    draggableDom.removeEventListener('mousemove', handleMouseMove);
+    draggableDom.removeEventListener('mouseup', handleMouseUp);
+    draggableDom.removeEventListener('mouseleave', handleMouseLeave);
+  };
+  var handleMouseMove = (0, _react.useCallback)(function (event) {
+    if (!sliderRef.current) {
+      return;
+    }
+
+    // 检查鼠标是否在 draggableDom 内
+    if (draggableDom instanceof HTMLElement) {
+      var rect = draggableDom.getBoundingClientRect();
+      var isInDraggableDom = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+      if (!isInDraggableDom) {
+        handleMouseLeave();
+        return;
+      }
+    }
+    var newX = event.clientX - diff.current - sliderRef.current.getBoundingClientRect().left;
+    var end = sliderRef.current.offsetWidth - thumbRef.current.offsetWidth;
+    var start = 0;
+    if (newX < start) {
+      newX = 0;
+    } else if (newX > end) {
+      newX = end;
+    }
+    var newPercentage = newX * 100 / end;
+    var newValue = getValueByPercentage(newPercentage);
+    if (value === undefined) {
+      setWidthPercent(getWidthPercentByValue(newValue));
+    }
+    onChange && onChange(newValue);
+  }, [isActive]);
+  var handleMouseUp = function handleMouseUp() {
+    cleanupListeners();
+  };
+  var _useState3 = (0, _react.useState)(getWidthPercentByValue(defaultValue)),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    widthPercent = _useState4[0],
+    setWidthPercent = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (value !== undefined) {
+      setWidthPercent(getWidthPercentByValue(value));
+    }
+  }, [getWidthPercentByValue, value]);
+  (0, _react.useEffect)(function () {
+    var _thumbRef$current;
+    if (disabled) {
+      return;
+    }
+    if (!thumbRef.current) return;
+    (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 || _thumbRef$current.addEventListener('mousedown', handleMouseDown);
+    return function () {
+      var _thumbRef$current2;
+      setIsActive(false);
+      (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 || _thumbRef$current2.removeEventListener('mousedown', handleMouseDown);
+      draggableDom.removeEventListener('mousemove', handleMouseMove);
+      draggableDom.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [getValueByPercentage, getWidthPercentByValue, draggableDom, disabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(ns.b(), ns.is('disabled', disabled), ns.is('active', isActive)),
+    ref: sliderRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('track'),
+      style: {
+        width: "".concat(widthPercent, "%")
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('thumb'),
+      ref: thumbRef,
+      style: {
+        left: "calc(".concat(widthPercent, "% - 7px)")
+      }
+    })]
+  });
+};

package/lib/components/slider/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FcrSlider } from '.';
+declare const meta: Meta<typeof FcrSlider>;
+type SwitchStory = StoryObj<typeof FcrSlider>;
+export declare const Basic: SwitchStory;
+export default meta;

package/lib/components/slider/index.stories.js

@@ -0,0 +1,158 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ = require(".");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/FcrSlider',
+  tags: ['autodocs'],
+  args: {}
+};
+var Basic = exports.Basic = {
+  render: function render(props) {
+    var _useState = (0, _react.useState)(10),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    var _useState3 = (0, _react.useState)(10),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      value1 = _useState4[0];
+    var _useState5 = (0, _react.useState)(10),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      value2 = _useState6[0],
+      setValue2 = _useState6[1];
+    var _useState7 = (0, _react.useState)(555),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      value3 = _useState8[0],
+      setValue3 = _useState8[1];
+    var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      value4 = _useState10[0],
+      setValue4 = _useState10[1];
+    var _useState11 = (0, _react.useState)(-0.5),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      min = _useState12[0],
+      setMin = _useState12[1];
+    (0, _react.useEffect)(function () {
+      var timer = setInterval(function () {
+        setMin(Math.random() > 0.5 ? -0.5 : -1);
+      }, 1000);
+      return function () {
+        clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "\u7981\u7528"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          defaultValue: 40,
+          onChange: function onChange(v) {
+            return setValue(v);
+          },
+          disabled: true
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+        children: ["\u53EA\u8BBE\u7F6E\u9ED8\u8BA4\u503C\uFF0C\u975E\u53EF\u63A7\u7EC4\u4EF6\uFF0C\u901A\u8FC7 onChange \u83B7\u53D6\u503C\u3002value:", value]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          defaultValue: 10,
+          onChange: function onChange(v) {
+            return setValue(v);
+          }
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+        children: ["\u8BBE\u7F6E value\uFF0C\u8F6C\u4E3A\u53EF\u63A7\u7EC4\u4EF6\uFF0ConChange \u4E0D\u66F4\u6539 value \u65F6\u4E0D\u53EF\u62D6\u52A8\u3002value:", value1]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          value: value1
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+        children: ["\u8BBE\u7F6E value\uFF0C\u8F6C\u4E3A\u53EF\u63A7\u7EC4\u4EF6\uFF0C\u53EF\u4EA4\u4E92\u3002value:", value2]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          value: value2,
+          onChange: function onChange(v) {
+            return setValue2(v);
+          }
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+        children: ["\u8BBE\u7F6E step: 5 \u548C min: 500 \u548C max: 1000 value:", value3]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          value: value3,
+          min: 500,
+          max: 1000,
+          step: 5,
+          onChange: function onChange(v) {
+            return setValue3(v);
+          }
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+        children: ["\u8BBE\u7F6E step: 0.01 \u548C min: -0.5 \u548C max: 0.5 value:", value4]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginTop: 16,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSlider, _objectSpread(_objectSpread({}, props), {}, {
+          value: value4,
+          min: min,
+          max: 0.5,
+          step: 0.01,
+          onChange: function onChange(v) {
+            return setValue4(v);
+          }
+        }))
+      })]
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/state-bar/assets/fcr_grid_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_grid_big" fill-rule="evenodd" clip-rule="evenodd" d="M2.72 0C1.21779 0 0 1.21523 0 2.71429V9.21213C0 9.84809 0.516635 10.3636 1.15394 10.3636H14.2797C14.917 10.3636 15.4336 9.84809 15.4336 9.21213V1.15152C15.4336 0.515551 14.917 0 14.2797 0H2.72ZM18.7373 0C18.1 0 17.5833 0.51555 17.5833 1.15152V9.21213C17.5833 9.84809 18.1 10.3636 18.7373 10.3636H31.863C32.5003 10.3636 33.0169 9.84809 33.0169 9.21213V1.15152C33.0169 0.515551 32.5003 0 31.863 0H18.7373ZM52.5664 1.15152C52.5664 0.51555 53.083 0 53.7203 0H65.28C66.7822 0 68 1.21523 68 2.71429V9.21213C68 9.84809 67.4834 10.3636 66.8461 10.3636H53.7203C53.083 10.3636 52.5664 9.84809 52.5664 9.21213V1.15152ZM36.2291 0C35.5918 0 35.0752 0.51555 35.0752 1.15152V9.21213C35.0752 9.84809 35.5918 10.3636 36.2291 10.3636H49.3549C49.9922 10.3636 50.5088 9.84809 50.5088 9.21213V1.15152C50.5088 0.515551 49.9922 0 49.3549 0H36.2291ZM17.5833 27.6364C17.5833 27.0004 18.1 26.4848 18.7373 26.4848H31.863C32.5003 26.4848 33.0169 27.0004 33.0169 27.6364V36.8485C33.0169 37.4845 32.5003 38 31.863 38H18.7373C18.1 38 17.5833 37.4845 17.5833 36.8485V27.6364ZM1.15394 26.4848C0.516636 26.4848 0 27.0004 0 27.6364V35.2857C0 36.7848 1.21778 38 2.72 38H14.2797C14.917 38 15.4336 37.4845 15.4336 36.8485V27.6364C15.4336 27.0004 14.917 26.4848 14.2797 26.4848H1.15394ZM52.5664 27.6364C52.5664 27.0004 53.083 26.4848 53.7203 26.4848H66.8461C67.4834 26.4848 68 27.0004 68 27.6364V35.2857C68 36.7848 66.7822 38 65.28 38H53.7203C53.083 38 52.5664 37.4845 52.5664 36.8485V27.6364ZM36.2291 26.4848C35.5918 26.4848 35.0752 27.0004 35.0752 27.6364V36.8485C35.0752 37.4845 35.5918 38 36.2291 38H49.3549C49.9922 38 50.5088 37.4845 50.5088 36.8485V27.6364C50.5088 27.0004 49.9922 26.4848 49.3549 26.4848H36.2291ZM17.5833 13.8184C17.5833 13.1824 18.1 12.6669 18.7373 12.6669H31.863C32.5003 12.6669 33.0169 13.1824 33.0169 13.8184V23.0305C33.0169 23.6665 32.5003 24.1821 31.863 24.1821H18.7373C18.1 24.1821 17.5833 23.6665 17.5833 23.0305V13.8184ZM1.15394 12.6669C0.516636 12.6669 0 13.1824 0 13.8184V23.0305C0 23.6665 0.516635 24.1821 1.15394 24.1821H14.2797C14.917 24.1821 15.4336 23.6665 15.4336 23.0305V13.8184C15.4336 13.1824 14.917 12.6669 14.2797 12.6669H1.15394ZM52.5664 13.8184C52.5664 13.1824 53.083 12.6669 53.7203 12.6669H66.8461C67.4834 12.6669 68 13.1824 68 13.8184V23.0305C68 23.6665 67.4834 24.1821 66.8461 24.1821H53.7203C53.083 24.1821 52.5664 23.6665 52.5664 23.0305V13.8184ZM36.2291 12.6669C35.5918 12.6669 35.0752 13.1824 35.0752 13.8184V23.0305C35.0752 23.6665 35.5918 24.1821 36.2291 24.1821H49.3549C49.9922 24.1821 50.5088 23.6665 50.5088 23.0305V13.8184C50.5088 13.1824 49.9922 12.6669 49.3549 12.6669H36.2291Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>

package/lib/components/state-bar/assets/fcr_listontop_big.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="fcr_listontop_big" fill-rule="evenodd" clip-rule="evenodd" d="M4.08 0C1.82668 0 0 1.82284 0 4.07143V6.84848C0 7.48445 0.516634 8 1.15394 8H11.3724C12.0097 8 12.5263 7.48445 12.5263 6.84848V1.15152C12.5263 0.515551 12.0097 0 11.3724 0H4.08ZM2.72 10C1.21779 10 0 11.2152 0 12.7143V33.9286C0 36.1772 1.82668 38 4.08 38H63.92C66.1733 38 68 36.1772 68 33.9286V12.7143C68 11.2152 66.7822 10 65.28 10H2.72ZM28.0352 1.15152C28.0352 0.515553 28.5518 0 29.1891 0H39.4076C40.0449 0 40.5615 0.515551 40.5615 1.15152V6.84848C40.5615 7.48445 40.0449 8 39.4076 8H29.1891C28.5518 8 28.0352 7.48445 28.0352 6.84848V1.15152ZM57.224 0C56.5867 0 56.07 0.515553 56.07 1.15152V6.84848C56.07 7.48445 56.5867 8 57.224 8H66.8459C67.4832 8 67.9998 7.48445 67.9998 6.84848V4.07143C67.9998 1.82284 66.1732 0 63.9198 0H57.224ZM14.3159 1.15152C14.3159 0.515553 14.8325 0 15.4699 0H25.0918C25.7291 0 26.2457 0.515551 26.2457 1.15152V6.84848C26.2457 7.48445 25.7291 8 25.0918 8H15.4699C14.8325 8 14.3159 7.48445 14.3159 6.84848V1.15152ZM43.5047 0C42.8674 0 42.3508 0.515553 42.3508 1.15152V6.84848C42.3508 7.48445 42.8674 8 43.5047 8H53.1266C53.7639 8 54.2806 7.48445 54.2806 6.84848V1.15152C54.2806 0.515551 53.7639 0 53.1266 0H43.5047Z" fill="#E5EAF3" fillOpacity="0.9"/>
+</svg>

package/lib/components/state-bar/assets/step-gradient.svg

@@ -0,0 +1,10 @@
+<svg width="2" height="24" viewBox="0 0 2 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 405" d="M1 22.9023L0.999999 0.171766" stroke="url(#paint0_linear_22246_74534)" stroke-width="0.349701" strokeLinecap ="round"/>
+<defs>
+<linearGradient id="paint0_linear_22246_74534" x1="1" y1="22.9023" x2="0.999999" y2="0.171766" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="0.526042" stop-color="#282828"/>
+<stop offset="0.979167" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>