@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Tabs/Tabs.jsx

@@ -1,116 +0,0 @@
-import React, { createRef, useEffect, useState, useRef } from 'react';
-import PropTypes from "prop-types";
-import {
-  BottomShadowBlocker,
-  Container,
-  Tab,
-  TabContent,
-  TabsContent,
-  TabsWrapper,
-} from "./TabsComponents";
-
-export const Tabs = ({
-  accessibilityLabel,
-  activeTabIndex,
-  defaultTabIndex = 0,
-  onClickTab,
-  onChangeTabIndex,
-  tabs = [],
-  tintColor = "#333",
-  ...rest
-}) => {
-  const [selectedTabIndex, setSelectedTabIndex] = useState(
-    activeTabIndex || defaultTabIndex || 0
-  );
-  const tabsRefs = useRef(tabs.map(createRef));
-
-  useEffect(() => {
-    if (tabsRefs.current.length !== tabs.length) {
-      tabsRefs.current = tabs.map(
-        (_, idx) => tabsRefs.current[idx] || createRef()
-      );
-    }
-  }, [tabs]);
-
-  if (tabs.length === 0 || tabs.length !== tabsRefs.current.length) {
-    return null;
-  }
-
-  const selectTabIndex = (idx) => {
-    if (typeof activeTabIndex === "undefined") {
-      setSelectedTabIndex(idx);
-    }
-    if (typeof onChangeTabIndex === "function") {
-      onChangeTabIndex(idx);
-    }
-  };
-
-  const onTabKeyDown = (tabIndex) => (evt) => {
-    const { keyCode, shiftKey } = evt.nativeEvent;
-    if (![39, 37, 9].includes(keyCode)) return;
-
-    const targetTab =
-      keyCode === 39 || (keyCode === 9 && !shiftKey) // right arrow or simple tab
-        ? Math.min(tabs.length - 1, tabIndex + 1)
-        : Math.max(0, tabIndex - 1);
-
-    tabsRefs.current[targetTab].current.focus();
-    setSelectedTabIndex(targetTab);
-  };
-
-  const SelectedTab = tabs[selectedTabIndex];
-
-  return (
-    <Container noPadding {...rest}>
-      <TabsWrapper role="tablist" aria-label={accessibilityLabel}>
-        {tabs.map(({ label, accessibilityLabel, title }, idx) => {
-          const isTabSelected = idx === selectedTabIndex;
-          return (
-            <Tab
-              key={accessibilityLabel}
-              role="tab"
-              aria-selected={isTabSelected.toString()}
-              aria-controls={`${accessibilityLabel}-tab`}
-              tabindex={isTabSelected ? "0" : "-1"}
-              tintColor={tintColor}
-              title={title || label}
-              onClick={() => {
-                if (onClickTab) {
-                  onClickTab({ label, index: idx, title });
-                }
-                selectTabIndex(idx);
-              }}
-              onKeyDown={onTabKeyDown(selectedTabIndex)}
-              ref={tabsRefs.current[idx]}
-            >
-              <TabContent>{label}</TabContent>
-              {isTabSelected && <BottomShadowBlocker />}
-            </Tab>
-          );
-        })}
-      </TabsWrapper>
-      <TabsContent
-        role="tabpanel"
-        aria-labelledby={`${SelectedTab.accessibilityLabel}-tab`}
-        tabindex="0"
-      >
-        <SelectedTab.component />
-      </TabsContent>
-    </Container>
-  );
-};
-Tabs.propTypes = {
-  accessibilityLabel: PropTypes.string,
-  activeTabIndex: PropTypes.number,
-  defaultTabIndex: PropTypes.number,
-  onClickTab: PropTypes.func,
-  onChangeTabIndex: PropTypes.func,
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      accessibilityLabel: PropTypes.string,
-      title: PropTypes.string,
-    }).isRequired
-  ).isRequired,
-  tintColor: PropTypes.string,
-};

package/src/components/Tabs/TabsComponents.jsx

@@ -1,124 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Card } from '../Card';
-
-const borderRadius = "10px";
-const shadowColor = "#dfdfdf";
-
-export const Container = styled(Card)`
-  overflow: hidden;
-`;
-
-export const TabsWrapper = styled.div`
-  display: flex;
-  background-color: #fafafa;
-`;
-
-export const TabContent = styled.div`
-  position: relative;
-`;
-
-export const selectedTabMixin = css`
-  color: ${(props) => props.tintColor};
-  cursor: default;
-  box-shadow: 0 0 10px 2px ${shadowColor};
-  background-color: white;
-  &:before,
-  &:after {
-    background-color: white;
-    z-index: 1;
-  }
-  &:before,
-  &:after,
-  & ${TabContent}:before, & ${TabContent}:after {
-    position: absolute;
-    bottom: 0;
-  }
-  & ${TabContent} {
-    &:after,
-    &:before {
-      width: 10px;
-      height: 11px;
-      background-color: #fafafa;
-      z-index: 2;
-      content: "";
-      bottom: -16px;
-    }
-    &:before {
-      left: -42px;
-      box-shadow: inset -8px -9px 8px -10px ${shadowColor};
-      border-bottom-right-radius: ${borderRadius};
-    }
-    &:after {
-      right: -42px;
-      box-shadow: inset 8px -9px 8px -10px ${shadowColor};
-      border-bottom-left-radius: ${borderRadius};
-    }
-  }
-`;
-
-export const Tab = styled.button`
-  border: none;
-  font-weight: 500;
-  font-size: 14px;
-  height: 48px;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  display: block;
-  white-space: nowrap;
-  padding-left: 32px;
-  padding-right: 32px;
-  background-color: transparent;
-  border-top-left-radius: ${borderRadius};
-  border-top-right-radius: ${borderRadius};
-  margin-bottom: 0;
-  color: rgba(0, 0, 0, 0.87);
-  ${TabContent} {
-    font-family: Raleway;
-  }
-  &:before,
-  &:after {
-    content: "";
-  }
-
-  &:before,
-  &:after {
-    background-color: transparent;
-    width: 10px;
-    height: 10px;
-  }
-  &:before {
-    left: -10px;
-  }
-  &:after {
-    right: -10px;
-  }
-
-  &:hover {
-    color: ${(props) => props.tintColor};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  ${(props) => (props["aria-selected"] === "true" ? selectedTabMixin : "")};
-`;
-
-export const TabsContent = styled.div`
-  box-shadow: -11px -10px 8px -12px ${shadowColor},
-    11px -12px 8px -12px ${shadowColor};
-  position: relative;
-  background-color: #fff;
-  padding: 1.875rem;
-`;
-
-export const BottomShadowBlocker = styled.div`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  height: 8px;
-  background-color: #fff;
-  z-index: 1;
-`;

package/src/components/Tabs/index.ts

@@ -1 +0,0 @@
-export * from './Tabs';

package/src/components/Tabs/readme.md

@@ -1,171 +0,0 @@
-### Accessibility
-
-- Ensure the accessibilityLabel prop is present on both, `<Tabs />` and on every tab element on `tabs` property.
-
-### Props
-
-|        Prop        |  Default  |                                                                                                                                             Options |
-| :----------------: | :-------: | --------------------------------------------------------------------------------------------------------------------------------------------------: |
-| accessibilityLabel |           |                                                                              label to describe tabs content (i.e. "Security products") **Required** |
-|        tabs        |   `[]`    | Array of { accessibilityLabel: string, label: string or ReactComponent, title?: string (defaults to label), component: ReactComponent} **Required** |
-|     tintColor      |  `#333`   |                                                                                                                                               Color |
-|  defaultTabIndex   |     0     |                                                                                                                                              number |
-|   activeTabIndex   | undefined |                                                                                                          If defined, will be the selected tab index |
-|     onClickTab     | undefined |                                                                                        (tab: {label: string, index: number, title: string}) => void |
-|  onChangeTabIndex  | undefined |                                                                                                                          (newIndex: number) => void |
-|      ...rest       |           |                                                                                                                                                     |
-
-### Examples
-
-#### Basic example
-
-```js
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <Tabs
-    accessibilityLabel="Red Sift products (basic)"
-    tabs={[
-      {
-        accessibilityLabel: 'onINBOX',
-        label: 'OnINBOX',
-        component: () => <h1>onINBOX tab content</h1>,
-      },
-      {
-        accessibilityLabel: 'onDMARC',
-        label: 'OnDMARC',
-        component: () => <h1>onDMARC tab content</h1>,
-      },
-    ]}
-    onChangeTabIndex={(...args) =>
-      console.log('Tabs.BasicExample.onChangeTabIndex(', ...args, ')')
-    }
-  />
-</div>
-```
-
-#### Using component on tab labels
-
-```js
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <Tabs
-    accessibilityLabel="Red Sift products (with components)"
-    tabs={[
-      {
-        accessibilityLabel: 'onINBOX',
-        label: 'OnINBOX',
-        component: () => <h1>onINBOX tab content</h1>,
-      },
-      {
-        accessibilityLabel: 'onDMARC',
-        label: (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            <div
-              style={{
-                width: 10,
-                height: 10,
-                backgroundColor: 'brown',
-                borderRadius: 5,
-                marginRight: 10,
-              }}
-            />
-            OnDMARC
-          </div>
-        ),
-        component: () => <h1>onDMARC tab content</h1>,
-      },
-    ]}
-    onChangeTabIndex={(...args) =>
-      console.log('Tabs.WithComponents.onChangeTabIndex(', ...args, ')')
-    }
-  />
-</div>
-```
-
-#### Default tab
-
-```js
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <Tabs
-    accessibilityLabel="Red Sift products (default)"
-    defaultTabIndex={1}
-    tabs={[
-      {
-        accessibilityLabel: 'onINBOX',
-        label: 'OnINBOX',
-        component: () => <h1>onINBOX tab content</h1>,
-      },
-      {
-        accessibilityLabel: 'onDMARC',
-        label: 'OnDMARC',
-        component: () => <h1>onDMARC tab content</h1>,
-      },
-    ]}
-    onChangeTabIndex={(...args) =>
-      console.log('Tabs.DefaultTab.onChangeTabIndex(', ...args, ')')
-    }
-  />
-</div>
-```
-
-#### Fixed tab
-
-```js
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <Tabs
-    accessibilityLabel="Red Sift products (fixed)"
-    activeTabIndex={1}
-    tabs={[
-      {
-        accessibilityLabel: 'onINBOX',
-        label: 'OnINBOX',
-        component: () => <h1>onINBOX tab content</h1>,
-      },
-      {
-        accessibilityLabel: 'onDMARC',
-        label: 'OnDMARC',
-        component: () => <h1>onDMARC tab content</h1>,
-      },
-    ]}
-    onChangeTabIndex={(...args) =>
-      console.log('Tabs.FixedTab.onChangeTabIndex(', ...args, ')')
-    }
-  />
-</div>
-```
-
-#### Fixed tab using a custom title
-
-```js
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <Tabs
-    accessibilityLabel="Red Sift products (fixed)"
-    activeTabIndex={0}
-    tabs={[
-      {
-        accessibilityLabel: 'onINBOX',
-        label: (
-          <bold>
-            <img src="https://via.placeholder.com/10" />
-            OnINBOX
-          </bold>
-        ),
-        title: 'OnINBOX with image',
-        component: () => <h1>onINBOX tab content</h1>,
-      },
-      {
-        accessibilityLabel: 'onDMARC',
-        label: 'OnDMARC',
-        component: () => <h1>onDMARC tab content</h1>,
-      },
-    ]}
-    onChangeTabIndex={(...args) =>
-      console.log('Tabs.FixedTab.onChangeTabIndex(', ...args, ')')
-    }
-  />
-</div>
-```

package/src/components/Typography/Typography.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from "prop-types";
-
-export const fontSizes = {
-  small: "0.8125rem", // 13px
-  body: "0.875rem", // 14px
-  h1: "2.5rem", // 40px
-  h2: "1.75rem", // 28px
-  h3: "1.313rem", // 21px
-  h4: "1rem", // 16px
-};
-
-const StyledText = styled.div`
-  ${({ bold, color, gutterBottom, noWrap, number, size }) => css`
-    font-family: ${number
-        ? "Source Code Pro"
-        : size && ["h1", "h2", "h3", "h4"].includes(size)
-        ? "Electrolize"
-        : "Raleway"},
-      sans-serif;
-    font-size: ${size ? fontSizes[size] || "" : "0.875rem"};
-    word-wrap: break-word;
-    white-space: ${noWrap ? "nowrap" : "normal"};
-    overflow-wrap: break-word;
-    overflow: ${noWrap ? "hidden" : "auto"};
-    text-overflow: ${noWrap ? "ellipsis" : "initial"};
-    color: ${color ? color : "#333333"};
-    font-weight: ${bold ? "600" : "normal"};
-    margin-bottom: ${gutterBottom ? "1em" : "0px"};
-    margin-top: 0;
-  `}
-`;
-
-export const Typography = ({
-  bold,
-  children,
-  className,
-  color,
-  component,
-  gutterBottom,
-  noWrap,
-  number,
-  size,
-  style,
-  ...otherProps
-}) => {
-  return (
-    <StyledText
-      as={component}
-      bold={bold}
-      className={className}
-      color={color}
-      gutterBottom={gutterBottom}
-      noWrap={noWrap}
-      number={number}
-      size={size || component}
-      style={style}
-      {...otherProps}
-    >
-      {children}
-    </StyledText>
-  );
-};
-
-Typography.propTypes = {
-  bold: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  component: PropTypes.string,
-  gutterBottom: PropTypes.bool,
-  noWrap: PropTypes.bool,
-  number: PropTypes.bool,
-  size: PropTypes.oneOf(Object.keys(fontSizes)),
-  style: PropTypes.object,
-};

package/src/components/Typography/index.ts

@@ -1 +0,0 @@
-export * from './Typography';

package/src/components/Typography/readme.md

@@ -1,88 +0,0 @@
-### Accessibility
-
-- Ensure the `as` prop is completed appropriately
-- Use `rem` measurements for font, for being responsive to users that change their browser font size setting
-- Ensure h1-h6 hierarchy is followed
-  - h1-h6 is unrelated to the font size. An `<h1>` can be smaller than an `<h6>`, if that is the design
-  - h1-h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.
-  - A page should only have one `<h1>`, such as the company logo
-  - A page title might be a `<h2>`, then a card title might be a `<h3>`, and so forth
-  - if an `<h3>` is used, the `h1` and `h2` should also be used
-
-### Props
-
-|     Prop     |              Default               |                                                                                                                     Options |
-| :----------: | :--------------------------------: | --------------------------------------------------------------------------------------------------------------------------: |
-|  component   |               `div`                |                                                                              any html element including: `h1-h6,p,span,div` |
-|    color     |             `#333333`              |                                                                                                                       Color |
-|     size     | 'body': (Raleway, 0.875rem [14px]) | 'small': (Raleway, 0.8125rem [13px]), 'h1'-'h4': (Electrolize: 2.5rem [40px], 1.75rem [28px], 1.313rem [21px], 1rem [16px]) |
-|    noWrap    |              `false`               |                                                If true, the text will not wrap, but instead will truncate with an ellipsis. |
-|    number    |              `false`               |                                                                        If true, will use font for numbers (Source Code Pro) |
-|     bold     |              `false`               |                                                                                        If true, will use font weight of 600 |
-| gutterBottom |              `false`               |                                                                                      If true, will add `margin-bottom: 1em` |
-|   children   |                                    |                                                                                                                      `node` |
-|   ...rest    |                                    |                                                                                                                             |
-
-### Examples
-
-```js
-<div style={{ display: "flex", flexDirection: "column" }}>
-  <Typography bold as="h1" size="h1">
-    Header One Bold
-  </Typography>
-  <Typography as="h1" size="h1">
-    Header One
-  </Typography>
-  <Typography as="h2" size="h2">
-    Header Two
-  </Typography>
-  <Typography as="h3" size="h3">
-    Header Three
-  </Typography>
-  <Typography as="h4" size="h4" gutterBottom>
-    Header Four
-  </Typography>
-  <Typography as="p" gutterBottom>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas,
-    lacus a dictum ullamcorper, sem nunc consequat nisl, ac convallis sapien
-    odio quis nibh. Pellentesque orci diam, rutrum eget vehicula sit amet,
-    vulputate molestie ipsum. Sed euismod neque massa, sed convallis magna
-    vestibulum in. Vestibulum vel auctor ante, quis ornare leo. Curabitur leo
-    lacus, auctor ut justo non, aliquet volutpat nunc. In interdum posuere
-    sapien, et dictum sapien sagittis vitae. Aliquam vehicula elit quis felis
-    pretium fermentum. Sed non quam in magna cursus laoreet eu eu purus.
-    Curabitur vestibulum velit vel diam euismod bibendum.
-  </Typography>
-  <Typography as="p" noWrap gutterBottom bold>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas,
-    lacus a dictum ullamcorper, sem nunc consequat nisl, ac convallis sapien
-    odio quis nibh. Pellentesque orci diam, rutrum eget vehicula sit amet,
-    vulputate molestie ipsum. Sed euismod neque massa, sed convallis magna
-    vestibulum in. Vestibulum vel auctor ante, quis ornare leo. Curabitur leo
-    lacus, auctor ut justo non, aliquet volutpat nunc. In interdum posuere
-    sapien, et dictum sapien sagittis vitae. Aliquam vehicula elit quis felis
-    pretium fermentum. Sed non quam in magna cursus laoreet eu eu purus.
-    Curabitur vestibulum velit vel diam euismod bibendum.
-  </Typography>
-  <Typography as="p" noWrap size="small" gutterBottom>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas,
-    lacus a dictum ullamcorper, sem nunc consequat nisl, ac convallis sapien
-    odio quis nibh. Pellentesque orci diam, rutrum eget vehicula sit amet,
-    vulputate molestie ipsum. Sed euismod neque massa, sed convallis magna
-    vestibulum in. Vestibulum vel auctor ante, quis ornare leo. Curabitur leo
-    lacus, auctor ut justo non, aliquet volutpat nunc. In interdum posuere
-    sapien, et dictum sapien sagittis vitae. Aliquam vehicula elit quis felis
-    pretium fermentum. Sed non quam in magna cursus laoreet eu eu purus.
-    Curabitur vestibulum velit vel diam euismod bibendum.
-  </Typography>
-  <Typography bold as="span" size="h1" number>
-    1,000
-  </Typography>
-  <Typography as="span" size="h1" number>
-    1,000
-  </Typography>
-  <Typography as="span" size="h2" number>
-    1,000
-  </Typography>
-</div>
-```

package/src/components/icons/ActionsIcon.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { IconContainer, IconContainerPropTypes } from '../IconContainer';
-
-export const ActionsIcon = (props) => (
-  <IconContainer {...props}>
-    <svg
-      width="38"
-      height="37"
-      viewBox="0 0 38 37"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M18.4785 34.5281L19.1002 34.8363L19.722 34.5281C33.4973 27.9248 33.2682 7.29155 33.2467 5.36221C33.2462 5.31036 33.2457 5.27202 33.2457 5.24782V4.16907L19.1002 0.316406L5.11016 4.16907L5.11016 5.24782C5.11016 5.27597 5.10944 5.32339 5.10844 5.38907C5.07667 7.48129 4.76351 28.1032 18.4785 34.5281ZM18.9447 31.446C8.99623 26.0522 8.06356 10.7957 8.06356 6.48067L18.9447 3.39854L29.9813 6.48067C29.9813 10.7957 28.8932 26.0522 18.9447 31.446Z"
-        className="fill"
-      />
-    </svg>
-  </IconContainer>
-);
-
-ActionsIcon.propTypes = {
-  ...IconContainerPropTypes,
-};

package/src/components/icons/AddIcon.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-export const AddIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
-  </svg>
-);

package/src/components/icons/Arrow.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-export const Arrow = ({
-  titleTag = "Arrow",
-  width = 30,
-  fill = "#000",
-  direction = "right"
-}) => {
-  const degree = {
-    left: 90,
-    right: -90,
-    up: -180,
-    down: 0
-  };
-  const arrowDirection = `translate(379 210), rotate(${degree[direction]})`;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="-944 188 34 34"
-      style={{
-        width
-      }}
-    >
-      {titleTag && <title>{titleTag}</title>}
-      <g transform="translate(-1323 -22)">
-        <g transform={arrowDirection} transform-origin="50% 50%">
-          <path
-            d="M2274.83-12244.371l-4.769-4.77a.5.5,0,0,1,0-.707.5.5,0,0,1,.354-.146.5.5,0,0,1,
-            .354.146l4.268,4.268V-12260a.5.5,0,0,1,.5-.5.5.5,0,0,1,.5.5v14.419l4.268-4.268a.5.5,
-            0,0,1,.354-.146.5.5,0,0,1,.354.146.5.5,0,0,1,0,.707l-4.769,4.77-.182.182-.02.02-.506.5Z"
-            fill={fill}
-            transform="translate(-2258.536 12269)"
-          />
-        </g>
-      </g>
-    </svg>
-  );
-};

package/src/components/icons/ArrowDown.jsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-export const ArrowDown = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path fill="#010101" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
-  </svg>
-);

package/src/components/icons/ArrowIcon.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-export const ArrowIcon = ({
-  width,
-  height,
-  fillColor,
-  strokeColor,
-  strokeWidth,
-  ...restProps
-}) => (
-  <svg
-    {...restProps}
-    width={width || 14}
-    height={height || 9}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12.414 5.189L9.0468 8.5555a.353.353 0 01-.499 0 .353.353 0 01-.1032-.2499.353.353 0 01.1031-.2499l3.0127-3.0127H1.3817a.353.353 0 110-.7058h10.1781L8.5471 1.3244a.353.353 0 01-.103-.25.353.353 0 01.103-.2498.353.353 0 01.499 0l3.3671 3.3663.1285.1285.0141.0141.353.3572-.4949.4984z"
-      fill={fillColor || "#FFF"}
-      stroke={strokeColor || "#333"}
-      strokeWidth={strokeWidth || ".7059"}
-      fillRule="evenodd"
-    />
-  </svg>
-);