@bitrise/bitkit 10.2.0 → 10.3.0-alpha-cleanup.1

package/src/Old/Button/Button.css

@@ -1,249 +0,0 @@
-:root {
-  --Button--border-small: 0.0625rem;
-  --Button--border-medium: 0.0625rem;
-  --Button--border-large: 0.125rem;
-  --Button--padding-small-vertical: calc(var(--size--x1) - var(--Button--border-small));
-  --Button--padding-small-horizontal: var(--size--x3);
-  --Button--padding-medium-vertical: calc(var(--size--x3) - var(--Button--border-medium));
-  --Button--padding-medium-horizontal: var(--size--x4);
-  --Button--padding-large-vertical: var(--size--x4);
-  --Button--padding-large-horizontal: var(--size--x6);
-  --Button--line-height: var(--size--x6);
-}
-
-.Button {
-  border: 0 solid transparent;
-  background-color: transparent;
-  line-height: var(--Button--line-height);
-  transition-property: border-color, background-color, color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Button:hover {
-  cursor: pointer;
-}
-
-.Button:disabled,
-.Button[disabled] {
-  cursor: not-allowed;
-}
-
-.Button--full-width {
-  width: 100%;
-}
-
-.Button--size-small {
-  padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
-  border-width: var(--Button--border-small);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-2);
-}
-
-.Button--size-medium {
-  padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
-  border-width: var(--Button--border-medium);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-3);
-}
-
-.Button--size-large {
-  padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
-  border-width: var(--Button--border-large);
-  border-radius: 0.375rem;
-  font-size: var(--fontSizes-4);
-}
-
-.Button--borderless {
-  border: none;
-  border-radius: 0;
-}
-
-/* stylelint-disable no-descending-specificity */
-.Button--level-primary,
-.Button--level-secondary {
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-}
-
-.Button--level-primary::before,
-.Button--level-primary::after,
-.Button--level-secondary::before,
-.Button--level-secondary::after {
-  content: '';
-  position: absolute;
-  top: -0.125rem;
-  right: -0.125rem;
-  bottom: -0.125rem;
-  left: -0.125rem;
-  z-index: -1;
-  transition-property: opacity;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Button--level-primary:disabled::before,
-.Button--level-primary:hover:not(:disabled)::before,
-.Button--level-primary[disabled]::before,
-.Button--level-primary:hover:not([disabled])::before,
-.Button--level-secondary:disabled::before,
-.Button--level-secondary:hover:not(:disabled)::before,
-.Button--level-secondary[disabled]::before,
-.Button--level-secondary:hover:not([disabled])::before {
-  opacity: 0;
-}
-
-.Button--level-primary:hover:not(:disabled)::after,
-.Button--level-primary:hover:not([disabled])::after,
-.Button--level-secondary:hover:not(:disabled)::after,
-.Button--level-secondary:hover:not([disabled])::after {
-  opacity: 1;
-}
-
-.Button--level-primary:disabled::after,
-.Button--level-primary:active:not(:disabled)::after,
-.Button--level-primary[disabled]::after,
-.Button--level-primary:active:not([disabled])::after,
-.Button--level-secondary:disabled::after,
-.Button--level-secondary:active:not(:disabled)::after,
-.Button--level-secondary[disabled]::after,
-.Button--level-secondary:active:not([disabled])::after {
-  opacity: 0;
-}
-
-.Button--level-primary {
-  border-color: var(--color-eggplant);
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-  font-weight: var(--font-weight--bold);
-}
-
-.Button--level-primary:disabled,
-.Button--level-primary[disabled] {
-  border-color: var(--color-gray--5);
-  background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
-}
-
-.Button--level-primary::before {
-  opacity: 1;
-  background-image: linear-gradient(to bottom, #6C0EB2, #450674);
-}
-
-.Button--level-primary::after {
-  opacity: 0;
-  background-image: linear-gradient(to bottom, #50167B, #3D125D);
-}
-
-.Button--level-secondary {
-  border-color: var(--color-gray--3);
-  background-color: var(--color-gray--2);
-  color: var(--color-grape--5);
-}
-
-.Button--level-secondary:disabled,
-.Button--level-secondary[disabled] {
-  border-color: var(--color-gray--3);
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-  color: var(--color-gray--5);
-}
-
-.Button--level-secondary:active:not(:disabled) {
-  border-color: var(--color-eggplant);
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}
-
-.Button--level-secondary::before {
-  opacity: 1;
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-}
-
-.Button--level-secondary::after {
-  content: none;
-  opacity: 0;
-}
-
-.Button--level-tertiary {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-grape--3);
-}
-
-.Button--level-tertiary:disabled,
-.Button--level-tertiary[disabled] {
-  color: var(--color-gray--5);
-}
-
-.Button--level-tertiary:hover:not(:disabled),
-.Button--level-tertiary:hover:not([disabled]) {
-  background-color: var(--color-grape--1);
-}
-
-.Button--level-tertiary:active:not(:disabled),
-.Button--level-tertiary:active:not([disabled]) {
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled),
-.Button--variant-danger.Button--level-primary:not([disabled]) {
-  border-color: #D4093C;
-  background-color: #C90032;
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled):active,
-.Button--variant-danger.Button--level-primary:not([disabled]):active {
-  border-color: #D4093C;
-  background-color: var(--color-red--5);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled)::before,
-.Button--variant-danger.Button--level-primary:not([disabled])::before {
-  background-image: linear-gradient(to bottom, #FF2158, #E41447);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled)::after,
-.Button--variant-danger.Button--level-primary:not([disabled])::after {
-  content: none;
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled),
-.Button--variant-danger.Button--level-secondary:not([disabled]) {
-  border-color: var(--color-gray--3);
-  background-color: var(--color-red--1);
-  color: var(--color-red--3);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled):hover,
-.Button--variant-danger.Button--level-secondary:not([disabled]):hover {
-  border-color: var(--color-red--2);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled):active,
-.Button--variant-danger.Button--level-secondary:not([disabled]):active {
-  border-color: #D4093C;
-  background-color: var(--color-red--5);
-  color: var(--color-gray--1);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled)::before,
-.Button--variant-danger.Button--level-secondary:not([disabled])::before {
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled)::after,
-.Button--variant-danger.Button--level-secondary:not([disabled])::after {
-  content: none;
-}
-
-.Buttons--joined .Button:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.Buttons--joined .Button:not(:last-child) {
-  border-right: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}

package/src/Old/Button/Button.test.tsx

@@ -1,29 +0,0 @@
-import { shallow } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
-import Button from './Button';
-
-describe('Button', () => {
-  test('default template', () => {
-    expect(shallowToJson(shallow(<Button>Content</Button>))).toMatchSnapshot();
-  });
-
-  test('borderless', () => {
-    expect(shallowToJson(shallow(<Button borderless>Content</Button>))).toMatchSnapshot();
-  });
-
-  test('fullWidth', () => {
-    expect(shallowToJson(shallow(<Button fullWidth>Content</Button>))).toMatchSnapshot();
-  });
-
-  test('level', () => {
-    expect(shallowToJson(shallow(<Button level="primary">Content</Button>))).toMatchSnapshot();
-  });
-
-  test('size', () => {
-    expect(shallowToJson(shallow(<Button size="small">Content</Button>))).toMatchSnapshot();
-  });
-
-  test('variant', () => {
-    expect(shallowToJson(shallow(<Button variant="danger">Content</Button>))).toMatchSnapshot();
-  });
-});

package/src/Old/Button/Button.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Button.css';
-import ButtonSize from './ButtonSize';
-
-export interface Props extends FlexProps {
-  /**
-   * Removes the borders from the Button, useful for when used inside a w
-   * rapping container with custom borders
-   */
-  borderless?: boolean;
-  /**
-   * Allows the Button to fill the container space rather than shrinking
-   * down to the content
-   */
-  fullWidth?: boolean;
-  /** Sets the visual importance of the Button. */
-  level?: 'primary' | 'secondary' | 'tertiary';
-  /**
-   * Sets the size of the Button. Small allows the Button to fit
-   * into smaller spaces, while large will help the button stand
-   * out on a page with lots of space.
-   */
-  size?: ButtonSize;
-  /**
-   * Variant is another prop that changes the styles to indicate it's usage.
-   * For example "danger" is to let the user know this button performs a
-   * potentionally dangerous action.
-   */
-  variant?: 'danger';
-}
-
-/** Standard Button component */
-const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
-
-  const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames(className, 'Button', `Button--level-${level}`, `Button--size-${size}`, {
-    'Button--borderless': borderless,
-    'Button--full-width': fullWidth,
-    [`Button--variant-${variant}`]: variant,
-  });
-
-  return (
-    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap={gap} />
-  );
-};
-
-Button.defaultProps = {
-  level: 'secondary',
-  size: 'medium',
-};
-
-export default Button;

package/src/Old/Button/ButtonSize.ts

@@ -1,3 +0,0 @@
-type ButtonSize = 'small' | 'medium' | 'large';
-
-export default ButtonSize;

package/src/Old/Button/Buttons.test.tsx

@@ -1,42 +0,0 @@
-import { shallow } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
-import Button from './Button';
-import Buttons from './Buttons';
-
-describe('Buttons', () => {
-  test('default template', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('fullWidth', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons fullWidth>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('joined', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons joined>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-});

package/src/Old/Button/Buttons.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-
-export interface Props extends FlexProps {
-  /** */
-  fullWidth?: boolean;
-  gap?: FlexProps['gap'];
-  /** Connects any child components, when not provided they will be spaced out a little bit. */
-  joined?: boolean;
-}
-
-/** Parent component to any multiples of Buttons. */
-const Buttons: React.FunctionComponent<Props> = (props: Props) => {
-  const { fullWidth, gap, joined, ...rest } = props;
-  const classes = classnames('Buttons', {
-    'Buttons--joined': joined,
-  });
-
-  return (
-    <Flex
-      {...rest}
-      className={classes}
-      direction={fullWidth ? 'vertical' : 'horizontal'}
-      gap={joined && !fullWidth ? undefined : gap}
-    />
-  );
-};
-
-Buttons.defaultProps = {
-  gap: 'x2',
-};
-
-export default Buttons;

package/src/Old/Button/__snapshots__/Button.test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button borderless 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--borderless"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button default template 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button fullWidth 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--full-width"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button level 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-primary Button--size-medium"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button size 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-small"
-  direction="horizontal"
-  gap="x1"
->
-  Content
-</Flex>
-`;
-
-exports[`Button variant 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--variant-danger"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;

package/src/Old/Button/__snapshots__/Buttons.test.tsx.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Buttons default template 1`] = `
-<Flex
-  className="Buttons"
-  direction="horizontal"
-  gap="x2"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;
-
-exports[`Buttons fullWidth 1`] = `
-<Flex
-  className="Buttons"
-  direction="vertical"
-  gap="x2"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;
-
-exports[`Buttons joined 1`] = `
-<Flex
-  className="Buttons Buttons--joined"
-  direction="horizontal"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;

package/src/Old/ExternalLink/ExternalLink.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Link, { Props as LinkProps } from '../Link/Link';
-
-export type Props = LinkProps;
-
-const ExternalLink: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, ...rest } = props;
-
-  return (
-    <Link {...rest}>
-      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
-        <Flex>{children}</Flex>
-
-        <Flex>
-          <Icon name="OpenInBrowser" />
-        </Flex>
-      </Flex>
-    </Link>
-  );
-};
-
-export default ExternalLink;

package/src/Old/Icon/Icon.css

@@ -1,4 +0,0 @@
-.Icon {
-  display: block;
-  fill: currentColor;
-}

package/src/Old/Icon/Icon.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import { IconMap } from './tsx';
-import type { TypeIconName } from './tsx';
-import './Icon.css';
-
-export type { TypeIconName };
-
-export interface Props extends BaseProps {
-  /** Name of the Icon to display */
-  name: TypeIconName;
-  /** Any CSS unit sizing for the Icon */
-  size?: string;
-}
-
-/** Iconography component that output as crisp SVG icon. */
-const Icon: React.FunctionComponent<Props> = (props: Props) => {
-  const { name, size, ...rest } = props;
-  const IconSVG = IconMap[name];
-
-  return (
-    <Base {...rest} Component="svg" className="Icon" height={size} viewBox="0 0 24 24" width={size}>
-      <IconSVG height="100%" width="100%" />
-    </Base>
-  );
-};
-
-Icon.defaultProps = {
-  size: '1.5rem',
-};
-
-export default Icon;

package/src/Old/Icon/tsx/IconsAddOns.tsx

@@ -1,14 +0,0 @@
-// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
-import * as React from 'react';
-
-const SvgIconsAddOns = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M20 17.767a.502.502 0 0 1-.25.434l-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73a.504.504 0 0 1-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73A.504.504 0 0 1 4 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 0 1 .499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 0 1-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 0 1-.25.432l-3.001 1.733h-.001a.496.496 0 0 1-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 0 1-.25-.432V6.23zm12.25 5.754-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 0 0-1.25-2.165l-2.999-1.731a2.505 2.505 0 0 0-2.501-.001L7.749 4.067A2.51 2.51 0 0 0 6.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 0 0 2 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0 0 22 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
-    />
-  </svg>
-);
-
-export default SvgIconsAddOns;

package/src/Old/Icon/tsx/IconsAddOnsColorTuorqouise.tsx

@@ -1,20 +0,0 @@
-// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
-import * as React from 'react';
-
-const SvgIconsAddOnsColorTuorqouise = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
-    <g fill="#0DD3C5" fillRule="evenodd">
-      <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
-      <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
-    </g>
-  </svg>
-);
-
-export default SvgIconsAddOnsColorTuorqouise;

package/src/Old/Icon/tsx/IconsAddOnsColorViolet.tsx

@@ -1,20 +0,0 @@
-// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
-import * as React from 'react';
-
-const SvgIconsAddOnsColorViolet = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
-    <g fill="#990FC3" fillRule="evenodd">
-      <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
-      <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
-    </g>
-  </svg>
-);
-
-export default SvgIconsAddOnsColorViolet;

package/src/Old/Icon/tsx/IconsAddOnsWhite.tsx

@@ -1,20 +0,0 @@
-// THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
-import * as React from 'react';
-
-const SvgIconsAddOnsWhite = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 24 24">
-    <g fill="#FFF" fillRule="evenodd">
-      <path
-        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-        opacity={0.8}
-      />
-      <path
-        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-        opacity={0.5}
-      />
-      <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
-    </g>
-  </svg>
-);
-
-export default SvgIconsAddOnsWhite;