@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Dialog/index.js.flow

@@ -0,0 +1,2 @@
+//@flow strict
+export * from './Dialog';

package/lib/components/Disclaimer/Disclaimer.js

@@ -15,7 +15,6 @@ const Disclaimer = exports.Disclaimer = /*#__PURE__*/React.forwardRef((_ref, ref
   let {
     classNames,
     leftIconName = 'info-circle',
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
     leftIconType = _Icon.ICON_TYPE.regular,
     ...restProps
   } = _ref;

package/lib/components/Disclaimer/Disclaimer.js.flow

@@ -0,0 +1,41 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {BannerProps} from '../Banner';
+import {Banner} from '../Banner';
+import {ICON_TYPE} from '../Icon';
+
+import css from './Disclaimer.module.css';
+
+
+export type DisclaimerProps = {
+  ...BannerProps,
+};
+
+export const Disclaimer: React$AbstractComponent<
+  DisclaimerProps,
+  HTMLDivElement,
+> = React.forwardRef<DisclaimerProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      leftIconName = 'info-circle',
+      leftIconType = ICON_TYPE.regular,
+      ...restProps
+    }: DisclaimerProps,
+    ref,
+  ) => (
+    <Banner
+      ref={ref}
+      {...restProps}
+      leftIconName={leftIconName}
+      leftIconType={leftIconType}
+      classNames={{
+        ...classNames,
+        wrapper: css.disclaimerWrapper,
+        icon: css.iconWrapper,
+      }}
+    ></Banner>
+  ),
+);

package/lib/components/Disclaimer/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Disclaimer';

package/lib/components/Dropdown/Dropdown.js

@@ -33,7 +33,6 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     elevation = 'modal',
     ...inputProps
   } = _ref;
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const menuRef = React.useRef();
   const {
     x,
@@ -48,12 +47,10 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     if (scrollMenuToBottom && menuRef.current && isOpen) {
-      // @ts-ignore - TS2571 - Object is of type 'unknown'. | TS2571 - Object is of type 'unknown'.
       menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
     }
   };
@@ -77,9 +74,7 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
           e.preventDefault();
           isOpen ? clickAway() : onOpen();
         }
-      }
-      // @ts-ignore - TS2741 - Property 'current' is missing in type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' but required in type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      },
       boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       size: size,
       placeholder: placeholder,
@@ -97,12 +92,9 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       ref: ref
     })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
-      context: context
-      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-      ,
+      context: context,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      // @ts-ignore - TS2741 - Property 'current' is missing in type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' but required in type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       className: _DropdownModule.default.menuWrapper,
       style: {
@@ -126,14 +118,11 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
         !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
           clickAway();
-          // @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'ReferenceType & ReferenceType'.
           refs.reference.current.querySelector('input').focus();
         }
       },
       size: menu.size || size,
-      onTabOut: clickAway
-      // @ts-ignore - TS2769 - No overload matches this call.
-      ,
+      onTabOut: clickAway,
       ref: menuRef
     }))))));
   });

package/lib/components/Dropdown/Dropdown.js.flow

@@ -0,0 +1,176 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {useReferenceElementWidth} from '../../hooks';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
+import type {InputProps} from '../Input';
+import {Input} from '../Input';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import {type ElevationType, getElevationValue} from '../Tooltip';
+
+import css from './Dropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+  iconRight?: string,
+}>;
+
+export type DropdownProps = {
+  ...InputProps,
+  classNames?: ClassNames,
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  scrollMenuToBottom?: boolean,
+  dropdownInputText?: string,
+  menu?: MenuProps,
+  elevation?: ElevationType,
+  clickAwayRef?: ClickAwayRefType,
+  ...
+};
+
+export const Dropdown: React$AbstractComponent<
+  DropdownProps,
+  HTMLInputElement,
+> = React.forwardRef<DropdownProps, HTMLInputElement>(
+  (
+    {
+      size = 'medium',
+      classNames,
+      placeholder = 'Select...',
+      onChange,
+      menu,
+      onMenuOpen,
+      onMenuClose,
+      scrollMenuToBottom = false,
+      dropdownInputText = '',
+      clickAwayRef,
+      elevation = 'modal',
+      ...inputProps
+    }: DropdownProps,
+    ref,
+  ): React.Node => {
+    const menuRef = React.useRef();
+
+    const {x, y, refs, strategy, context} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: 'bottom-start',
+      whileElementsMounted: autoUpdate,
+      middleware: [flip(), offset(parseInt(spaceXXSmall))],
+    });
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      if (scrollMenuToBottom && menuRef.current && isOpen) {
+        menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
+      }
+    };
+
+    return (
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+          <div
+            className={classify(css.dropdownContainer, classNames?.wrapper)}
+            data-testid="Dropdown"
+          >
+            <Input
+              {...inputProps}
+              onKeyDown={(e) => {
+                if (e.keyCode === 32) {
+                  e.preventDefault();
+                  isOpen ? clickAway() : onOpen();
+                }
+              }}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
+              size={size}
+              placeholder={placeholder}
+              value={dropdownInputText}
+              classNames={{
+                box: classify(css.inputBox, classNames?.box),
+                iconRight: classNames?.iconRight,
+              }}
+              iconRightName={isOpen ? 'angle-up' : 'angle-down'}
+              readOnly
+              onContainerClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              ref={ref}
+            />
+
+            {isOpen && menu && (
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    className={css.menuWrapper}
+                    style={{
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+                      ...(menu.isFluid !== false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    <Menu
+                      {...menu}
+                      onSelect={(option, e) => {
+                        onChange && onChange(option, e);
+                        if (
+                          // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                          !option.keepMenuOpenOnOptionSelect &&
+                          (!menu.optionsVariant ||
+                            menu.optionsVariant === 'normal')
+                        ) {
+                          clickAway();
+                          refs.reference.current.querySelector('input').focus();
+                        }
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                      ref={menuRef}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/Dropdown/SimpleDropdown.js

@@ -57,8 +57,6 @@ const SimpleDropdownBase = (props, ref) => {
       onChange?.(selectedOption, e);
     });
   };
-
-  // @ts-ignore - TS2345 - Argument of type '{ current: SimpleDropdownRef | null; } | ((arg1: SimpleDropdownRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleDropdownRef> | undefined'.
   React.useImperativeHandle(ref, () => ({
     selectedKeys: dropdownSelectedKeys
   }));
@@ -66,9 +64,7 @@ const SimpleDropdownBase = (props, ref) => {
     classNames: classNames,
     size: size,
     elevation: elevation,
-    placeholder: placeholder
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    placeholder: placeholder,
     onChange: handleOptionChange,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
@@ -93,6 +89,4 @@ const SimpleDropdownBase = (props, ref) => {
     }
   }));
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleDropdownProps & Omit<Omit<Flow.ComponentProps<typeof Dropdown>, 'classNames' | 'size' | 'elevation' | 'placeholder' | 'onChange' | 'onMenuOpen' | 'onMenuClose' | 'dropdownInputText' | 'clickAwayRef' | 'menu'>, keyof SimpleDropdownProps>, ref: { current: null | SimpleDropdownRef; } | ((arg1: null | Simp...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleDropdownProps, SimpleDropdownRef>'.
 const SimpleDropdown = exports.SimpleDropdown = /*#__PURE__*/React.forwardRef(SimpleDropdownBase);

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -0,0 +1,170 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import {
+  getSelectedKeysFromSelectedOption,
+  getTextLabelFromSelectedKeys,
+} from '../../utils/menu';
+import type {InputProps} from '../Input';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
+
+import {Dropdown} from './Dropdown';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+}>;
+
+export type SimpleDropdownRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleDropdownProps = {
+  // Input props
+  ...InputProps,
+
+  elevation?: ElevationType,
+  classNames?: ClassNames,
+  clickAwayRef?: ClickAwayRefType,
+
+  // Menu props
+  options?: Array<MenuOption>,
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+  isMenuFluid?: boolean,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
+  menuClassNames?: MenuClassNames,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
+  staticLabels?: {
+    RESULT?: string,
+    RESULTS?: string,
+    SEARCH_PLACEHOLDER?: string,
+  },
+
+  // events
+  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  ...
+};
+
+const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    placeholder = 'Select...',
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onChange,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    elevation = 'modal',
+    menuVirtualization,
+    resolveSecondaryLabel,
+    isMenuFluid = true,
+    header,
+    footer,
+    menuClassNames,
+    showLabelTooltip,
+    clickAwayRef,
+    allowWrap = false,
+    staticLabels,
+    ...inputProps
+  } = props;
+
+  const [dropdownInputText, setDropdownInputText] = React.useState('');
+  const [dropdownSelectedKeys, setDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    const newDropdownText = getTextLabelFromSelectedKeys(selectedKeys, options);
+
+    setDropdownSelectedKeys(selectedKeys);
+    setDropdownInputText(newDropdownText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        dropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newDropdownText = getTextLabelFromSelectedKeys(
+      newSelectedKeys,
+      options,
+    );
+
+    setDropdownSelectedKeys(newSelectedKeys);
+    setDropdownInputText(newDropdownText);
+
+    setTimeout(() => {
+      onChange?.(selectedOption, e);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: dropdownSelectedKeys,
+  }));
+
+  return (
+    <Dropdown
+      {...inputProps}
+      classNames={classNames}
+      size={size}
+      elevation={elevation}
+      placeholder={placeholder}
+      onChange={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      dropdownInputText={dropdownInputText}
+      clickAwayRef={clickAwayRef}
+      menu={{
+        options,
+        selectedKeys: dropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        virtualization: menuVirtualization,
+        size,
+        isFluid: isMenuFluid,
+        header,
+        footer,
+        classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
+        staticLabels,
+      }}
+    />
+  );
+};
+
+export const SimpleDropdown: React.AbstractComponent<
+  SimpleDropdownProps,
+  SimpleDropdownRef,
+> = React.forwardRef<SimpleDropdownProps, SimpleDropdownRef>(
+  SimpleDropdownBase,
+);

package/lib/components/Dropdown/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Dropdown';
+export * from './SimpleDropdown';

package/lib/components/EmptyState/EmptyImages/CalendarEmptyImage.js.flow

@@ -0,0 +1,112 @@
+// @flow strict
+
+import * as React from 'react';
+
+
+export const CalendarEmptyImage = (): React.Node => (
+  <svg
+    width="140"
+    height="140"
+    viewBox="0 0 140 140"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M70.0002 120C97.6145 120 120 97.6142 120 70C120 42.3858 97.6145 20 70.0002 20C42.3859 20 20 42.3858 20 70C20 97.6142 42.3859 120 70.0002 120Z"
+      fill="#E6E5EF"
+    />
+    <path
+      d="M115.834 31.7826C117.296 30.4418 117.398 28.1655 116.062 26.6982C114.726 25.231 112.457 25.1285 110.995 26.4693C109.533 27.8102 109.43 30.0865 110.767 31.5537C112.103 33.021 114.372 33.1234 115.834 31.7826Z"
+      fill="#9F9FBC"
+    />
+    <path
+      d="M44.0578 24.862C45.2971 24.4578 45.9752 23.1221 45.5724 21.8786C45.1696 20.635 43.8384 19.9546 42.5991 20.3588C41.3597 20.763 40.6816 22.0987 41.0844 23.3422C41.4873 24.5858 42.8185 25.2662 44.0578 24.862Z"
+      fill="#9F9FBC"
+    />
+    <path
+      d="M97.4061 106.626H12.1772L27.7506 34.7443H113.074L97.4061 106.626Z"
+      fill="white"
+    />
+    <path
+      d="M97.4061 106.626H12.1772L27.7506 34.7443H113.074L97.4061 106.626Z"
+      fill="#F1F1F5"
+      stroke="#D3D2E0"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+    />
+    <path
+      opacity="0.1"
+      d="M48.2321 106.626H30.5822C27.3731 106.626 24.7304 103.879 24.9192 100.659L27.7507 34.7443H31.998L48.2321 106.626Z"
+      fill="#9F9FBC"
+    />
+    <path
+      d="M131.762 106.626H46.5331L32.0924 51.4125L31.998 51.0336L27.7507 34.7443H113.074L116.755 48.8554L117.321 51.0336L117.416 51.4125L131.762 106.626Z"
+      fill="white"
+      stroke="#D3D2E0"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+      strokeLinejoin="round"
+    />
+    <path d="M33 51.0335H116.263L112.5 35.5H29L33 51.0335Z" fill="#F1F1F5" />
+    <path
+      d="M50.2141 46.393C51.8822 46.393 53.2344 45.0361 53.2344 43.3624C53.2344 41.6886 51.8822 40.3318 50.2141 40.3318C48.5461 40.3318 47.1938 41.6886 47.1938 43.3624C47.1938 45.0361 48.5461 46.393 50.2141 46.393Z"
+      fill="#EBEBEB"
+      stroke="#8D8CAF"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+    />
+    <path
+      d="M100.049 46.393C101.717 46.393 103.069 45.0361 103.069 43.3624C103.069 41.6886 101.717 40.3318 100.049 40.3318C98.381 40.3318 97.0288 41.6886 97.0288 43.3624C97.0288 45.0361 98.381 46.393 100.049 46.393Z"
+      fill="#EBEBEB"
+      stroke="#8D8CAF"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+    />
+    <path
+      d="M50.4182 44.1411C49.8519 44.1411 49.3799 43.6676 49.3799 43.0993C49.3799 42.5311 49.8519 42.0576 50.4182 42.0576C52.4946 42.0576 54.6654 39.1217 54.6654 34.6705C54.6654 34.5758 54.6654 34.3864 54.6654 34.2917C54.5711 29.9353 52.4002 27.2835 50.4182 27.2835C48.5305 27.2835 46.454 29.8405 46.1709 33.8182H44C44.2832 28.8935 47.0203 25.2 50.3238 25.2C53.816 25.2 56.5531 29.2723 56.7419 34.4811C56.7419 34.5758 56.7419 34.6705 56.7419 34.7652C56.8363 39.9741 54.0048 44.1411 50.4182 44.1411Z"
+      fill="#66658D"
+    />
+    <path
+      d="M100.011 44.1411C99.4443 44.1411 98.9724 43.6676 98.9724 43.0993C98.9724 42.5311 99.4443 42.0576 100.011 42.0576C102.087 42.0576 104.258 39.1217 104.258 34.6705C104.258 34.5758 104.258 34.3864 104.258 34.2917C104.164 29.9353 101.993 27.2835 100.011 27.2835C98.1229 27.2835 96.0465 29.8405 95.7633 33.8182H93.5925C93.8756 28.8935 96.6128 25.2 99.9162 25.2C103.409 25.2 106.146 29.2723 106.334 34.4811C106.334 34.5758 106.334 34.6705 106.334 34.7652C106.429 39.9741 103.597 44.1411 100.011 44.1411Z"
+      fill="#66658D"
+    />
+    <path
+      d="M1.32324 106.531H138.652"
+      stroke="#D3D2E0"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.3"
+      d="M100.521 72.3424C99.9544 72.3424 99.5769 71.8688 99.5769 71.3953C99.5769 70.8271 99.9544 70.4482 100.521 70.4482H103.447C104.013 70.4482 104.391 70.9218 104.391 71.3953C104.391 71.9635 103.919 72.3424 103.447 72.3424H100.521Z"
+      fill="#E6E5EF"
+    />
+    <path
+      opacity="0.3"
+      d="M60.3132 99.0494C59.9356 99.0494 59.5581 98.7653 59.3693 98.3865L57.8592 92.7988H50.4028C49.8365 92.7988 49.459 92.3253 49.459 91.8518C49.459 91.2835 49.9309 90.9047 50.4028 90.9047H57.2929L54.9333 82.5706H47.7601C47.1938 82.5706 46.8162 82.0971 46.8162 81.6235C46.8162 81.0553 47.1938 80.6765 47.7601 80.6765H54.367L52.0074 72.3424H45.2117C44.6454 72.3424 44.2679 71.8689 44.2679 71.3953C44.2679 70.8271 44.6454 70.4483 45.2117 70.4483H51.5355L49.1758 62.1142H42.6633C42.097 62.1142 41.7195 61.6406 41.7195 61.1671C41.7195 60.5989 42.097 60.22 42.6633 60.22H48.6095L47.6657 56.8106C47.5713 56.3371 47.8545 55.7689 48.3264 55.6742C48.4208 55.6742 48.5152 55.6742 48.6095 55.6742C48.9871 55.6742 49.3646 55.9583 49.5534 56.3371L50.686 60.22H58.2367C58.803 60.22 59.1806 60.5989 59.1806 61.1671C59.1806 61.7353 58.803 62.1142 58.2367 62.1142H51.2523L53.6119 70.4483H65.5043L61.7289 56.8106C61.6346 56.3371 61.9177 55.7689 62.3896 55.6742C62.484 55.6742 62.5784 55.6742 62.6728 55.6742C63.0503 55.6742 63.4279 55.9583 63.6166 56.3371L64.7492 60.22H68.8078C69.3741 60.22 69.7516 60.5989 69.7516 61.1671C69.7516 61.7353 69.2797 62.1142 68.8078 62.1142H65.3155L67.6751 70.4483H75.6978C76.2641 70.4483 76.6416 70.9218 76.6416 71.3953C76.6416 71.9636 76.2641 72.3424 75.6978 72.3424H68.2415L70.6011 80.6765H82.5878L77.3967 62.1142H74.8483C74.282 62.1142 73.9045 61.6406 73.9045 61.1671C73.9045 60.5989 74.3764 60.22 74.8483 60.22H76.8304L75.8866 56.8106C75.7922 56.5265 75.8866 56.3371 75.981 56.053C76.0753 55.8636 76.2641 55.6742 76.5473 55.5795C76.6416 55.5795 76.736 55.5795 76.8304 55.5795C77.2079 55.5795 77.5855 55.8636 77.7743 56.2424L78.9069 60.1253H80.8889C81.4552 60.1253 81.8328 60.5042 81.8328 61.0724C81.8328 61.6406 81.4552 62.0195 80.8889 62.0195H79.4732L81.8328 70.3536H93.8196L91.46 62.0195H85.325C84.7587 62.0195 84.3811 61.5459 84.3811 61.0724C84.3811 60.5042 84.8531 60.1253 85.325 60.1253H90.6105L89.6667 56.7159C89.5723 56.2424 89.8554 55.6742 90.3274 55.5795C90.4217 55.5795 90.5161 55.5795 90.6105 55.5795C90.988 55.5795 91.3656 55.8636 91.5543 56.2424L92.687 60.1253H104.674L103.73 56.7159C103.636 56.2424 103.919 55.6742 104.391 55.5795C104.485 55.5795 104.579 55.5795 104.674 55.5795C105.051 55.5795 105.429 55.8636 105.618 56.2424L106.75 60.1253H114.112C114.678 60.1253 115.056 60.5042 115.056 61.0724C115.056 61.6406 114.678 62.0195 114.112 62.0195H107.033L109.393 70.3536H116.472C117.038 70.3536 117.416 70.8271 117.416 71.3006C117.416 71.8689 117.038 72.2477 116.472 72.2477H109.959L112.319 80.5818H119.115C119.681 80.5818 120.058 81.0553 120.058 81.5288C120.058 82.0971 119.681 82.4759 119.115 82.4759H112.885L115.245 90.81H121.663C122.229 90.81 122.607 91.2835 122.607 91.7571C122.607 92.3253 122.135 92.7041 121.663 92.7041H115.717L117.132 97.7235C117.227 98.197 116.944 98.7653 116.472 98.86C116.377 98.86 116.283 98.86 116.189 98.86C115.811 98.86 115.434 98.5759 115.245 98.197L113.735 92.7041H101.748L103.164 97.6288C103.258 97.9129 103.164 98.1023 103.069 98.3865C102.975 98.5759 102.786 98.7653 102.503 98.86C102.409 98.86 102.314 98.86 102.22 98.86C101.842 98.86 101.465 98.5759 101.276 98.197L99.7658 92.7988H87.779L89.1947 97.7235C89.2891 98.197 89.006 98.7653 88.534 98.86C88.4397 98.86 88.3453 98.86 88.2509 98.86C87.8734 98.86 87.4958 98.5759 87.3071 98.197L85.7969 92.7988H73.8101L75.2259 97.7235C75.3203 98.197 75.0371 98.7653 74.5652 98.86C74.4708 98.86 74.3764 98.86 74.282 98.86C73.9045 98.86 73.527 98.5759 73.3382 98.197L71.828 92.7988H59.8413L61.257 97.8182C61.3514 98.1023 61.257 98.2918 61.1626 98.5759C61.0683 98.7653 60.8795 98.9547 60.5963 99.0494C60.5019 99.0494 60.4076 99.0494 60.3132 99.0494ZM87.2127 90.9047H113.168L110.809 82.5706H98.8219L99.6714 85.6012C99.7658 85.8853 99.6714 86.0747 99.577 86.3588C99.4826 86.5482 99.2938 86.7377 99.0107 86.8324C98.9163 86.8324 98.8219 86.8324 98.7275 86.8324C98.35 86.8324 97.9725 86.5482 97.7837 86.1694L96.8399 82.6653H93.2533C92.687 82.6653 92.3094 82.1918 92.3094 81.7183C92.3094 81.15 92.687 80.7712 93.2533 80.7712H96.2736L93.9139 72.4371H82.0215L84.3811 80.7712H87.3071C87.8734 80.7712 88.2509 81.2447 88.2509 81.7183C88.2509 82.2865 87.8734 82.6653 87.3071 82.6653H84.8531L87.2127 90.9047ZM73.2438 90.9047H85.2306L82.871 82.5706H70.8842L73.2438 90.9047ZM59.275 90.9047H71.2617L68.9021 82.5706H65.4099C64.8436 82.5706 64.4661 82.0971 64.4661 81.6235C64.4661 81.0553 64.938 80.6765 65.4099 80.6765H68.4302L66.0706 72.3424H54.0838L56.4434 80.6765H59.5581C60.1244 80.6765 60.5019 81.15 60.5019 81.6235C60.5019 82.1918 60.03 82.5706 59.5581 82.5706H57.0097L59.275 90.9047ZM98.35 80.6765H110.337L105.146 62.1142H93.0645L98.35 80.6765Z"
+      fill="#E6E5EF"
+    />
+    <path
+      d="M71.3621 71.012C67.4401 71.012 64.1456 68.5027 62.8905 64.8955C62.5768 64.1114 63.0474 63.3272 63.8318 63.0135C64.6162 62.6999 65.4006 63.1704 65.7144 63.9545C66.4988 66.307 68.852 68.0322 71.3621 68.0322C73.8722 68.0322 76.2254 66.4639 77.0099 63.9545C77.3236 63.1704 78.108 62.6999 78.8924 63.0135C79.6768 63.3272 80.1475 64.1114 79.8337 64.8955C78.5787 68.6595 75.2842 71.012 71.3621 71.012Z"
+      fill="#66658D"
+    />
+    <path
+      d="M95.0513 71.012C91.1292 71.012 87.8347 68.5027 86.5797 64.8955C86.2659 64.1114 86.7366 63.3272 87.521 63.0135C88.3054 62.6999 89.0898 63.1704 89.4035 63.9545C90.188 66.307 92.5412 68.0322 95.0513 68.0322C97.5614 68.0322 99.9146 66.4639 100.699 63.9545C101.013 63.1704 101.797 62.6999 102.582 63.0135C103.366 63.3272 103.837 64.1114 103.523 64.8955C102.268 68.6595 98.9733 71.012 95.0513 71.012Z"
+      fill="#66658D"
+    />
+    <path
+      d="M87.8522 90.2147C89.845 90.2147 91.4604 88.5997 91.4604 86.6075C91.4604 84.6153 89.845 83.0004 87.8522 83.0004C85.8594 83.0004 84.2439 84.6153 84.2439 86.6075C84.2439 88.5997 85.8594 90.2147 87.8522 90.2147Z"
+      fill="#66658D"
+    />
+    <path
+      d="M12.8117 25.1494V20.4998H30.7818V25.1494L18.5199 39.9438H30.9932V44.5935H12.1775V39.9438L24.4394 25.1494H12.8117Z"
+      fill="#66658D"
+    />
+    <path
+      d="M36.0112 54.494V51.5352H47.639V54.494L39.8167 64.0047H47.8504V66.9636H35.5884V64.0047L43.4107 54.494H36.0112Z"
+      fill="#66658D"
+    />
+  </svg>
+);