decap-cms-ui-default 2.16.0-beta.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "decap-cms-ui-default",
+  "description": "Default UI components for Decap CMS.",
+  "version": "2.16.0-beta.0",
+  "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-ui-default",
+  "bugs": "https://github.com/decaporg/decap-cms/issues",
+  "license": "MIT",
+  "module": "dist/esm/index.js",
+  "main": "dist/decap-cms-ui-default.js",
+  "keywords": [
+    "decap-cms"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "develop": "yarn build:esm --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+  },
+  "dependencies": {
+    "react-aria-menubutton": "^7.0.0",
+    "react-toggled": "^1.1.2",
+    "react-transition-group": "^4.4.5"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.4 || ^17.0.0"
+  },
+  "gitHead": "1bdf716e5655bf088a343cd90210a2d361a9db52"
+}

package/src/AuthenticationPage.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+
+import Icon from './Icon';
+import { buttons, shadows } from './styles';
+import GoBackButton from './GoBackButton';
+
+const StyledAuthenticationPage = styled.section`
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 50px;
+  height: 100vh;
+`;
+
+const CustomIconWrapper = styled.span`
+  width: 300px;
+  height: auto;
+`;
+
+const DecapLogoIcon = styled(Icon)`
+  height: auto;
+`;
+
+const NetlifyCreditIcon = styled(Icon)`
+  color: #c4c6d2;
+  position: absolute;
+  bottom: 10px;
+`;
+
+function CustomLogoIcon({ url }) {
+  return (
+    <CustomIconWrapper>
+      <img src={url} alt="Logo" />
+    </CustomIconWrapper>
+  );
+}
+
+function renderPageLogo(logoUrl) {
+  if (logoUrl) {
+    return <CustomLogoIcon url={logoUrl} />;
+  }
+  return <DecapLogoIcon size="300px" type="decap-cms" />;
+}
+
+const LoginButton = styled.button`
+  ${buttons.button};
+  ${shadows.dropDeep};
+  ${buttons.default};
+  ${buttons.gray};
+  &[disabled] {
+    ${buttons.disabled};
+  }
+
+  padding: 0 12px;
+  margin-top: 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+const TextButton = styled.button`
+  ${buttons.button};
+  ${buttons.default};
+  ${buttons.grayText};
+
+  margin-top: 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+function AuthenticationPage({
+  onLogin,
+  loginDisabled,
+  loginErrorMessage,
+  renderButtonContent,
+  renderPageContent,
+  logoUrl,
+  siteUrl,
+  t,
+}) {
+  return (
+    <StyledAuthenticationPage>
+      {renderPageLogo(logoUrl)}
+      {loginErrorMessage ? <p>{loginErrorMessage}</p> : null}
+      {!renderPageContent
+        ? null
+        : renderPageContent({ LoginButton, TextButton, showAbortButton: !siteUrl })}
+      {!renderButtonContent ? null : (
+        <LoginButton disabled={loginDisabled} onClick={onLogin}>
+          {renderButtonContent()}
+        </LoginButton>
+      )}
+      {siteUrl && <GoBackButton href={siteUrl} t={t} />}
+      {logoUrl ? <NetlifyCreditIcon size="100px" type="decap-cms" /> : null}
+    </StyledAuthenticationPage>
+  );
+}
+
+AuthenticationPage.propTypes = {
+  onLogin: PropTypes.func,
+  logoUrl: PropTypes.string,
+  siteUrl: PropTypes.string,
+  loginDisabled: PropTypes.bool,
+  loginErrorMessage: PropTypes.node,
+  renderButtonContent: PropTypes.func,
+  renderPageContent: PropTypes.func,
+  t: PropTypes.func.isRequired,
+};
+
+export default AuthenticationPage;

package/src/Dropdown.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
+
+import { colors, buttons, components, zIndex } from './styles';
+import Icon from './Icon';
+
+const StyledWrapper = styled(Wrapper)`
+  position: relative;
+  font-size: 14px;
+  user-select: none;
+`;
+
+const StyledDropdownButton = styled(DropdownButton)`
+  ${buttons.button};
+  ${buttons.default};
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+
+  &:after {
+    ${components.caretDown};
+    content: '';
+    display: block;
+    position: absolute;
+    top: 16px;
+    right: 10px;
+    color: currentColor;
+  }
+`;
+
+const DropdownList = styled.ul`
+  ${components.dropdownList};
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  z-index: ${zIndex.zIndex299};
+
+  ${props => css`
+    width: ${props.width};
+    top: ${props.top};
+    left: ${props.position === 'left' ? 0 : 'auto'};
+    right: ${props.position === 'right' ? 0 : 'auto'};
+  `};
+`;
+
+function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
+  return (
+    <MenuItem
+      css={css`
+        ${components.dropdownItem};
+        &:focus,
+        &:active,
+        &:not(:focus),
+        &:not(:active) {
+          background-color: ${isActive ? colors.activeBackground : 'inherit'};
+          color: ${isActive ? colors.active : '#313d3e'};
+          ${isCheckedItem ? 'display: flex; justify-content: start' : ''};
+        }
+        &:hover {
+          color: ${colors.active};
+          background-color: ${colors.activeBackground};
+        }
+        &.active {
+          text-decoration: underline;
+        }
+      `}
+      {...props}
+    />
+  );
+}
+
+const MenuItemIconContainer = styled.div`
+  flex: 1 0 32px;
+  text-align: right;
+  position: relative;
+  top: ${props => (props.iconSmall ? '0' : '2px')};
+`;
+
+function Dropdown({
+  closeOnSelection = true,
+  renderButton,
+  dropdownWidth = 'auto',
+  dropdownPosition = 'left',
+  dropdownTopOverlap = '0',
+  className,
+  children,
+}) {
+  return (
+    <StyledWrapper
+      closeOnSelection={closeOnSelection}
+      onSelection={handler => handler()}
+      className={className}
+    >
+      {renderButton()}
+      <Menu>
+        <DropdownList width={dropdownWidth} top={dropdownTopOverlap} position={dropdownPosition}>
+          {children}
+        </DropdownList>
+      </Menu>
+    </StyledWrapper>
+  );
+}
+
+Dropdown.propTypes = {
+  renderButton: PropTypes.func.isRequired,
+  dropdownWidth: PropTypes.string,
+  dropdownPosition: PropTypes.string,
+  dropdownTopOverlap: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+function DropdownItem({ label, icon, iconDirection, iconSmall, isActive, onClick, className }) {
+  return (
+    <StyledMenuItem value={onClick} isActive={isActive} className={className}>
+      <span>{label}</span>
+      {icon ? (
+        <MenuItemIconContainer iconSmall={iconSmall}>
+          <Icon type={icon} direction={iconDirection} size={iconSmall ? 'xsmall' : 'small'} />
+        </MenuItemIconContainer>
+      ) : null}
+    </StyledMenuItem>
+  );
+}
+
+DropdownItem.propTypes = {
+  label: PropTypes.string,
+  icon: PropTypes.string,
+  iconDirection: PropTypes.string,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+};
+
+function StyledDropdownCheckbox({ checked, id }) {
+  return (
+    <input
+      readOnly
+      type="checkbox"
+      css={css`
+        margin-right: 10px;
+      `}
+      checked={checked}
+      id={id}
+    />
+  );
+}
+
+function DropdownCheckedItem({ label, id, checked, onClick }) {
+  return (
+    <StyledMenuItem isCheckedItem={true} isActive={checked} onClick={onClick}>
+      <StyledDropdownCheckbox checked={checked} id={id} />
+      <span htmlFor={id}>{label}</span>
+    </StyledMenuItem>
+  );
+}
+
+DropdownCheckedItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export {
+  Dropdown as default,
+  DropdownItem,
+  DropdownCheckedItem,
+  DropdownButton,
+  StyledDropdownButton,
+};

package/src/FieldLabel.js

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+
+import { colors, colorsRaw, transitions, text } from './styles';
+
+const stateColors = {
+  default: {
+    background: colors.textFieldBorder,
+    text: colors.controlLabel,
+  },
+  active: {
+    background: colors.active,
+    text: colors.textLight,
+  },
+  error: {
+    background: colors.errorText,
+    text: colorsRaw.white,
+  },
+};
+
+function getStateColors({ isActive, hasErrors }) {
+  if (hasErrors) return stateColors.error;
+  if (isActive) return stateColors.active;
+  return stateColors.default;
+}
+
+const FieldLabel = styled.label`
+  ${text.fieldLabel};
+  color: ${props => getStateColors(props).text};
+  background-color: ${props => getStateColors(props).background};
+  display: inline-block;
+  border: 0;
+  border-radius: 3px 3px 0 0;
+  padding: 3px 6px 2px;
+  margin: 0;
+  transition: all ${transitions.main};
+  position: relative;
+
+  /**
+   * Faux outside curve into top of input
+   */
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -4px;
+    height: 100%;
+    width: 4px;
+    background-color: inherit;
+  }
+
+  &:after {
+    border-bottom-left-radius: 3px;
+    background-color: #fff;
+  }
+`;
+
+export default FieldLabel;

package/src/GoBackButton.js

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { colorsRaw } from './styles.js';
+import Icon from './Icon';
+
+const GoBackButtonStyle = styled.a`
+  display: flex;
+  align-items: center;
+
+  margin-top: 50px;
+  padding: 10px;
+
+  font-size: 14px;
+`;
+
+const ButtonText = styled.p`
+  color: ${colorsRaw.gray};
+  margin: 0 10px;
+`;
+
+export default class GoBackButton extends React.Component {
+  static propTypes = {
+    href: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { href, t } = this.props;
+
+    return (
+      <GoBackButtonStyle href={href}>
+        <Icon type="arrow" size="small" />
+        <ButtonText>{t('ui.default.goBackToSite')}</ButtonText>
+      </GoBackButtonStyle>
+    );
+  }
+}

package/src/Icon/icons.js

@@ -0,0 +1,44 @@
+import mapValues from 'lodash/mapValues';
+
+import images from './images/_index';
+
+/**
+ * This module outputs icon objects with the following shape:
+ *
+ * {
+ *   image: <svg>...</svg>,
+ *   ...props
+ * }
+ *
+ * `props` here are config properties defined in this file for specific icons.
+ * For example, an icon may face a specific direction, and the Icon component
+ * accepts a `direction` prop to rotate directional icons, which relies on
+ * defining the default direction here.
+ */
+
+/**
+ * Configuration for individual icons.
+ */
+const config = {
+  arrow: {
+    direction: 'left',
+  },
+  chevron: {
+    direction: 'down',
+  },
+  'chevron-double': {
+    direction: 'down',
+  },
+};
+
+/**
+ * Map icon definition objects - imported object of images simply maps the icon
+ * name to the raw svg, so we move that to the `image` property of the
+ * definition object and set any additional configured properties for each icon.
+ */
+const icons = mapValues(images, (image, name) => {
+  const props = config[name] || {};
+  return { image, ...props };
+});
+
+export default icons;

package/src/Icon/images/_index.js

@@ -0,0 +1,100 @@
+import iconAdd from './add.svg';
+import iconAddWith from './add-with.svg';
+import iconArrow from './arrow.svg';
+import iconAzure from './azure.svg';
+import iconBitbucket from './bitbucket.svg';
+import iconBold from './bold.svg';
+import iconCheck from './check.svg';
+import iconChevron from './chevron.svg';
+import iconChevronDouble from './chevron-double.svg';
+import iconCircle from './circle.svg';
+import iconClose from './close.svg';
+import iconCode from './code.svg';
+import iconCodeBlock from './code-block.svg';
+import iconDragHandle from './drag-handle.svg';
+import iconEye from './eye.svg';
+import iconFolder from './folder.svg';
+import iconGithub from './github.svg';
+import iconGitlab from './gitlab.svg';
+import iconGrid from './grid.svg';
+import iconH1 from './h1.svg';
+import iconH2 from './h2.svg';
+import iconHOptions from './h-options.svg';
+import iconHome from './home.svg';
+import iconImage from './image.svg';
+import iconInfoCircle from './info-circle.svg';
+import iconItalic from './italic.svg';
+import iconLink from './link.svg';
+import iconList from './list.svg';
+import iconListBulleted from './list-bulleted.svg';
+import iconListNumbered from './list-numbered.svg';
+import iconMarkdown from './markdown.svg';
+import iconMedia from './media.svg';
+import iconMediaAlt from './media-alt.svg';
+import iconDecap from './decap.svg';
+import iconNewTab from './new-tab.svg';
+import iconPage from './page.svg';
+import iconPages from './pages.svg';
+import iconPagesAlt from './pages-alt.svg';
+import iconQuote from './quote.svg';
+import iconRefresh from './refresh.svg';
+import iconScroll from './scroll.svg';
+import iconSearch from './search.svg';
+import iconSettings from './settings.svg';
+import iconUser from './user.svg';
+import iconWorkflow from './workflow.svg';
+import iconWrite from './write.svg';
+
+const iconix = iconAdd;
+
+const images = {
+  add: iconix,
+  'add-with': iconAddWith,
+  arrow: iconArrow,
+  azure: iconAzure,
+  bitbucket: iconBitbucket,
+  bold: iconBold,
+  check: iconCheck,
+  chevron: iconChevron,
+  'chevron-double': iconChevronDouble,
+  circle: iconCircle,
+  close: iconClose,
+  code: iconCode,
+  'code-block': iconCodeBlock,
+  'drag-handle': iconDragHandle,
+  eye: iconEye,
+  folder: iconFolder,
+  github: iconGithub,
+  gitlab: iconGitlab,
+  grid: iconGrid,
+  h1: iconH1,
+  h2: iconH2,
+  hOptions: iconHOptions,
+  home: iconHome,
+  image: iconImage,
+  'info-circle': iconInfoCircle,
+  italic: iconItalic,
+  link: iconLink,
+  list: iconList,
+  'list-bulleted': iconListBulleted,
+  'list-numbered': iconListNumbered,
+  markdown: iconMarkdown,
+  media: iconMedia,
+  'media-alt': iconMediaAlt,
+  decap: iconDecap,
+  'decap-cms': iconDecap,
+  'new-tab': iconNewTab,
+  page: iconPage,
+  pages: iconPages,
+  'pages-alt': iconPagesAlt,
+  quote: iconQuote,
+  refresh: iconRefresh,
+  scroll: iconScroll,
+  search: iconSearch,
+  settings: iconSettings,
+  user: iconUser,
+  workflow: iconWorkflow,
+  write: iconWrite,
+};
+
+export default images;

package/src/Icon/images/add-with.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" fill-rule="evenodd" d="M403.5,22 L400,18 L407,18 L403.5,22 Z M399.5,16.25 L396.75,16.25 L396.75,16.25 C396.473858,16.25 396.25,16.4738576 396.25,16.75 L396.25,19.5 C396.25,19.7761424 396.026142,20 395.75,20 L394.25,20 C393.973858,20 393.75,19.7761424 393.75,19.5 L393.75,16.75 C393.75,16.4738576 393.526142,16.25 393.25,16.25 L390.5,16.25 C390.223858,16.25 390,16.0261424 390,15.75 L390,14.25 C390,13.9738576 390.223858,13.75 390.5,13.75 L393.25,13.75 L393.25,13.75 C393.526142,13.75 393.75,13.5261424 393.75,13.25 L393.75,10.5 L393.75,10.5 C393.75,10.2238576 393.973858,10 394.25,10 L395.75,10 C396.026142,10 396.25,10.2238576 396.25,10.5 L396.25,13.25 C396.25,13.5261424 396.473858,13.75 396.75,13.75 L399.5,13.75 C399.776142,13.75 400,13.9738576 400,14.25 L400,15.75 C400,16.0261424 399.776142,16.25 399.5,16.25 Z" transform="translate(-387 -6)"/></svg>

package/src/Icon/images/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-add@2x-a" d="M19,14 L15,14 L15,14 C14.4477153,14 14,14.4477153 14,15 L14,19 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,15 L10,15 C10,14.4477153 9.55228475,14 9,14 L5,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 L4,11 C4,10.4477153 4.44771525,10 5,10 L9,10 L9,10 C9.55228475,10 10,9.55228475 10,9 L10,5 L10,5 C10,4.44771525 10.4477153,4 11,4 L13,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,9 L14,9 C14,9.55228475 14.4477153,10 15,10 L19,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 L20,13 C20,13.5522847 19.5522847,14 19,14 Z"/></svg>

package/src/Icon/images/arrow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><polygon id="Shape" fill="#313D3E" points="10.5060636 19.9155 12.4088613 17.9626642 7.66471461 13.2928984 21.3102222 13.2928984 21.3102222 10.5502731 7.66471461 10.5502731 12.4088613 5.86833577 10.5060636 3.9155 2.55677783 11.9148238"/></svg>

package/src/Icon/images/azure.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="0 0 26 26"
+   height="26px"
+   width="26px">
+  <path
+     d="M 14.015456,4.2171913 7.0990002,9.9261887 1.5,19.751857 l 5.2698338,0.05491 z m 0.768596,1.2626133 -3.019209,8.0141944 5.599244,6.312735 L 6.6049864,21.727927 24.5,21.782809 Z" id="Shape" fill="#2684FF" fill-rule="nonzero" />
+</svg>

package/src/Icon/images/bitbucket.svg

@@ -0,0 +1,3 @@
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1">
+  <path d="M2.77580579,3.0000546 C2.58222841,2.99755793 2.39745454,3.08078757 2.27104968,3.2274172 C2.14464483,3.37404683 2.08954809,3.5690671 2.12053915,3.76016391 L4.90214605,20.6463853 C4.97368482,21.0729296 5.34116371,21.38653 5.77365069,21.3901129 L19.1181559,21.3901129 C19.4427702,21.3942909 19.7215068,21.1601522 19.7734225,20.839689 L22.5550294,3.76344024 C22.5860205,3.57234343 22.5309237,3.37732317 22.4045189,3.23069353 C22.278114,3.0840639 22.0933402,3.00083426 21.8997628,3.00333094 L2.77580579,3.0000546 Z M14.488697,15.2043958 L10.2294639,15.2043958 L9.07619457,9.17921905 L15.520742,9.17921905 L14.488697,15.2043958 Z" id="Shape" fill="#2684FF" fill-rule="nonzero"/>
+</svg>

package/src/Icon/images/bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M13.2,15.8190158 C14.012093,15.24159 14.5813953,14.2935774 14.5813953,13.4145112 C14.5813953,11.4667763 13.1162791,9.96719284 11.2325581,9.96719284 L6,9.96719284 L6,22.0328072 L11.8939535,22.0328072 C13.6437209,22.0328072 15,20.5676969 15,18.766473 C15,17.456492 14.28,16.3361135 13.2,15.8190158 Z M8.10791016,12.1217668 L10.9573975,12.1217668 C11.7457556,12.1217668 12.3821411,12.6991927 12.3821411,13.4145112 C12.3821411,14.1298298 11.7457556,14.7072556 10.9573975,14.7072556 L8.10791016,14.7072556 L8.10791016,12.1217668 Z M11.432312,19.8782332 L8.10791016,19.8782332 L8.10791016,17.2927444 L11.432312,17.2927444 C12.2206702,17.2927444 12.8570557,17.8701702 12.8570557,18.5854888 C12.8570557,19.3008073 12.2206702,19.8782332 11.432312,19.8782332 Z" transform="translate(0 -6)"/></svg>

package/src/Icon/images/check.svg

@@ -0,0 +1 @@
+<svg viewBox="-1 -2 16 16"><path d="M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z"/></svg>

package/src/Icon/images/chevron-double.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24">
+  <g id="caret" transform="translate(2.000000, 3.000000)" fill-rule="nonzero">
+      <polygon points="3.1231456 0.32943568 0.86323447 2.46718624 9.5186981 11.6172615 18.8632345 2.5123409 16.6923073 0.28428102 9.6090173 7.1859389"/>
+  </g>
+  <g id="caret" transform="translate(2.000000, 10.000000)" fill-rule="nonzero">
+      <polygon points="3.1231456 0.32943568 0.86323447 2.46718624 9.5186981 11.6172615 18.8632345 2.5123409 16.6923073 0.28428102 9.6090173 7.1859389"/>
+  </g>
+</svg>

package/src/Icon/images/chevron.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><polygon points="5.1231456 6.32943568 2.86323447 8.46718624 11.5186981 17.6172615 20.8632345 8.5123409 18.6923073 6.28428102 11.6090173 13.1859389"/></svg>

package/src/Icon/images/circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><circle id="icon-circle@2x-a" cx="12" cy="12" r="4"/></svg>

package/src/Icon/images/close.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><polygon points="11.915701 9.96082949 6.28206042 4.34447005 4.39841986 6.40092166 10.0320604 12.0172811 4.41570097 17.6336406 6.26477931 19.65553 11.8811388 14.0391705 17.4974982 19.6382488 19.3811388 17.5990783 13.7647793 12 19.3984199 6.36635945 17.5320604 4.34447005"/></svg>

package/src/Icon/images/code-block.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M253.102564,19.3198903 L250.051331,16 L253.102564,12.6801097 L251.778331,11.6697083 L247.798462,16 L251.778331,20.3302917 L253.102564,19.3198903 Z M248,10 L260,10 C261.104569,10 262,10.8954305 262,12 L262,20 C262,21.1045695 261.104569,22 260,22 L248,22 C246.895431,22 246,21.1045695 246,20 L246,12 L246,12 C246,10.8954305 246.895431,10 248,10 L248,10 Z M254.927099,19.3198903 L256.144121,20.2553711 L260.12399,15.9250793 L256.144121,11.5947876 L254.927099,12.6801097 L257.978333,16 L254.927099,19.3198903 Z" transform="translate(-243 -6)"/></svg>

package/src/Icon/images/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M75,20.6 L70.6486486,16 L75,11.4 L73.6756757,10 L68,16 L73.6756757,22 L75,20.6 Z M78,20.6 L82.3513514,16 L78,11.4 L79.3243243,10 L85,16 L79.3243243,22 L78,20.6 L78,20.6 Z" transform="translate(-66 -6)"/></svg>

package/src/Icon/images/decap.svg

@@ -0,0 +1,9 @@
+<svg width="335" height="90" viewBox="0 0 335 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.73 0.149188L0 2.94919L3.67 43.1592L23.7 41.3292L21.71 19.4692L32.42 18.4892C43.03 17.5192 51.56 26.0192 52.71 38.6792L72.38 36.8892C70.34 14.7192 51.64 -1.75081 30.73 0.149188Z" fill="#FF0082" class="no-fill"/>
+<path d="M73.61 49.5091C73.61 62.2291 65.88 71.4591 55.24 71.4591H44.49V49.4691H24.38V89.8891H55.24C76.26 89.8891 93.36 71.7791 93.36 49.5091C93.36 49.4991 93.36 49.4891 93.36 49.4691H73.61C73.61 49.4691 73.61 49.4891 73.61 49.5091Z" fill="#FF0082" class="no-fill"/>
+<path d="M131.65 23.7092H151.66C166.07 23.7092 175.95 32.7992 175.95 46.7692C175.95 60.7392 166.07 69.8292 151.66 69.8292H131.65V23.7092ZM151.16 61.0592C159.91 61.0592 165.63 55.5892 165.63 46.7692C165.63 37.9492 159.9 32.4792 151.16 32.4792H141.85V61.0692H151.16V61.0592Z" fill="black" class="no-fill"/>
+<path d="M207.61 58.6891L212.83 64.6191C209.68 68.3691 204.96 70.3491 198.86 70.3491C187.16 70.3491 179.54 62.6391 179.54 52.0991C179.54 41.5591 187.22 33.8491 197.66 33.8491C207.22 33.8491 215.09 40.4391 215.15 51.7691L190.11 56.8391C191.56 60.3291 194.7 62.1091 199.11 62.1091C202.7 62.1091 205.28 60.9891 207.61 58.6791V58.6891ZM189.17 51.0491L205.66 47.6891C204.72 44.0691 201.76 41.6291 197.67 41.6291C192.76 41.6291 189.36 45.0591 189.17 51.0491Z" fill="black" class="no-fill"/>
+<path d="M218.25 52.0991C218.25 41.4291 226.12 33.8491 237.13 33.8491C244.24 33.8491 249.84 37.0791 252.3 42.8691L244.69 47.1491C242.86 43.7891 240.16 42.2791 237.08 42.2791C232.11 42.2791 228.21 45.8991 228.21 52.0891C228.21 58.2791 232.11 61.8991 237.08 61.8991C240.16 61.8991 242.87 60.4491 244.69 57.0291L252.3 61.3791C249.85 67.0491 244.25 70.3391 237.13 70.3391C226.12 70.3391 218.25 62.7591 218.25 52.0891V52.0991Z" fill="black" class="no-fill"/>
+<path d="M290.93 34.3791V69.8191H281.55V65.7391C279.1 68.8391 275.51 70.3491 270.98 70.3491C261.41 70.3491 254.05 63.2391 254.05 52.0991C254.05 40.9591 261.41 33.8491 270.98 33.8491C275.13 33.8491 278.66 35.2291 281.11 38.1291V34.3791H290.93ZM281.3 52.0991C281.3 45.9691 277.52 42.2891 272.68 42.2891C267.84 42.2891 264 45.9791 264 52.0991C264 58.2191 267.78 61.9091 272.68 61.9091C277.58 61.9091 281.3 58.2191 281.3 52.0991Z" fill="black" class="no-fill"/>
+<path d="M334.54 52.0991C334.54 63.2291 327.18 70.3491 317.68 70.3491C313.46 70.3491 310 68.9691 307.49 66.0691V82.5991H297.67V34.3791H307.05V38.4591C309.5 35.3591 313.15 33.8491 317.68 33.8491C327.18 33.8491 334.54 40.9591 334.54 52.0991ZM324.6 52.0991C324.6 45.9691 320.89 42.2891 315.98 42.2891C311.07 42.2891 307.36 45.9791 307.36 52.0991C307.36 58.2191 311.07 61.9091 315.98 61.9091C320.89 61.9091 324.6 58.2191 324.6 52.0991Z" fill="black" class="no-fill"/>
+</svg>

package/src/Icon/images/drag-handle.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M3,15 L3,13 L21,13 L21,15 L3,15 Z M3,11 L3,9 L21,9 L21,11 L3,11 Z"/></svg>

package/src/Icon/images/eye.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M22.5567568,11.4918919 C21.1297297,10 16.8486486,6 12.3945946,6 C7.59459459,6 3.55135135,10 2.21081081,11.4918919 C1.92972973,11.7945946 1.92972973,12.2702703 2.21081081,12.572973 C3.55135135,14.0432432 7.61621622,18 12.3945946,18 C17.1513514,18 21.1945946,14.0864865 22.5567568,12.5945946 C22.8594595,12.2918919 22.8594595,11.7945946 22.5567568,11.4918919 Z M12.4162162,16.1837838 C10.1243243,16.1837838 8.26486486,14.3243243 8.26486486,12.0324324 C8.26486486,9.74054054 10.1243243,7.88108108 12.4162162,7.88108108 C14.7081081,7.88108108 16.5675676,9.74054054 16.5675676,12.0324324 C16.5675676,14.3243243 14.6864865,16.1837838 12.4162162,16.1837838 Z M12.4162162,13.3945946 C13.1685176,13.3945946 13.7783784,12.7847338 13.7783784,12.0324324 C13.7783784,11.280131 13.1685176,10.6702703 12.4162162,10.6702703 C11.6639148,10.6702703 11.0540541,11.280131 11.0540541,12.0324324 C11.0540541,12.7847338 11.6639148,13.3945946 12.4162162,13.3945946 Z"/></svg>

package/src/Icon/images/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path id="icon-folder@2x-a" d="M10,5 L5,5 L5,5 C3.8954305,5 3,5.8954305 3,7 L3,17 L3,17 C3,18.1045695 3.8954305,19 5,19 L19,19 L19,19 C20.1045695,19 21,18.1045695 21,17 L21,9 L21,9 C21,7.8954305 20.1045695,7 19,7 L12,7 L10,5 Z"/></svg>

package/src/Icon/images/github.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>

package/src/Icon/images/gitlab.svg

@@ -0,0 +1 @@
+<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M22.616 14.971L21.52 11.5l-2.173-6.882a.37.37 0 0 0-.71 0l-2.172 6.882H9.252L7.079 4.617a.37.37 0 0 0-.71 0l-2.172 6.882L3.1 14.971c-.1.317.01.664.27.86l9.487 7.094 9.487-7.094a.781.781 0 0 0 .27-.86" fill="#FC6D26"/><path d="M12.858 22.925L16.465 11.5H9.251z" fill="#E24329"/><path d="M12.858 22.925L9.251 11.5H4.197z" fill="#FC6D26"/><path d="M4.197 11.499L3.1 14.971c-.1.317.01.664.27.86l9.487 7.094L4.197 11.5z" fill="#FCA326"/><path d="M4.197 11.499H9.25L7.08 4.617a.37.37 0 0 0-.71 0l-2.172 6.882z" fill="#E24329"/><path d="M12.858 22.925L16.465 11.5h5.055z" fill="#FC6D26"/><path d="M21.52 11.499l1.096 3.472c.1.317-.01.664-.271.86l-9.487 7.094L21.52 11.5z" fill="#FCA326"/><path d="M21.52 11.499h-5.055l2.172-6.882a.37.37 0 0 1 .71 0l2.173 6.882z" fill="#E24329"/></g></svg>