@avilang/practical-ui 0.1.5 → 0.2.1

package/dist/style/index.css

@@ -1 +0,0 @@
-@font-face{font-family:icomoon-practical;src:url(fonts/icomoon-practical.eot?k3ocmb);src:url(fonts/icomoon-practical.eot?k3ocmb#iefix) format('embedded-opentype'),url(fonts/icomoon-practical.ttf?k3ocmb) format('truetype'),url(fonts/icomoon-practical.woff?k3ocmb) format('woff'),url(fonts/icomoon-practical.svg?k3ocmb#icomoon-practical) format('svg');font-weight:400;font-style:normal;font-display:block}[class*=" practical-icon-"],[class^=practical-icon-]{font-family:icomoon-practical!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.practical-icon-loading:before{content:"\e900"}.practical-icon-search:before{content:"\e901"}

package/docz.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  files: '**/*.mdx'
-};

package/gatsby-config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ['gatsby-plugin-sass']
-};

package/gulpfile.js

@@ -1,48 +0,0 @@
-const { src, dest, parallel } = require('gulp');
-const sass = require('gulp-sass');
-const rename = require('gulp-rename');
-const autoprefixer = require('gulp-autoprefixer');
-const cleanCSS = require('gulp-clean-css');
-
-sass.compiler = require('node-sass');
-
-function scss() {
-  return src('lib/**/*.scss')
-    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
-    .pipe(
-      autoprefixer({
-        cascade: false
-      })
-    )
-    .pipe(
-      rename(function (path) {
-        return {
-          dirname: path.dirname,
-          basename: 'index',
-          extname: path.extname
-        };
-      })
-    )
-    .pipe(dest('./dist'));
-}
-
-function style() {
-  return src('lib/_fonts/icomoon-practical-v1.0/style.css')
-    .pipe(cleanCSS({ compatibility: 'ie8', level: 1 }))
-    .pipe(
-      rename(function () {
-        return {
-          dirname: 'style',
-          basename: 'index',
-          extname: '.css'
-        };
-      })
-    )
-    .pipe(dest('./dist'));
-}
-
-function staticFile() {
-  return src('lib/_fonts/icomoon-practical-v1.0/fonts/**/*').pipe(dest('./dist/style/fonts'));
-}
-
-exports.default = parallel(style, staticFile, scss);

package/lib/_fonts/icomoon-practical-v1.0/Read Me.txt

@@ -1,7 +0,0 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/lib/_fonts/icomoon-practical-v1.0/demo-files/demo.css

@@ -1,152 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 20px;
-}
-

package/lib/_fonts/icomoon-practical-v1.0/demo-files/demo.js

@@ -1,30 +0,0 @@
-if (!('boxShadow' in document.body.style)) {
-    document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-    var target = e.target;
-    if (target.tagName === "INPUT" &&
-        target.getAttribute('class').indexOf('liga') === -1) {
-        target.select();
-    }
-});
-
-(function() {
-    var fontSize = document.getElementById('fontSize'),
-        testDrive = document.getElementById('testDrive'),
-        testText = document.getElementById('testText');
-    function updateTest() {
-        testDrive.innerHTML = testText.value || String.fromCharCode(160);
-        if (window.icomoonLiga) {
-            window.icomoonLiga(testDrive);
-        }
-    }
-    function updateSize() {
-        testDrive.style.fontSize = fontSize.value + 'px';
-    }
-    fontSize.addEventListener('change', updateSize, false);
-    testText.addEventListener('input', updateTest, false);
-    testText.addEventListener('change', updateTest, false);
-    updateSize();
-}());

package/lib/_fonts/icomoon-practical-v1.0/demo.html

@@ -1,66 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>IcoMoon Demo</title>
-    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="demo-files/demo.css">
-    <link rel="stylesheet" href="style.css"></head>
-<body>
-    <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon-practical <small class="fgc1">(Glyphs:&nbsp;2)</small></h1>
-    </div>
-    <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="practical-icon-loading"></span>
-                <span class="mls"> practical-icon-loading</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e900" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
-                <span class="practical-icon-search"></span>
-                <span class="mls"> practical-icon-search</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="e901" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-    </div>
-
-    <!--[if gt IE 8]><!-->
-    <div class="mhl clearfix mbl">
-        <h1>Font Test Drive</h1>
-        <label>
-            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
-            min="8" value="48" />
-            px
-        </label>
-        <input id="testText" type="text" class="phl size1of1 mvl"
-        placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="practical-icon-" style="font-family: icomoon-practical">&nbsp;
-        </div>
-    </div>
-    <!--<![endif]-->
-    <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
-    </div>
-
-    <script src="demo-files/demo.js"></script>
-</body>
-</html>

package/lib/_fonts/icomoon-practical-v1.0/fonts/icomoon-practical.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon-practical" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="loading" d="M270.4 758.4c65.6 54.4 149.6 86.4 241.6 86.4 212 0 384-172 384-384h64c0 247.2-200.8 448-448 448-107.2 0-205.6-37.6-282.4-100l40.8-50.4z" />
-<glyph unicode="&#xe901;" glyph-name="search" d="M426.667 930.133q77.995 0 149.163-30.507t122.496-81.835 81.835-122.496 30.507-149.163q0-66.987-21.845-128.341t-62.165-111.317l242.347-242.005q12.331-12.331 12.331-30.336 0-18.347-12.16-30.507t-30.507-12.16q-18.005 0-30.336 12.331l-242.005 242.347q-50.005-40.32-111.317-62.165t-128.341-21.845q-77.995 0-149.163 30.507t-122.496 81.835-81.835 122.496-30.507 149.163 30.507 149.163 81.835 122.496 122.496 81.835 149.163 30.507zM426.667 844.8q-60.672 0-116.011-23.68t-95.317-63.659-63.659-95.317-23.68-116.011 23.68-116.011 63.659-95.317 95.317-63.659 116.011-23.68 116.011 23.68 95.317 63.659 63.659 95.317 23.68 116.011-23.68 116.011-63.659 95.317-95.317 63.659-116.011 23.68z" />
-</font></defs></svg>

package/lib/_fonts/icomoon-practical-v1.0/selection.json

@@ -1 +0,0 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M270.4 214.4c65.6-54.4 149.6-86.4 241.6-86.4 212 0 384 172 384 384h64c0-247.2-200.8-448-448-448-107.2 0-205.6 37.6-282.4 100l40.8 50.4z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["loading"],"grid":0},"attrs":[{}],"properties":{"order":13,"id":0,"name":"loading","prevSize":20,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M426.667 42.667q77.995 0 149.163 30.507t122.496 81.835 81.835 122.496 30.507 149.163q0 66.987-21.845 128.341t-62.165 111.317l242.347 242.005q12.331 12.331 12.331 30.336 0 18.347-12.16 30.507t-30.507 12.16q-18.005 0-30.336-12.331l-242.005-242.347q-50.005 40.32-111.317 62.165t-128.341 21.845q-77.995 0-149.163-30.507t-122.496-81.835-81.835-122.496-30.507-149.163 30.507-149.163 81.835-122.496 122.496-81.835 149.163-30.507zM426.667 128q-60.672 0-116.011 23.68t-95.317 63.659-63.659 95.317-23.68 116.011 23.68 116.011 63.659 95.317 95.317 63.659 116.011 23.68 116.011-23.68 95.317-63.659 63.659-95.317 23.68-116.011-23.68-116.011-63.659-95.317-95.317-63.659-116.011-23.68z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["search"],"grid":0},"attrs":[],"properties":{"order":11,"id":1,"name":"search","prevSize":20,"code":59649},"setIdx":0,"setId":0,"iconIdx":1}],"height":1024,"metadata":{"name":"icomoon-practical"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"practical-icon-","metadata":{"fontFamily":"icomoon-practical","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":false,"showMetrics":false,"showMetadata":false,"showVersion":false,"includeMetadata":false,"cssVars":false,"cssVarsFormat":"scss","flutter":false,"noie8":false,"ie7":false,"selector":"","classSelector":".icon"},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}

package/lib/_fonts/icomoon-practical-v1.0/style.css

@@ -1,33 +0,0 @@
-@font-face {
-  font-family: 'icomoon-practical';
-  src:  url('fonts/icomoon-practical.eot?k3ocmb');
-  src:  url('fonts/icomoon-practical.eot?k3ocmb#iefix') format('embedded-opentype'),
-    url('fonts/icomoon-practical.ttf?k3ocmb') format('truetype'),
-    url('fonts/icomoon-practical.woff?k3ocmb') format('woff'),
-    url('fonts/icomoon-practical.svg?k3ocmb#icomoon-practical') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-[class^="practical-icon-"], [class*=" practical-icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon-practical' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.practical-icon-loading:before {
-  content: "\e900";
-}
-.practical-icon-search:before {
-  content: "\e901";
-}

package/lib/_variables.scss

@@ -1,20 +0,0 @@
-$prefix: practical;
-
-/** 颜色 */
-$blue-5: #40a9ff;
-$blue-6: #1890ff;
-
-$green-5: #73d13d;
-$green-6: #52c41a;
-
-$red-6: #f5222d;
-
-$border-color: #d9d9d9;
-$background-color: #f5f5f5;
-
-/** 字体颜色 */
-$primary-text: rgba(0, 0, 0, 0.85);
-$disable-text: rgba(0, 0, 0, 0.25);
-
-/** 行高 */
-$line-height: 1.5715;

package/lib/button/Button.js

@@ -1,118 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import { useThrottleFn } from '../util';
-import { Icon } from '../icon';
-import './style/button.scss';
-
-function insertSpace(child, needInserted) {
-  const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
-  const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
-
-  if (child == null) return;
-
-  if ((typeof child).toLocaleLowerCase() === 'string') {
-    const space = needInserted ? ' ' : '';
-    let newChild = child;
-
-    if (isTwoCNChar(child)) newChild = child.split('').join(space);
-
-    return <span>{newChild}</span>;
-  }
-
-  return child;
-}
-
-function Button(props) {
-  const {
-    children,
-    htmlType,
-    theme,
-    autoInsertSpace,
-    danger,
-    disabled,
-    loading,
-    icon,
-    block,
-    text,
-    onClick,
-    ...rest
-  } = props;
-
-  let typeForIcon = '';
-  let isLoading = false;
-  if (loading) {
-    typeForIcon = 'loading';
-    isLoading = true;
-  }
-  if (loading === false && icon !== '') typeForIcon = icon;
-
-  const classes = classNames('practical-button-reset', 'practical-button-default', {
-    [`practical-button-${theme}`]: theme !== 'default',
-    'practical-button-danger': danger,
-    'practical-button-loading': isLoading,
-    'practical-button-block': block,
-    'practical-button-text': text
-  });
-
-  const handleClick = useThrottleFn((e) => {
-    if (isLoading || disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    let dataset = e.target.dataset;
-    if (e.target.tagName.toLocaleLowerCase() !== 'button') dataset = e.target.parentNode.dataset;
-    onClick && onClick(e, dataset);
-  }, 500);
-
-  return (
-    // eslint-disable-next-line react/button-has-type
-    <button className={classes} type={htmlType} disabled={disabled} {...rest} onClick={handleClick}>
-      {typeForIcon && !text ? (
-        <Icon style={{ marginRight: isLoading ? 0 : 4 }} type={typeForIcon} spin={isLoading} />
-      ) : null}
-      {!isLoading && React.Children.map(children, (child) => insertSpace(child, autoInsertSpace))}
-      {isLoading &&
-        text &&
-        React.Children.map(children, (child) => insertSpace(child, autoInsertSpace))}
-    </button>
-  );
-}
-
-Button.displayName = 'PracticalUi.Button';
-Button.defaultProps = {
-  htmlType: 'button',
-  theme: 'default',
-  autoInsertSpace: true,
-  danger: false,
-  disabled: false,
-  loading: false,
-  block: false,
-  text: false,
-  icon: ''
-};
-Button.propTypes = {
-  /** 设置 button 原生的 type 值 */
-  htmlType: PropTypes.oneOf(['button', 'submit', 'reset']),
-  /** 设置按钮类型 */
-  theme: PropTypes.oneOf(['default', 'primary', 'secondary', 'dashed']),
-  /** 是否在按钮内(文本按钮除外)只有两个汉字时自动添加空格 */
-  autoInsertSpace: PropTypes.bool,
-  /** 设置危险按钮 */
-  danger: PropTypes.bool,
-  /** 按钮失效状态 */
-  disabled: PropTypes.bool,
-  /** 设置按钮载入状态 */
-  loading: PropTypes.bool,
-  /** 将按钮宽度调整为其父宽度的选项 */
-  block: PropTypes.bool,
-  /** 文本按钮 */
-  text: PropTypes.bool,
-  /** 和 <Icon /> 组件 type 参数一致 */
-  icon: PropTypes.string,
-  /** 点击按钮时的回调 | (event, dataset) => void | dataset 参数为 data-attributes 传递的参数 */
-  onClick: PropTypes.func
-};
-
-export default Button;

package/lib/button/doc/button.mdx

@@ -1,119 +0,0 @@
----
-name: Button 按钮
-route: /button
----
-
-import { Playground, Props } from 'docz';
-import { Button } from '../index';
-
-# Button 按钮
-
-默认使用 `throttle` 防止快速多次点击，触发事件。
-
-## 按钮类型
-
-<Playground>
-  <Button htmlType="submit">确认</Button>
-  <Button style={{ marginLeft: 8 }} theme="primary">
-    Primary Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="secondary">
-    Secondary Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="dashed">
-    Dashed Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} text>
-    Default Text Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="primary" text>
-    Primary Text Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="secondary" text>
-    Secondary Text Button
-  </Button>
-</Playground>
-
-## 危险按钮
-
-<Playground>
-  <Button theme="secondary" danger>
-    Danger Secondary Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} danger>
-    Danger Default Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="dashed" danger>
-    Danger Dashed Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} danger text>
-    Danger Default Text Button
-  </Button>
-</Playground>
-
-## 图标按钮
-
-<Playground>
-  <Button icon="search">提交</Button>
-  <Button style={{ marginLeft: 8 }} theme="primary" icon="search">
-    确认
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="secondary" icon="search" danger>
-    取消
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="secondary" icon="search" disabled>
-    搜索
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="dashed" icon="search">
-    增加
-  </Button>
-</Playground>
-
-## Block 按钮
-
-`block` 属性将使按钮适合其父宽度。
-
-<Playground>
-  <Button theme="dashed" block>
-    Block Dashed Button
-  </Button>
-  <Button style={{ marginTop: 8 }} theme="primary" block>
-    确认
-  </Button>
-</Playground>
-
-## 不可用状态
-
-<Playground>
-  <Button disabled>Disabled Default Button</Button>
-  <Button style={{ marginLeft: 8 }} theme="secondary" danger disabled>
-    Disabled Danger Secondary Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="dashed" disabled>
-    Disabled Dashed Button
-  </Button>
-  <Button style={{ marginLeft: 8 }} theme="primary" danger disabled text>
-    Disabled Danger Secondary Text Button
-  </Button>
-</Playground>
-
-## 加载中状态
-
-<Playground>
-  <Button loading>提交</Button>
-  <Button style={{ marginLeft: 8, width: 80 }} theme="primary" loading>
-    提交
-  </Button>
-  <Button style={{ marginLeft: 8, width: 120 }} danger loading>
-    提交
-  </Button>
-  <Button style={{ marginLeft: 20 }} theme="secondary" autoInsertSpace={false} text loading>
-    保存
-  </Button>
-</Playground>
-
-## API
-
-<Props of={Button} />
-
-支持原生 button 的其他所有属性。

package/lib/button/index.js

@@ -1 +0,0 @@
-export { default as Button } from './Button';