impact-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/build/lib/index.js +2 -0
- package/build/lib/index.js.LICENSE.txt +27 -0
- package/package.json +49 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +43 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +25 -0
- package/public/robots.txt +3 -0
- package/src/App.css +30 -0
- package/src/App.js +46 -0
- package/src/assets/images/Logo.svg +11 -0
- package/src/assets/images/location.png +0 -0
- package/src/components/global-components/Grids-spacing/grid-spacing.js +12 -0
- package/src/components/global-components/button/button.js +129 -0
- package/src/components/global-components/common-misc-components/common-misc-style.js +150 -0
- package/src/components/global-components/common-misc-components/common-misc.js +50 -0
- package/src/components/global-components/icons-images/icons.js +13 -0
- package/src/components/global-components/inputbox/inputbox.js +142 -0
- package/src/index.css +13 -0
- package/src/index.js +13 -0
- package/src/lib/components/global-components/button/button-style.js +71 -0
- package/src/lib/components/global-components/button/button.js +20 -0
- package/src/lib/components/global-components/inputbox/inputbox-style.js +70 -0
- package/src/lib/components/global-components/inputbox/inputbox.js +23 -0
- package/src/lib/index.js +40 -0
- package/webpack.config.js +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Getting Started with Create React App
|
|
2
|
+
|
|
3
|
+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
|
4
|
+
|
|
5
|
+
## Available Scripts
|
|
6
|
+
|
|
7
|
+
In the project directory, you can run:
|
|
8
|
+
|
|
9
|
+
### `npm start`
|
|
10
|
+
|
|
11
|
+
Runs the app in the development mode.\
|
|
12
|
+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
13
|
+
|
|
14
|
+
The page will reload when you make changes.\
|
|
15
|
+
You may also see any lint errors in the console.
|
|
16
|
+
|
|
17
|
+
### `npm test`
|
|
18
|
+
|
|
19
|
+
Launches the test runner in the interactive watch mode.\
|
|
20
|
+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
21
|
+
|
|
22
|
+
### `npm run build`
|
|
23
|
+
|
|
24
|
+
Builds the app for production to the `build` folder.\
|
|
25
|
+
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
26
|
+
|
|
27
|
+
The build is minified and the filenames include the hashes.\
|
|
28
|
+
Your app is ready to be deployed!
|
|
29
|
+
|
|
30
|
+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
|
31
|
+
|
|
32
|
+
### `npm run eject`
|
|
33
|
+
|
|
34
|
+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
|
35
|
+
|
|
36
|
+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
|
37
|
+
|
|
38
|
+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
|
39
|
+
|
|
40
|
+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
|
41
|
+
|
|
42
|
+
## Learn More
|
|
43
|
+
|
|
44
|
+
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
45
|
+
|
|
46
|
+
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
47
|
+
|
|
48
|
+
### Code Splitting
|
|
49
|
+
|
|
50
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
|
51
|
+
|
|
52
|
+
### Analyzing the Bundle Size
|
|
53
|
+
|
|
54
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
|
55
|
+
|
|
56
|
+
### Making a Progressive Web App
|
|
57
|
+
|
|
58
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
|
59
|
+
|
|
60
|
+
### Advanced Configuration
|
|
61
|
+
|
|
62
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
|
63
|
+
|
|
64
|
+
### Deployment
|
|
65
|
+
|
|
66
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
|
67
|
+
|
|
68
|
+
### `npm run build` fails to minify
|
|
69
|
+
|
|
70
|
+
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
+
!function(){var e={679:function(e,t,r){"use strict";var n=r(296),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function c(e){return n.isMemo(e)?a:s[e.$$typeof]||o}s[n.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[n.Memo]=a;var u=Object.defineProperty,l=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,d=Object.getPrototypeOf,h=Object.prototype;e.exports=function e(t,r,n){if("string"!=typeof r){if(h){var o=d(r);o&&o!==h&&e(t,o,n)}var a=l(r);f&&(a=a.concat(f(r)));for(var s=c(t),y=c(r),m=0;m<a.length;++m){var g=a[m];if(!(i[g]||n&&n[g]||y&&y[g]||s&&s[g])){var b=p(r,g);try{u(t,g,b)}catch(e){}}}}return t}},103:function(e,t){"use strict";var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,a=r?Symbol.for("react.strict_mode"):60108,s=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,u=r?Symbol.for("react.context"):60110,l=r?Symbol.for("react.async_mode"):60111,f=r?Symbol.for("react.concurrent_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,d=r?Symbol.for("react.suspense"):60113,h=r?Symbol.for("react.suspense_list"):60120,y=r?Symbol.for("react.memo"):60115,m=r?Symbol.for("react.lazy"):60116,g=r?Symbol.for("react.block"):60121,b=r?Symbol.for("react.fundamental"):60117,v=r?Symbol.for("react.responder"):60118,S=r?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case l:case f:case i:case s:case a:case d:return e;default:switch(e=e&&e.$$typeof){case u:case p:case m:case y:case c:return e;default:return t}}case o:return t}}}function w(e){return k(e)===f}t.AsyncMode=l,t.ConcurrentMode=f,t.ContextConsumer=u,t.ContextProvider=c,t.Element=n,t.ForwardRef=p,t.Fragment=i,t.Lazy=m,t.Memo=y,t.Portal=o,t.Profiler=s,t.StrictMode=a,t.Suspense=d,t.isAsyncMode=function(e){return w(e)||k(e)===l},t.isConcurrentMode=w,t.isContextConsumer=function(e){return k(e)===u},t.isContextProvider=function(e){return k(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===i},t.isLazy=function(e){return k(e)===m},t.isMemo=function(e){return k(e)===y},t.isPortal=function(e){return k(e)===o},t.isProfiler=function(e){return k(e)===s},t.isStrictMode=function(e){return k(e)===a},t.isSuspense=function(e){return k(e)===d},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===f||e===s||e===a||e===d||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===y||e.$$typeof===c||e.$$typeof===u||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===S||e.$$typeof===g)},t.typeOf=k},296:function(e,t,r){"use strict";e.exports=r(103)},921:function(e,t){"use strict";var r=60103,n=60106,o=60107,i=60108,a=60114,s=60109,c=60110,u=60112,l=60113,f=60120,p=60115,d=60116,h=60121,y=60122,m=60117,g=60129,b=60131;if("function"==typeof Symbol&&Symbol.for){var v=Symbol.for;r=v("react.element"),n=v("react.portal"),o=v("react.fragment"),i=v("react.strict_mode"),a=v("react.profiler"),s=v("react.provider"),c=v("react.context"),u=v("react.forward_ref"),l=v("react.suspense"),f=v("react.suspense_list"),p=v("react.memo"),d=v("react.lazy"),h=v("react.block"),y=v("react.server.block"),m=v("react.fundamental"),g=v("react.debug_trace_mode"),b=v("react.legacy_hidden")}t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===a||e===g||e===i||e===l||e===f||e===b||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===p||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===m||e.$$typeof===h||e[0]===y)},t.typeOf=function(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case o:case a:case i:case l:case f:return e;default:switch(e=e&&e.$$typeof){case c:case u:case d:case p:case s:return e;default:return t}}case n:return t}}}},864:function(e,t,r){"use strict";e.exports=r(921)},408:function(e,t){"use strict";var r=Symbol.for("react.element"),n=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),l=Symbol.for("react.suspense"),f=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),d=Symbol.iterator,h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},y=Object.assign,m={};function g(e,t,r){this.props=e,this.context=t,this.refs=m,this.updater=r||h}function b(){}function v(e,t,r){this.props=e,this.context=t,this.refs=m,this.updater=r||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=g.prototype;var S=v.prototype=new b;S.constructor=v,y(S,g.prototype),S.isPureReactComponent=!0;var k=Array.isArray,w=Object.prototype.hasOwnProperty,x={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function A(e,t,n){var o,i={},a=null,s=null;if(null!=t)for(o in void 0!==t.ref&&(s=t.ref),void 0!==t.key&&(a=""+t.key),t)w.call(t,o)&&!C.hasOwnProperty(o)&&(i[o]=t[o]);var c=arguments.length-2;if(1===c)i.children=n;else if(1<c){for(var u=Array(c),l=0;l<c;l++)u[l]=arguments[l+2];i.children=u}if(e&&e.defaultProps)for(o in c=e.defaultProps)void 0===i[o]&&(i[o]=c[o]);return{$$typeof:r,type:e,key:a,ref:s,props:i,_owner:x.current}}function _(e){return"object"==typeof e&&null!==e&&e.$$typeof===r}var E=/\/+/g;function P(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function O(e,t,o,i,a){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var c=!1;if(null===e)c=!0;else switch(s){case"string":case"number":c=!0;break;case"object":switch(e.$$typeof){case r:case n:c=!0}}if(c)return a=a(c=e),e=""===i?"."+P(c,0):i,k(a)?(o="",null!=e&&(o=e.replace(E,"$&/")+"/"),O(a,t,o,"",(function(e){return e}))):null!=a&&(_(a)&&(a=function(e,t){return{$$typeof:r,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(a,o+(!a.key||c&&c.key===a.key?"":(""+a.key).replace(E,"$&/")+"/")+e)),t.push(a)),1;if(c=0,i=""===i?".":i+":",k(e))for(var u=0;u<e.length;u++){var l=i+P(s=e[u],u);c+=O(s,t,o,l,a)}else if(l=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=d&&e[d]||e["@@iterator"])?e:null}(e),"function"==typeof l)for(e=l.call(e),u=0;!(s=e.next()).done;)c+=O(s=s.value,t,o,l=i+P(s,u++),a);else if("object"===s)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return c}function $(e,t,r){if(null==e)return e;var n=[],o=0;return O(e,n,"","",(function(e){return t.call(r,e,o++)})),n}function R(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var I={current:null},j={transition:null},T={ReactCurrentDispatcher:I,ReactCurrentBatchConfig:j,ReactCurrentOwner:x};t.Children={map:$,forEach:function(e,t,r){$(e,(function(){t.apply(this,arguments)}),r)},count:function(e){var t=0;return $(e,(function(){t++})),t},toArray:function(e){return $(e,(function(e){return e}))||[]},only:function(e){if(!_(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=g,t.Fragment=o,t.Profiler=a,t.PureComponent=v,t.StrictMode=i,t.Suspense=l,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T,t.cloneElement=function(e,t,n){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=y({},e.props),i=e.key,a=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,s=x.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var c=e.type.defaultProps;for(u in t)w.call(t,u)&&!C.hasOwnProperty(u)&&(o[u]=void 0===t[u]&&void 0!==c?c[u]:t[u])}var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){c=Array(u);for(var l=0;l<u;l++)c[l]=arguments[l+2];o.children=c}return{$$typeof:r,type:e.type,key:i,ref:a,props:o,_owner:s}},t.createContext=function(e){return(e={$$typeof:c,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},t.createElement=A,t.createFactory=function(e){var t=A.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=_,t.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:R}},t.memo=function(e,t){return{$$typeof:f,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=j.transition;j.transition={};try{e()}finally{j.transition=t}},t.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},t.useCallback=function(e,t){return I.current.useCallback(e,t)},t.useContext=function(e){return I.current.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e){return I.current.useDeferredValue(e)},t.useEffect=function(e,t){return I.current.useEffect(e,t)},t.useId=function(){return I.current.useId()},t.useImperativeHandle=function(e,t,r){return I.current.useImperativeHandle(e,t,r)},t.useInsertionEffect=function(e,t){return I.current.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return I.current.useLayoutEffect(e,t)},t.useMemo=function(e,t){return I.current.useMemo(e,t)},t.useReducer=function(e,t,r){return I.current.useReducer(e,t,r)},t.useRef=function(e){return I.current.useRef(e)},t.useState=function(e){return I.current.useState(e)},t.useSyncExternalStore=function(e,t,r){return I.current.useSyncExternalStore(e,t,r)},t.useTransition=function(){return I.current.useTransition()},t.version="18.2.0"},294:function(e,t,r){"use strict";e.exports=r(408)},774:function(e){e.exports=function(e,t,r,n){var o=r?r.call(n,e,t):void 0;if(void 0!==o)return!!o;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var i=Object.keys(e),a=Object.keys(t);if(i.length!==a.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(t),c=0;c<i.length;c++){var u=i[c];if(!s(u))return!1;var l=e[u],f=t[u];if(!1===(o=r?r.call(n,l,f,u):void 0)||void 0===o&&l!==f)return!1}return!0}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.nc=void 0,function(){"use strict";var e=r(864),t=r(294),n=r(774),o=r.n(n),i=function(e){function t(e,n,c,u,p){for(var d,h,y,m,S,w=0,x=0,C=0,A=0,_=0,I=0,T=y=d=0,F=0,D=0,N=0,M=0,L=c.length,B=L-1,G="",H="",U="",V="";F<L;){if(h=c.charCodeAt(F),F===B&&0!==x+A+C+w&&(0!==x&&(h=47===x?10:47),A=C=w=0,L++,B++),0===x+A+C+w){if(F===B&&(0<D&&(G=G.replace(f,"")),0<G.trim().length)){switch(h){case 32:case 9:case 59:case 13:case 10:break;default:G+=c.charAt(F)}h=59}switch(h){case 123:for(d=(G=G.trim()).charCodeAt(0),y=1,M=++F;F<L;){switch(h=c.charCodeAt(F)){case 123:y++;break;case 125:y--;break;case 47:switch(h=c.charCodeAt(F+1)){case 42:case 47:e:{for(T=F+1;T<B;++T)switch(c.charCodeAt(T)){case 47:if(42===h&&42===c.charCodeAt(T-1)&&F+2!==T){F=T+1;break e}break;case 10:if(47===h){F=T+1;break e}}F=T}}break;case 91:h++;case 40:h++;case 34:case 39:for(;F++<B&&c.charCodeAt(F)!==h;);}if(0===y)break;F++}if(y=c.substring(M,F),0===d&&(d=(G=G.replace(l,"").trim()).charCodeAt(0)),64===d){switch(0<D&&(G=G.replace(f,"")),h=G.charCodeAt(1)){case 100:case 109:case 115:case 45:D=n;break;default:D=R}if(M=(y=t(n,D,y,h,p+1)).length,0<j&&(S=s(3,y,D=r(R,G,N),n,P,E,M,h,p,u),G=D.join(""),void 0!==S&&0===(M=(y=S.trim()).length)&&(h=0,y="")),0<M)switch(h){case 115:G=G.replace(k,a);case 100:case 109:case 45:y=G+"{"+y+"}";break;case 107:y=(G=G.replace(g,"$1 $2"))+"{"+y+"}",y=1===$||2===$&&i("@"+y,3)?"@-webkit-"+y+"@"+y:"@"+y;break;default:y=G+y,112===u&&(H+=y,y="")}else y=""}else y=t(n,r(n,G,N),y,u,p+1);U+=y,y=N=D=T=d=0,G="",h=c.charCodeAt(++F);break;case 125:case 59:if(1<(M=(G=(0<D?G.replace(f,""):G).trim()).length))switch(0===T&&(d=G.charCodeAt(0),45===d||96<d&&123>d)&&(M=(G=G.replace(" ",":")).length),0<j&&void 0!==(S=s(1,G,n,e,P,E,H.length,u,p,u))&&0===(M=(G=S.trim()).length)&&(G="\0\0"),d=G.charCodeAt(0),h=G.charCodeAt(1),d){case 0:break;case 64:if(105===h||99===h){V+=G+c.charAt(F);break}default:58!==G.charCodeAt(M-1)&&(H+=o(G,d,h,G.charCodeAt(2)))}N=D=T=d=0,G="",h=c.charCodeAt(++F)}}switch(h){case 13:case 10:47===x?x=0:0===1+d&&107!==u&&0<G.length&&(D=1,G+="\0"),0<j*z&&s(0,G,n,e,P,E,H.length,u,p,u),E=1,P++;break;case 59:case 125:if(0===x+A+C+w){E++;break}default:switch(E++,m=c.charAt(F),h){case 9:case 32:if(0===A+w+x)switch(_){case 44:case 58:case 9:case 32:m="";break;default:32!==h&&(m=" ")}break;case 0:m="\\0";break;case 12:m="\\f";break;case 11:m="\\v";break;case 38:0===A+x+w&&(D=N=1,m="\f"+m);break;case 108:if(0===A+x+w+O&&0<T)switch(F-T){case 2:112===_&&58===c.charCodeAt(F-3)&&(O=_);case 8:111===I&&(O=I)}break;case 58:0===A+x+w&&(T=F);break;case 44:0===x+C+A+w&&(D=1,m+="\r");break;case 34:case 39:0===x&&(A=A===h?0:0===A?h:A);break;case 91:0===A+x+C&&w++;break;case 93:0===A+x+C&&w--;break;case 41:0===A+x+w&&C--;break;case 40:0===A+x+w&&(0===d&&(2*_+3*I==533||(d=1)),C++);break;case 64:0===x+C+A+w+T+y&&(y=1);break;case 42:case 47:if(!(0<A+w+C))switch(x){case 0:switch(2*h+3*c.charCodeAt(F+1)){case 235:x=47;break;case 220:M=F,x=42}break;case 42:47===h&&42===_&&M+2!==F&&(33===c.charCodeAt(M+2)&&(H+=c.substring(M,F+1)),m="",x=0)}}0===x&&(G+=m)}I=_,_=h,F++}if(0<(M=H.length)){if(D=n,0<j&&void 0!==(S=s(2,H,D,e,P,E,M,u,p,u))&&0===(H=S).length)return V+H+U;if(H=D.join(",")+"{"+H+"}",0!=$*O){switch(2!==$||i(H,2)||(O=0),O){case 111:H=H.replace(v,":-moz-$1")+H;break;case 112:H=H.replace(b,"::-webkit-input-$1")+H.replace(b,"::-moz-$1")+H.replace(b,":-ms-input-$1")+H}O=0}}return V+H+U}function r(e,t,r){var o=t.trim().split(y);t=o;var i=o.length,a=e.length;switch(a){case 0:case 1:var s=0;for(e=0===a?"":e[0]+" ";s<i;++s)t[s]=n(e,t[s],r).trim();break;default:var c=s=0;for(t=[];s<i;++s)for(var u=0;u<a;++u)t[c++]=n(e[u]+" ",o[s],r).trim()}return t}function n(e,t,r){var n=t.charCodeAt(0);switch(33>n&&(n=(t=t.trim()).charCodeAt(0)),n){case 38:return t.replace(m,"$1"+e.trim());case 58:return e.trim()+t.replace(m,"$1"+e.trim());default:if(0<1*r&&0<t.indexOf("\f"))return t.replace(m,(58===e.charCodeAt(0)?"":"$1")+e.trim())}return e+t}function o(e,t,r,n){var a=e+";",s=2*t+3*r+4*n;if(944===s){e=a.indexOf(":",9)+1;var c=a.substring(e,a.length-1).trim();return c=a.substring(0,e).trim()+c+";",1===$||2===$&&i(c,1)?"-webkit-"+c+c:c}if(0===$||2===$&&!i(a,1))return a;switch(s){case 1015:return 97===a.charCodeAt(10)?"-webkit-"+a+a:a;case 951:return 116===a.charCodeAt(3)?"-webkit-"+a+a:a;case 963:return 110===a.charCodeAt(5)?"-webkit-"+a+a:a;case 1009:if(100!==a.charCodeAt(4))break;case 969:case 942:return"-webkit-"+a+a;case 978:return"-webkit-"+a+"-moz-"+a+a;case 1019:case 983:return"-webkit-"+a+"-moz-"+a+"-ms-"+a+a;case 883:if(45===a.charCodeAt(8))return"-webkit-"+a+a;if(0<a.indexOf("image-set(",11))return a.replace(_,"$1-webkit-$2")+a;break;case 932:if(45===a.charCodeAt(4))switch(a.charCodeAt(5)){case 103:return"-webkit-box-"+a.replace("-grow","")+"-webkit-"+a+"-ms-"+a.replace("grow","positive")+a;case 115:return"-webkit-"+a+"-ms-"+a.replace("shrink","negative")+a;case 98:return"-webkit-"+a+"-ms-"+a.replace("basis","preferred-size")+a}return"-webkit-"+a+"-ms-"+a+a;case 964:return"-webkit-"+a+"-ms-flex-"+a+a;case 1023:if(99!==a.charCodeAt(8))break;return"-webkit-box-pack"+(c=a.substring(a.indexOf(":",15)).replace("flex-","").replace("space-between","justify"))+"-webkit-"+a+"-ms-flex-pack"+c+a;case 1005:return d.test(a)?a.replace(p,":-webkit-")+a.replace(p,":-moz-")+a:a;case 1e3:switch(t=(c=a.substring(13).trim()).indexOf("-")+1,c.charCodeAt(0)+c.charCodeAt(t)){case 226:c=a.replace(S,"tb");break;case 232:c=a.replace(S,"tb-rl");break;case 220:c=a.replace(S,"lr");break;default:return a}return"-webkit-"+a+"-ms-"+c+a;case 1017:if(-1===a.indexOf("sticky",9))break;case 975:switch(t=(a=e).length-10,s=(c=(33===a.charCodeAt(t)?a.substring(0,t):a).substring(e.indexOf(":",7)+1).trim()).charCodeAt(0)+(0|c.charCodeAt(7))){case 203:if(111>c.charCodeAt(8))break;case 115:a=a.replace(c,"-webkit-"+c)+";"+a;break;case 207:case 102:a=a.replace(c,"-webkit-"+(102<s?"inline-":"")+"box")+";"+a.replace(c,"-webkit-"+c)+";"+a.replace(c,"-ms-"+c+"box")+";"+a}return a+";";case 938:if(45===a.charCodeAt(5))switch(a.charCodeAt(6)){case 105:return c=a.replace("-items",""),"-webkit-"+a+"-webkit-box-"+c+"-ms-flex-"+c+a;case 115:return"-webkit-"+a+"-ms-flex-item-"+a.replace(x,"")+a;default:return"-webkit-"+a+"-ms-flex-line-pack"+a.replace("align-content","").replace(x,"")+a}break;case 973:case 989:if(45!==a.charCodeAt(3)||122===a.charCodeAt(4))break;case 931:case 953:if(!0===A.test(e))return 115===(c=e.substring(e.indexOf(":")+1)).charCodeAt(0)?o(e.replace("stretch","fill-available"),t,r,n).replace(":fill-available",":stretch"):a.replace(c,"-webkit-"+c)+a.replace(c,"-moz-"+c.replace("fill-",""))+a;break;case 962:if(a="-webkit-"+a+(102===a.charCodeAt(5)?"-ms-"+a:"")+a,211===r+n&&105===a.charCodeAt(13)&&0<a.indexOf("transform",10))return a.substring(0,a.indexOf(";",27)+1).replace(h,"$1-webkit-$2")+a}return a}function i(e,t){var r=e.indexOf(1===t?":":"{"),n=e.substring(0,3!==t?r:10);return r=e.substring(r+1,e.length-1),T(2!==t?n:n.replace(C,"$1"),r,t)}function a(e,t){var r=o(t,t.charCodeAt(0),t.charCodeAt(1),t.charCodeAt(2));return r!==t+";"?r.replace(w," or ($1)").substring(4):"("+t+")"}function s(e,t,r,n,o,i,a,s,c,l){for(var f,p=0,d=t;p<j;++p)switch(f=I[p].call(u,e,d,r,n,o,i,a,s,c,l)){case void 0:case!1:case!0:case null:break;default:d=f}if(d!==t)return d}function c(e){return void 0!==(e=e.prefix)&&(T=null,e?"function"!=typeof e?$=1:($=2,T=e):$=0),c}function u(e,r){var n=e;if(33>n.charCodeAt(0)&&(n=n.trim()),n=[n],0<j){var o=s(-1,r,n,n,P,E,0,0,0,0);void 0!==o&&"string"==typeof o&&(r=o)}var i=t(R,n,r,0,0);return 0<j&&void 0!==(o=s(-2,i,n,n,P,E,i.length,0,0,0))&&(i=o),O=0,E=P=1,i}var l=/^\0+/g,f=/[\0\r\f]/g,p=/: */g,d=/zoo|gra/,h=/([,: ])(transform)/g,y=/,\r+?/g,m=/([\t\r\n ])*\f?&/g,g=/@(k\w+)\s*(\S*)\s*/,b=/::(place)/g,v=/:(read-only)/g,S=/[svh]\w+-[tblr]{2}/,k=/\(\s*(.*)\s*\)/g,w=/([\s\S]*?);/g,x=/-self|flex-/g,C=/[^]*?(:[rp][el]a[\w-]+)[^]*/,A=/stretch|:\s*\w+\-(?:conte|avail)/,_=/([^-])(image-set\()/,E=1,P=1,O=0,$=1,R=[],I=[],j=0,T=null,z=0;return u.use=function e(t){switch(t){case void 0:case null:j=I.length=0;break;default:if("function"==typeof t)I[j++]=t;else if("object"==typeof t)for(var r=0,n=t.length;r<n;++r)e(t[r]);else z=0|!!t}return e},u.set=c,void 0!==e&&c(e),u},a={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},s=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,c=function(e){var t=Object.create(null);return function(e){return void 0===t[e]&&(t[e]=(r=e,s.test(r)||111===r.charCodeAt(0)&&110===r.charCodeAt(1)&&r.charCodeAt(2)<91)),t[e];var r}}(),u=r(679),l=r.n(u);function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var p=function(e,t){for(var r=[e[0]],n=0,o=t.length;n<o;n+=1)r.push(t[n],e[n+1]);return r},d=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!(0,e.typeOf)(t)},h=Object.freeze([]),y=Object.freeze({});function m(e){return"function"==typeof e}function g(e){return e.displayName||e.name||"Component"}function b(e){return e&&"string"==typeof e.styledComponentId}var v="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",S="undefined"!=typeof window&&"HTMLElement"in window,k=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY&&"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY);function w(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];throw new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(r.length>0?" Args: "+r.join(", "):""))}var x=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,r=0;r<e;r++)t+=this.groupSizes[r];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var r=this.groupSizes,n=r.length,o=n;e>=o;)(o<<=1)<0&&w(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(r),this.length=o;for(var i=n;i<o;i++)this.groupSizes[i]=0}for(var a=this.indexOfGroup(e+1),s=0,c=t.length;s<c;s++)this.tag.insertRule(a,t[s])&&(this.groupSizes[e]++,a++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],r=this.indexOfGroup(e),n=r+t;this.groupSizes[e]=0;for(var o=r;o<n;o++)this.tag.deleteRule(r)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var r=this.groupSizes[e],n=this.indexOfGroup(e),o=n+r,i=n;i<o;i++)t+=this.tag.getRule(i)+"/*!sc*/\n";return t},e}(),C=new Map,A=new Map,_=1,E=function(e){if(C.has(e))return C.get(e);for(;A.has(_);)_++;var t=_++;return C.set(e,t),A.set(t,e),t},P=function(e){return A.get(e)},O=function(e,t){t>=_&&(_=t+1),C.set(e,t),A.set(t,e)},$="style["+v+'][data-styled-version="5.3.6"]',R=new RegExp("^"+v+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),I=function(e,t,r){for(var n,o=r.split(","),i=0,a=o.length;i<a;i++)(n=o[i])&&e.registerName(t,n)},j=function(e,t){for(var r=(t.textContent||"").split("/*!sc*/\n"),n=[],o=0,i=r.length;o<i;o++){var a=r[o].trim();if(a){var s=a.match(R);if(s){var c=0|parseInt(s[1],10),u=s[2];0!==c&&(O(u,c),I(e,u,s[3]),e.getTag().insertRules(c,n)),n.length=0}else n.push(a)}}},T=function(){return r.nc},z=function(e){var t=document.head,r=e||t,n=document.createElement("style"),o=function(e){for(var t=e.childNodes,r=t.length;r>=0;r--){var n=t[r];if(n&&1===n.nodeType&&n.hasAttribute(v))return n}}(r),i=void 0!==o?o.nextSibling:null;n.setAttribute(v,"active"),n.setAttribute("data-styled-version","5.3.6");var a=T();return a&&n.setAttribute("nonce",a),r.insertBefore(n,i),n},F=function(){function e(e){var t=this.element=z(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,r=0,n=t.length;r<n;r++){var o=t[r];if(o.ownerNode===e)return o}w(17)}(t),this.length=0}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),D=function(){function e(e){var t=this.element=z(e);this.nodes=t.childNodes,this.length=0}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var r=document.createTextNode(t),n=this.nodes[e];return this.element.insertBefore(r,n||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),N=function(){function e(e){this.rules=[],this.length=0}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),M=S,L={isServer:!S,useCSSOMInjection:!k},B=function(){function e(e,t,r){void 0===e&&(e=y),void 0===t&&(t={}),this.options=f({},L,{},e),this.gs=t,this.names=new Map(r),this.server=!!e.isServer,!this.server&&S&&M&&(M=!1,function(e){for(var t=document.querySelectorAll($),r=0,n=t.length;r<n;r++){var o=t[r];o&&"active"!==o.getAttribute(v)&&(j(e,o),o.parentNode&&o.parentNode.removeChild(o))}}(this))}e.registerId=function(e){return E(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,r){return void 0===r&&(r=!0),new e(f({},this.options,{},t),this.gs,r&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(r=(t=this.options).isServer,n=t.useCSSOMInjection,o=t.target,e=r?new N(o):n?new F(o):new D(o),new x(e)));var e,t,r,n,o},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(E(e),this.names.has(e))this.names.get(e).add(t);else{var r=new Set;r.add(t),this.names.set(e,r)}},t.insertRules=function(e,t,r){this.registerName(e,t),this.getTag().insertRules(E(e),r)},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.clearRules=function(e){this.getTag().clearGroup(E(e)),this.clearNames(e)},t.clearTag=function(){this.tag=void 0},t.toString=function(){return function(e){for(var t=e.getTag(),r=t.length,n="",o=0;o<r;o++){var i=P(o);if(void 0!==i){var a=e.names.get(i),s=t.getGroup(o);if(a&&s&&a.size){var c=v+".g"+o+'[id="'+i+'"]',u="";void 0!==a&&a.forEach((function(e){e.length>0&&(u+=e+",")})),n+=""+s+c+'{content:"'+u+'"}/*!sc*/\n'}}}return n}(this)},e}(),G=/(a)(d)/gi,H=function(e){return String.fromCharCode(e+(e>25?39:97))};function U(e){var t,r="";for(t=Math.abs(e);t>52;t=t/52|0)r=H(t%52)+r;return(H(t%52)+r).replace(G,"$1-$2")}var V=function(e,t){for(var r=t.length;r;)e=33*e^t.charCodeAt(--r);return e},q=function(e){return V(5381,e)};function Y(e){for(var t=0;t<e.length;t+=1){var r=e[t];if(m(r)&&!b(r))return!1}return!0}var W=q("5.3.6"),X=function(){function e(e,t,r){this.rules=e,this.staticRulesId="",this.isStatic=(void 0===r||r.isStatic)&&Y(e),this.componentId=t,this.baseHash=V(W,t),this.baseStyle=r,B.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,r){var n=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,r)),this.isStatic&&!r.hash)if(this.staticRulesId&&t.hasNameForId(n,this.staticRulesId))o.push(this.staticRulesId);else{var i=pe(this.rules,e,t,r).join(""),a=U(V(this.baseHash,i)>>>0);if(!t.hasNameForId(n,a)){var s=r(i,"."+a,void 0,n);t.insertRules(n,a,s)}o.push(a),this.staticRulesId=a}else{for(var c=this.rules.length,u=V(this.baseHash,r.hash),l="",f=0;f<c;f++){var p=this.rules[f];if("string"==typeof p)l+=p;else if(p){var d=pe(p,e,t,r),h=Array.isArray(d)?d.join(""):d;u=V(u,h+f),l+=h}}if(l){var y=U(u>>>0);if(!t.hasNameForId(n,y)){var m=r(l,"."+y,void 0,n);t.insertRules(n,y,m)}o.push(y)}}return o.join(" ")},e}(),Z=/^\s*\/\/.*$/gm,K=[":","[",".","#"];function J(e){var t,r,n,o,a=void 0===e?y:e,s=a.options,c=void 0===s?y:s,u=a.plugins,l=void 0===u?h:u,f=new i(c),p=[],d=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(r,n,o,i,a,s,c,u,l,f){switch(r){case 1:if(0===l&&64===n.charCodeAt(0))return e(n+";"),"";break;case 2:if(0===u)return n+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+n),"";default:return n+(0===f?"/*|*/":"")}case-2:n.split("/*|*/}").forEach(t)}}}((function(e){p.push(e)})),m=function(e,n,i){return 0===n&&-1!==K.indexOf(i[r.length])||i.match(o)?e:"."+t};function g(e,i,a,s){void 0===s&&(s="&");var c=e.replace(Z,""),u=i&&a?a+" "+i+" { "+c+" }":c;return t=s,r=i,n=new RegExp("\\"+r+"\\b","g"),o=new RegExp("(\\"+r+"\\b){2,}"),f(a||!i?"":i,u)}return f.use([].concat(l,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(r)>0&&(o[0]=o[0].replace(n,m))},d,function(e){if(-2===e){var t=p;return p=[],t}}])),g.hash=l.length?l.reduce((function(e,t){return t.name||w(15),V(e,t.name)}),5381).toString():"",g}var Q=t.createContext(),ee=(Q.Consumer,t.createContext()),te=(ee.Consumer,new B),re=J();function ne(){return(0,t.useContext)(Q)||te}function oe(e){var r=(0,t.useState)(e.stylisPlugins),n=r[0],i=r[1],a=ne(),s=(0,t.useMemo)((function(){var t=a;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),c=(0,t.useMemo)((function(){return J({options:{prefix:!e.disableVendorPrefixes},plugins:n})}),[e.disableVendorPrefixes,n]);return(0,t.useEffect)((function(){o()(n,e.stylisPlugins)||i(e.stylisPlugins)}),[e.stylisPlugins]),t.createElement(Q.Provider,{value:s},t.createElement(ee.Provider,{value:c},e.children))}var ie=function(){function e(e,t){var r=this;this.inject=function(e,t){void 0===t&&(t=re);var n=r.name+t.hash;e.hasNameForId(r.id,n)||e.insertRules(r.id,n,t(r.rules,n,"@keyframes"))},this.toString=function(){return w(12,String(r.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=re),this.name+e.hash},e}(),ae=/([A-Z])/,se=/([A-Z])/g,ce=/^ms-/,ue=function(e){return"-"+e.toLowerCase()};function le(e){return ae.test(e)?e.replace(se,ue).replace(ce,"-ms-"):e}var fe=function(e){return null==e||!1===e||""===e};function pe(e,t,r,n){if(Array.isArray(e)){for(var o,i=[],s=0,c=e.length;s<c;s+=1)""!==(o=pe(e[s],t,r,n))&&(Array.isArray(o)?i.push.apply(i,o):i.push(o));return i}return fe(e)?"":b(e)?"."+e.styledComponentId:m(e)?"function"!=typeof(u=e)||u.prototype&&u.prototype.isReactComponent||!t?e:pe(e(t),t,r,n):e instanceof ie?r?(e.inject(r,n),e.getName(n)):e:d(e)?function e(t,r){var n,o,i=[];for(var s in t)t.hasOwnProperty(s)&&!fe(t[s])&&(Array.isArray(t[s])&&t[s].isCss||m(t[s])?i.push(le(s)+":",t[s],";"):d(t[s])?i.push.apply(i,e(t[s],s)):i.push(le(s)+": "+(n=s,(null==(o=t[s])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||n in a?String(o).trim():o+"px")+";")));return r?[r+" {"].concat(i,["}"]):i}(e):e.toString();var u}var de=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function he(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return m(e)||d(e)?de(pe(p(h,[e].concat(r)))):0===r.length&&1===e.length&&"string"==typeof e[0]?e:de(pe(p(e,r)))}new Set;var ye=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,me=/(^-|-$)/g;function ge(e){return e.replace(ye,"-").replace(me,"")}function be(e){return"string"==typeof e&&!0}var ve=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Se=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ke(e,t,r){var n=e[r];ve(t)&&ve(n)?we(n,t):e[r]=t}function we(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];for(var o=0,i=r;o<i.length;o++){var a=i[o];if(ve(a))for(var s in a)Se(s)&&ke(e,a[s],s)}return e}var xe=t.createContext();xe.Consumer;var Ce={};function Ae(e,r,n){var o=b(e),i=!be(e),a=r.attrs,s=void 0===a?h:a,u=r.componentId,p=void 0===u?function(e,t){var r="string"!=typeof e?"sc":ge(e);Ce[r]=(Ce[r]||0)+1;var n=r+"-"+function(e){return U(q(e)>>>0)}("5.3.6"+r+Ce[r]);return t?t+"-"+n:n}(r.displayName,r.parentComponentId):u,d=r.displayName,v=void 0===d?function(e){return be(e)?"styled."+e:"Styled("+g(e)+")"}(e):d,S=r.displayName&&r.componentId?ge(r.displayName)+"-"+r.componentId:r.componentId||p,k=o&&e.attrs?Array.prototype.concat(e.attrs,s).filter(Boolean):s,w=r.shouldForwardProp;o&&e.shouldForwardProp&&(w=r.shouldForwardProp?function(t,n,o){return e.shouldForwardProp(t,n,o)&&r.shouldForwardProp(t,n,o)}:e.shouldForwardProp);var x,C=new X(n,S,o?e.componentStyle:void 0),A=C.isStatic&&0===s.length,_=function(e,r){return function(e,r,n,o){var i=e.attrs,a=e.componentStyle,s=e.defaultProps,u=e.foldedComponentIds,l=e.shouldForwardProp,p=e.styledComponentId,d=e.target,h=function(e,t,r){void 0===e&&(e=y);var n=f({},t,{theme:e}),o={};return r.forEach((function(e){var t,r,i,a=e;for(t in m(a)&&(a=a(n)),a)n[t]=o[t]="className"===t?(r=o[t],i=a[t],r&&i?r+" "+i:r||i):a[t]})),[n,o]}(function(e,t,r){return void 0===r&&(r=y),e.theme!==r.theme&&e.theme||t||r.theme}(r,(0,t.useContext)(xe),s)||y,r,i),g=h[0],b=h[1],v=function(e,r,n,o){var i=ne(),a=(0,t.useContext)(ee)||re;return r?e.generateAndInjectStyles(y,i,a):e.generateAndInjectStyles(n,i,a)}(a,o,g),S=n,k=b.$as||r.$as||b.as||r.as||d,w=be(k),x=b!==r?f({},r,{},b):r,C={};for(var A in x)"$"!==A[0]&&"as"!==A&&("forwardedAs"===A?C.as=x[A]:(l?l(A,c,k):!w||c(A))&&(C[A]=x[A]));return r.style&&b.style!==r.style&&(C.style=f({},r.style,{},b.style)),C.className=Array.prototype.concat(u,p,v!==p?v:null,r.className,b.className).filter(Boolean).join(" "),C.ref=S,(0,t.createElement)(k,C)}(x,e,r,A)};return _.displayName=v,(x=t.forwardRef(_)).attrs=k,x.componentStyle=C,x.displayName=v,x.shouldForwardProp=w,x.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):h,x.styledComponentId=S,x.target=o?e.target:e,x.withComponent=function(e){var t=r.componentId,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(r,["componentId"]),i=t&&t+"-"+(be(e)?e:ge(g(e)));return Ae(e,f({},o,{attrs:k,componentId:i}),n)},Object.defineProperty(x,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?we({},e.defaultProps,t):t}}),x.toString=function(){return"."+x.styledComponentId},i&&l()(x,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),x}var _e,Ee=function(t){return function t(r,n,o){if(void 0===o&&(o=y),!(0,e.isValidElementType)(n))return w(1,String(n));var i=function(){return r(n,o,he.apply(void 0,arguments))};return i.withConfig=function(e){return t(r,n,f({},o,{},e))},i.attrs=function(e){return t(r,n,f({},o,{attrs:Array.prototype.concat(o.attrs,e).filter(Boolean)}))},i}(Ae,t)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){Ee[e]=Ee(e)})),(_e=function(e,t){this.rules=e,this.componentId=t,this.isStatic=Y(e),B.registerId(this.componentId+1)}.prototype).createStyles=function(e,t,r,n){var o=n(pe(this.rules,t,r,n).join(""),""),i=this.componentId+e;r.insertRules(i,i,o)},_e.removeStyles=function(e,t){t.clearRules(this.componentId+e)},_e.renderStyles=function(e,t,r,n){e>2&&B.registerId(this.componentId+e),this.removeStyles(e,r),this.createStyles(e,t,r,n)},function(){var e=function(){var e=this;this._emitSheetCSS=function(){var t=e.instance.toString();if(!t)return"";var r=T();return"<style "+[r&&'nonce="'+r+'"',v+'="true"','data-styled-version="5.3.6"'].filter(Boolean).join(" ")+">"+t+"</style>"},this.getStyleTags=function(){return e.sealed?w(2):e._emitSheetCSS()},this.getStyleElement=function(){var r;if(e.sealed)return w(2);var n=((r={})[v]="",r["data-styled-version"]="5.3.6",r.dangerouslySetInnerHTML={__html:e.instance.toString()},r),o=T();return o&&(n.nonce=o),[t.createElement("style",f({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new B({isServer:!0}),this.sealed=!1}.prototype;e.collectStyles=function(e){return this.sealed?w(2):t.createElement(oe,{sheet:this.instance},e)},e.interleaveWithNodeStream=function(e){return w(3)}}();var Pe,Oe,$e,Re,Ie,je,Te,ze,Fe,De=Ee;function Ne(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}De.div(Pe||(Pe=Ne(["\n display: flex;\n flex-direction: column;\n position: relative;\n"]))),De.label(Oe||(Oe=Ne(["\n font-size: 12px;\n color: #758490;\n margin-bottom: 5px;\n text-align: left;\n"])));var Me,Le,Be,Ge,He,Ue,Ve,qe=De.input($e||($e=Ne(["\n border: 1px solid #ACACAC;\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n"]))),Ye=(De(qe)(Re||(Re=Ne(["\n border: 1px solid #DA1E28;\n &:focus{\n border: 1px solid #DA1E28;\n }\n"]))),De(qe)(Ie||(Ie=Ne(["\n border: 1px solid #24A148;\n &:focus{\n border: 1px solid #24A148;\n }\n"]))),De(qe)(je||(je=Ne(["\n background: #EFEFEF;\n border: none;\n cursor: no-drop;\n pointer-events: none;\n &:focus{\n border: none;\n }\n"]))),De.span(Te||(Te=Ne(["\n color: #758498;\n font-size: 12px;\n text-align: left;\n margin-top: 2px;\n position: absolute;\n bottom: -15px;\n left: 15px;\n font-style: italic;\n"]))));function We(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}De(Ye)(ze||(ze=Ne(["\n color: #DA1E28;\n font-style: normal;\n"]))),De(Ye)(Fe||(Fe=Ne(["\n color: #24A148;\n font-style: normal;\n"])));var Xe=De.button(Me||(Me=We(["\n background: #1d1d1d;\n color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 3px;\n height: 35px;\n box-sizing: border-box;\n padding: 0 20px;\n font-size: 14px;\n transition: all 300ms ease-in-out 0s;\n"])));De(Xe)(Le||(Le=We(["\n background: #0055AF;\n &:hover{\n background: #033162;\n }\n"]))),De(Xe)(Be||(Be=We(["\n background: #fff;\n border: 1px solid #afafaf;\n color: #AFAFAF;\n cursor: default;\n"]))),De(Xe)(Ge||(Ge=We(["\n background: #fff;\n border: 1px solid #0055AF;\n color: #0055AF;\n &:hover{\n border: 1px solid #033162;\n color: #033162;\n }\n"]))),De(Xe)(He||(He=We(["\n background: #AFAFAF;\n cursor: default;\n"]))),De(Xe)(Ue||(Ue=We(["\n background: #fff;\n color: #0055AF;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover{\n color: #033162;\n }\n"]))),De(Xe)(Ve||(Ve=We(["\n background: #fff;\n color: #afafaf;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n"])))}()}();
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license React
|
|
3
|
+
* react.production.min.js
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** @license React v16.13.1
|
|
12
|
+
* react-is.production.min.js
|
|
13
|
+
*
|
|
14
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the MIT license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/** @license React v17.0.2
|
|
21
|
+
* react-is.production.min.js
|
|
22
|
+
*
|
|
23
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
24
|
+
*
|
|
25
|
+
* This source code is licensed under the MIT license found in the
|
|
26
|
+
* LICENSE file in the root directory of this source tree.
|
|
27
|
+
*/
|
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "impact-ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"main": "./dist/lib/index.js",
|
|
6
|
+
"dependencies": {
|
|
7
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
8
|
+
"@testing-library/react": "^13.4.0",
|
|
9
|
+
"@testing-library/user-event": "^13.5.0",
|
|
10
|
+
"react": "^18.2.0",
|
|
11
|
+
"react-dom": "^18.2.0",
|
|
12
|
+
"react-scripts": "5.0.1",
|
|
13
|
+
"styled-components": "^5.3.6",
|
|
14
|
+
"web-vitals": "^2.1.4"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"start": "react-scripts start",
|
|
18
|
+
"build": "react-scripts build",
|
|
19
|
+
"build:lib": "webpack",
|
|
20
|
+
"test": "react-scripts test",
|
|
21
|
+
"eject": "react-scripts eject"
|
|
22
|
+
},
|
|
23
|
+
"eslintConfig": {
|
|
24
|
+
"extends": [
|
|
25
|
+
"react-app",
|
|
26
|
+
"react-app/jest"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"browserslist": {
|
|
30
|
+
"production": [
|
|
31
|
+
">0.2%",
|
|
32
|
+
"not dead",
|
|
33
|
+
"not op_mini all"
|
|
34
|
+
],
|
|
35
|
+
"development": [
|
|
36
|
+
"last 1 chrome version",
|
|
37
|
+
"last 1 firefox version",
|
|
38
|
+
"last 1 safari version"
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@babel/core": "^7.20.12",
|
|
43
|
+
"@babel/preset-env": "^7.20.2",
|
|
44
|
+
"@babel/preset-react": "^7.18.6",
|
|
45
|
+
"babel-loader": "^9.1.2",
|
|
46
|
+
"webpack": "^5.75.0",
|
|
47
|
+
"webpack-cli": "^5.0.1"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="theme-color" content="#000000" />
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="Web site created using create-react-app"
|
|
11
|
+
/>
|
|
12
|
+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
13
|
+
<!--
|
|
14
|
+
manifest.json provides metadata used when your web app is installed on a
|
|
15
|
+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
16
|
+
-->
|
|
17
|
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
18
|
+
<!--
|
|
19
|
+
Notice the use of %PUBLIC_URL% in the tags above.
|
|
20
|
+
It will be replaced with the URL of the `public` folder during the build.
|
|
21
|
+
Only files inside the `public` folder can be referenced from the HTML.
|
|
22
|
+
|
|
23
|
+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
24
|
+
work correctly both with client-side routing and a non-root public URL.
|
|
25
|
+
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
|
+
-->
|
|
27
|
+
<title>React App</title>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
31
|
+
<div id="root"></div>
|
|
32
|
+
<!--
|
|
33
|
+
This HTML file is a template.
|
|
34
|
+
If you open it directly in the browser, you will see an empty page.
|
|
35
|
+
|
|
36
|
+
You can add webfonts, meta tags, or analytics to this file.
|
|
37
|
+
The build step will place the bundled scripts into the <body> tag.
|
|
38
|
+
|
|
39
|
+
To begin the development, run `npm start` or `yarn start`.
|
|
40
|
+
To create a production bundle, use `npm run build` or `yarn build`.
|
|
41
|
+
-->
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"short_name": "React App",
|
|
3
|
+
"name": "Create React App Sample",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
package/src/App.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.App {
|
|
2
|
+
text-align: center;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.App-logo {
|
|
6
|
+
height: 40vmin;
|
|
7
|
+
pointer-events: none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
|
|
11
|
+
body{
|
|
12
|
+
font-family: 'Rubik', sans-serif;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
}
|
|
15
|
+
h1,h2,h3,h4,h5,h6,p{
|
|
16
|
+
padding: 0;
|
|
17
|
+
margin: 0;
|
|
18
|
+
text-align: left;
|
|
19
|
+
}
|
|
20
|
+
input{
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
}
|
|
24
|
+
input:focus{
|
|
25
|
+
outline: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
::placeholder {
|
|
29
|
+
color: #C4C4C4;
|
|
30
|
+
}
|
package/src/App.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
|
|
2
|
+
import { createGlobalStyle } from 'styled-components';
|
|
3
|
+
import './App.css';
|
|
4
|
+
import ButtonSection from './components/global-components/button/button';
|
|
5
|
+
import PortalLayout from './components/global-components/common-misc-components/common-misc';
|
|
6
|
+
import { StyledBodyMainContainer } from './components/global-components/common-misc-components/common-misc-style';
|
|
7
|
+
import InputBox from './components/global-components/inputbox/inputbox';
|
|
8
|
+
// import {StyledlogoImageContainer}from './components/global-components/icons-images/icons';
|
|
9
|
+
const GlobalStyle = createGlobalStyle`
|
|
10
|
+
button{
|
|
11
|
+
font-family: 'Rubik', sans-serif;
|
|
12
|
+
}
|
|
13
|
+
`
|
|
14
|
+
|
|
15
|
+
function App() {
|
|
16
|
+
return (
|
|
17
|
+
|
|
18
|
+
<div className="App">
|
|
19
|
+
<GlobalStyle />
|
|
20
|
+
|
|
21
|
+
{/* Header starts here */}
|
|
22
|
+
|
|
23
|
+
<PortalLayout />
|
|
24
|
+
|
|
25
|
+
{/* Header ends here */}
|
|
26
|
+
|
|
27
|
+
{/* Body starts here */}
|
|
28
|
+
|
|
29
|
+
<StyledBodyMainContainer>
|
|
30
|
+
|
|
31
|
+
<ButtonSection />
|
|
32
|
+
|
|
33
|
+
<InputBox />
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
</StyledBodyMainContainer>
|
|
37
|
+
|
|
38
|
+
{/* Body ends here */}
|
|
39
|
+
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
export default App;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
3
|
+
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
4
|
+
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="330.000000pt" height="150.000000pt" viewBox="0 0 330.000000 150.000000"
|
|
6
|
+
preserveAspectRatio="xMidYMid meet">
|
|
7
|
+
|
|
8
|
+
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
|
|
9
|
+
fill="#000000" stroke="none">
|
|
10
|
+
</g>
|
|
11
|
+
</svg>
|
|
Binary file
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
StyledButton,
|
|
4
|
+
StyledPrimaryButton,
|
|
5
|
+
StyledSecondaryButton,
|
|
6
|
+
StyledDisabledButton,
|
|
7
|
+
StyledURLButton,
|
|
8
|
+
StyledSecondaryDiasabledButton,
|
|
9
|
+
StyledDisabledURLButton,
|
|
10
|
+
} from "../../../lib";
|
|
11
|
+
import {
|
|
12
|
+
StyledHeadingCommon,
|
|
13
|
+
StyledMiscPara,
|
|
14
|
+
BoxContainer,
|
|
15
|
+
StyledDSHeader,
|
|
16
|
+
LeftLogoContainer,
|
|
17
|
+
StyledURLContainer,
|
|
18
|
+
StyledULHeaderList,
|
|
19
|
+
StyledHeaderLI,
|
|
20
|
+
StyledBodyMainContainer,
|
|
21
|
+
StyledCodeBoxContainer,
|
|
22
|
+
StyledCodeBoxMainContainer,
|
|
23
|
+
StyledCodeLineContainer,
|
|
24
|
+
StyledCodeLineContainerTag,
|
|
25
|
+
StyledCodeLineContainerTagContainer,
|
|
26
|
+
} from "./../../../components/global-components/common-misc-components/common-misc-style";
|
|
27
|
+
import {
|
|
28
|
+
SmPadding,
|
|
29
|
+
MedPadding,
|
|
30
|
+
LargePadding,
|
|
31
|
+
} from "./../../../components/global-components/Grids-spacing/grid-spacing";
|
|
32
|
+
const ButtonSection = () => {
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<LargePadding>
|
|
36
|
+
<StyledHeadingCommon>01: CTA BUTTONS</StyledHeadingCommon>
|
|
37
|
+
<StyledMiscPara>
|
|
38
|
+
A call to action (CTA) is a standard way to prompt user to click on
|
|
39
|
+
it, in form or button or URL. Label displayed on CTA must be a single
|
|
40
|
+
word and preferably a verb. The label must be able to communicate to
|
|
41
|
+
the users he actions they are going to take and what effect it will
|
|
42
|
+
have on the content being viewed.
|
|
43
|
+
</StyledMiscPara>
|
|
44
|
+
<StyledMiscPara>
|
|
45
|
+
A primary CTA button is to be placed when the button represents a
|
|
46
|
+
major action performed on the page. This CTA is at highest hierarchy /
|
|
47
|
+
importance on the page. Usually represents actions conclusive in
|
|
48
|
+
nature.
|
|
49
|
+
</StyledMiscPara>
|
|
50
|
+
</LargePadding>
|
|
51
|
+
<BoxContainer>
|
|
52
|
+
<LargePadding>
|
|
53
|
+
<StyledButton>Button</StyledButton>
|
|
54
|
+
</LargePadding>
|
|
55
|
+
|
|
56
|
+
<StyledPrimaryButton>Primary Button</StyledPrimaryButton>
|
|
57
|
+
|
|
58
|
+
<LargePadding>
|
|
59
|
+
<StyledSecondaryButton>Secondary Button</StyledSecondaryButton>
|
|
60
|
+
</LargePadding>
|
|
61
|
+
<LargePadding>
|
|
62
|
+
<StyledSecondaryDiasabledButton>
|
|
63
|
+
Secondary Disabled Button
|
|
64
|
+
</StyledSecondaryDiasabledButton>
|
|
65
|
+
</LargePadding>
|
|
66
|
+
<LargePadding>
|
|
67
|
+
<StyledDisabledButton>Disabled Button</StyledDisabledButton>
|
|
68
|
+
</LargePadding>
|
|
69
|
+
|
|
70
|
+
<LargePadding>
|
|
71
|
+
<StyledURLButton>This is a Tertiary URL</StyledURLButton>
|
|
72
|
+
</LargePadding>
|
|
73
|
+
<LargePadding>
|
|
74
|
+
<StyledDisabledURLButton>
|
|
75
|
+
This is a Tertiary URL
|
|
76
|
+
</StyledDisabledURLButton>
|
|
77
|
+
</LargePadding>
|
|
78
|
+
</BoxContainer>
|
|
79
|
+
|
|
80
|
+
<LargePadding>
|
|
81
|
+
<StyledCodeBoxMainContainer>
|
|
82
|
+
<StyledCodeBoxContainer>
|
|
83
|
+
<StyledCodeLineContainer>
|
|
84
|
+
import React from 'react';
|
|
85
|
+
</StyledCodeLineContainer>
|
|
86
|
+
<StyledCodeLineContainer>
|
|
87
|
+
import styled from 'styled-components';
|
|
88
|
+
</StyledCodeLineContainer>
|
|
89
|
+
<StyledCodeLineContainer>
|
|
90
|
+
import StyledButton, StyledPrimaryButton,StyledSecondaryButton,
|
|
91
|
+
StyledDisabledButton, StyledURLButton,
|
|
92
|
+
StyledSecondaryDiasabledButton, StyledDisabledURLButton from
|
|
93
|
+
'./components';
|
|
94
|
+
</StyledCodeLineContainer>
|
|
95
|
+
<StyledCodeLineContainerTagContainer>
|
|
96
|
+
<StyledCodeLineContainerTag>
|
|
97
|
+
{`<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
|
|
98
|
+
</StyledCodeLineContainerTag>
|
|
99
|
+
<StyledCodeLineContainerTag>
|
|
100
|
+
{` <StyledSecondaryButton>Secondary Button</StyledSecondaryButton>`}
|
|
101
|
+
</StyledCodeLineContainerTag>
|
|
102
|
+
<StyledCodeLineContainerTag>
|
|
103
|
+
{`<StyledSecondaryDiasabledButton>Secondary Disabled Button</StyledSecondaryDiasabledButton>`}
|
|
104
|
+
</StyledCodeLineContainerTag>
|
|
105
|
+
<StyledCodeLineContainerTag>
|
|
106
|
+
{`<StyledDisabledButton>Disabled Button</StyledDisabledButton>`}
|
|
107
|
+
</StyledCodeLineContainerTag>
|
|
108
|
+
<StyledCodeLineContainerTag>
|
|
109
|
+
{`<StyledURLButton>This is a Tertiary URL</StyledURLButton>`}
|
|
110
|
+
</StyledCodeLineContainerTag>
|
|
111
|
+
<StyledCodeLineContainerTag>
|
|
112
|
+
{`<StyledDisabledURLButton>This is a Tertiary URL</StyledDisabledURLButton>`}
|
|
113
|
+
</StyledCodeLineContainerTag>
|
|
114
|
+
</StyledCodeLineContainerTagContainer>
|
|
115
|
+
{/* <LargePadding>
|
|
116
|
+
<code>
|
|
117
|
+
{ `<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
|
|
118
|
+
</code>
|
|
119
|
+
</LargePadding> */}
|
|
120
|
+
</StyledCodeBoxContainer>
|
|
121
|
+
</StyledCodeBoxMainContainer>
|
|
122
|
+
</LargePadding>
|
|
123
|
+
|
|
124
|
+
{/* Box copy container */}
|
|
125
|
+
</div>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
export default ButtonSection;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
|
|
2
|
+
import styled,{ css } from 'styled-components';
|
|
3
|
+
export const StyledHeadingCommon = styled.h2`
|
|
4
|
+
color: #033162;
|
|
5
|
+
font-size: 20px;
|
|
6
|
+
font-weight: 500;
|
|
7
|
+
text-align: left;
|
|
8
|
+
border-bottom: 1px solid #d4d4d4;
|
|
9
|
+
padding-bottom: 15px;
|
|
10
|
+
`;
|
|
11
|
+
|
|
12
|
+
export const StyledMiscPara = styled.p`
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
color: #1d1d1d;
|
|
15
|
+
margin-top: 20px;
|
|
16
|
+
line-height: 26px;
|
|
17
|
+
`;
|
|
18
|
+
|
|
19
|
+
export const BoxContainer = styled.div`
|
|
20
|
+
padding: 15px;
|
|
21
|
+
border: 1px solid #d4d4d4;
|
|
22
|
+
margin: 15px;
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
export const StyledDSHeader = styled.header`
|
|
28
|
+
height: 60px;
|
|
29
|
+
padding: 0 20px;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
align-items: center;
|
|
34
|
+
position: absolute;
|
|
35
|
+
left: 0;
|
|
36
|
+
right: 0;
|
|
37
|
+
top: 0;
|
|
38
|
+
z-index: 9999;
|
|
39
|
+
background: #0055AF;
|
|
40
|
+
`;
|
|
41
|
+
|
|
42
|
+
export const LeftLogoContainer = styled.div`
|
|
43
|
+
font-size: 18px;
|
|
44
|
+
color: #fff;
|
|
45
|
+
font-weight: 500;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
export const StyledURLContainer = styled.div``;
|
|
50
|
+
|
|
51
|
+
export const StyledULHeaderList = styled.ul`
|
|
52
|
+
display: flex;
|
|
53
|
+
`;
|
|
54
|
+
|
|
55
|
+
export const StyledHeaderLI = styled.li`
|
|
56
|
+
color: #fff;
|
|
57
|
+
list-style: none;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
margin-left: 15px;
|
|
60
|
+
${props => props.UrlActive && css`
|
|
61
|
+
font-weight: 600;
|
|
62
|
+
text-decoration: underline;
|
|
63
|
+
padding-bottom: 4px;
|
|
64
|
+
`}
|
|
65
|
+
`;
|
|
66
|
+
|
|
67
|
+
export const StyledBodyMainContainer = styled.div`
|
|
68
|
+
position: absolute;
|
|
69
|
+
left: 200px;
|
|
70
|
+
right: 0;
|
|
71
|
+
top: 60px;
|
|
72
|
+
bottom: 0;
|
|
73
|
+
overflow: auto;
|
|
74
|
+
border-left: 1px solid #d4d4d4;
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
export const StyledCodeBoxContainer = styled.code`
|
|
78
|
+
padding: 20px;
|
|
79
|
+
background: #F4F5F7;
|
|
80
|
+
display: block;
|
|
81
|
+
border: 1px solid #d4d4d4;
|
|
82
|
+
border-radius: 3px;
|
|
83
|
+
`;
|
|
84
|
+
|
|
85
|
+
export const StyledCodeBoxMainContainer = styled.div`
|
|
86
|
+
position: relative;
|
|
87
|
+
`;
|
|
88
|
+
|
|
89
|
+
export const StyledCodeLineContainer = styled.div`
|
|
90
|
+
text-align: left;
|
|
91
|
+
margin-bottom: 10px;
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
`;
|
|
94
|
+
|
|
95
|
+
export const StyledAsideNav = styled.nav`
|
|
96
|
+
width: 200px;
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: 60px;
|
|
99
|
+
bottom: 0;
|
|
100
|
+
left: 0;
|
|
101
|
+
border-right: 1px solid #d4d4d4;
|
|
102
|
+
`;
|
|
103
|
+
|
|
104
|
+
export const StyledAsideMainHeading = styled.div`
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
|
|
107
|
+
padding: 10px 0px;
|
|
108
|
+
text-align: left;
|
|
109
|
+
padding-left: 20px;
|
|
110
|
+
font-weight: 500;
|
|
111
|
+
letter-spacing: 0.3px;
|
|
112
|
+
`;
|
|
113
|
+
|
|
114
|
+
export const StyledAsideUL = styled.ul`
|
|
115
|
+
padding: 0;
|
|
116
|
+
margin: 0;
|
|
117
|
+
|
|
118
|
+
`;
|
|
119
|
+
|
|
120
|
+
export const StyledAsideLi = styled.li`
|
|
121
|
+
list-style: none;
|
|
122
|
+
text-align: left;
|
|
123
|
+
padding: 10px 0px;
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
cursor: pointer;
|
|
126
|
+
color: #1d1d1d;
|
|
127
|
+
transition: all 300ms ease-in-out 0s;
|
|
128
|
+
padding-left: 20px;
|
|
129
|
+
${props => props.StyleURLActiveAside && css`
|
|
130
|
+
font-weight: 600;
|
|
131
|
+
color: #0055AF;
|
|
132
|
+
background: #e9f2ff;
|
|
133
|
+
`}
|
|
134
|
+
&:hover{
|
|
135
|
+
color: #0055AF;
|
|
136
|
+
background: #f4f5f7;
|
|
137
|
+
}
|
|
138
|
+
`;
|
|
139
|
+
|
|
140
|
+
export const StyledCodeLineContainerTag = styled.div`
|
|
141
|
+
font-weight: 500;
|
|
142
|
+
color: #033162;
|
|
143
|
+
text-align: left;
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
margin-bottom: 10px;
|
|
146
|
+
`;
|
|
147
|
+
|
|
148
|
+
export const StyledCodeLineContainerTagContainer = styled.div`
|
|
149
|
+
margin-top: 40px;
|
|
150
|
+
`;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
|
|
2
|
+
import {StyledHeadingCommon,StyledMiscPara,BoxContainer,StyledDSHeader, LeftLogoContainer,StyledURLContainer,StyledULHeaderList,StyledHeaderLI,StyledBodyMainContainer,StyledCodeBoxContainer,StyledCodeBoxMainContainer, StyledCodeLineContainer, StyledAsideNav, StyledAsideMainHeading,StyledAsideUL,StyledAsideLi} from './common-misc-style';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
const PortalLayout = () => {
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<StyledDSHeader>
|
|
11
|
+
|
|
12
|
+
<LeftLogoContainer>Impact Style UI</LeftLogoContainer>
|
|
13
|
+
|
|
14
|
+
<StyledURLContainer>
|
|
15
|
+
<StyledULHeaderList>
|
|
16
|
+
<StyledHeaderLI>Get Started</StyledHeaderLI>
|
|
17
|
+
<StyledHeaderLI UrlActive>Components</StyledHeaderLI>
|
|
18
|
+
<StyledHeaderLI>Pattern</StyledHeaderLI>
|
|
19
|
+
<StyledHeaderLI>Foundations</StyledHeaderLI>
|
|
20
|
+
<StyledHeaderLI>Resources</StyledHeaderLI>
|
|
21
|
+
</StyledULHeaderList>
|
|
22
|
+
</StyledURLContainer>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
</StyledDSHeader>
|
|
26
|
+
|
|
27
|
+
<StyledAsideNav>
|
|
28
|
+
|
|
29
|
+
<StyledAsideMainHeading>
|
|
30
|
+
Global Components
|
|
31
|
+
</StyledAsideMainHeading>
|
|
32
|
+
|
|
33
|
+
<StyledAsideUL>
|
|
34
|
+
<StyledAsideLi StyleURLActiveAside>
|
|
35
|
+
CTA Button
|
|
36
|
+
</StyledAsideLi>
|
|
37
|
+
<StyledAsideLi>
|
|
38
|
+
Check box
|
|
39
|
+
</StyledAsideLi>
|
|
40
|
+
<StyledAsideLi>
|
|
41
|
+
Input Box
|
|
42
|
+
</StyledAsideLi>
|
|
43
|
+
</StyledAsideUL>
|
|
44
|
+
|
|
45
|
+
</StyledAsideNav>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default PortalLayout;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
|
|
2
|
+
// import styled from 'styled-components';
|
|
3
|
+
// import LogoImage from '../../global-components/icons-images/Logo.svg';
|
|
4
|
+
// import Location from '../icons-images/location.png';
|
|
5
|
+
|
|
6
|
+
// export const StyledlogoImageContainer = styled.div`
|
|
7
|
+
// background: url(${LogoImage});
|
|
8
|
+
// width: 50px;
|
|
9
|
+
// height: 50px;
|
|
10
|
+
// background-size: cover;
|
|
11
|
+
// `;
|
|
12
|
+
|
|
13
|
+
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import {
|
|
4
|
+
StyledHeadingCommon,
|
|
5
|
+
StyledMiscPara,
|
|
6
|
+
BoxContainer,
|
|
7
|
+
StyledDSHeader,
|
|
8
|
+
LeftLogoContainer,
|
|
9
|
+
StyledURLContainer,
|
|
10
|
+
StyledULHeaderList,
|
|
11
|
+
StyledHeaderLI,
|
|
12
|
+
StyledBodyMainContainer,
|
|
13
|
+
StyledCodeBoxContainer,
|
|
14
|
+
StyledCodeBoxMainContainer,
|
|
15
|
+
StyledCodeLineContainer,
|
|
16
|
+
StyledCodeLineContainerTag,
|
|
17
|
+
StyledCodeLineContainerTagContainer,
|
|
18
|
+
} from "./../../../components/global-components/common-misc-components/common-misc-style";
|
|
19
|
+
import {
|
|
20
|
+
SmPadding,
|
|
21
|
+
MedPadding,
|
|
22
|
+
LargePadding,
|
|
23
|
+
} from "./../../../components/global-components/Grids-spacing/grid-spacing";
|
|
24
|
+
import {
|
|
25
|
+
StyledInputBoxContainer,
|
|
26
|
+
StyledInputLabelContainer,
|
|
27
|
+
StyledInputBox,
|
|
28
|
+
StyledHelperText,
|
|
29
|
+
StyledErrorText,
|
|
30
|
+
StyledSuccessText,
|
|
31
|
+
StyledInputBoxDisabled,
|
|
32
|
+
StyledInputBoxError,
|
|
33
|
+
StyledInputBoxSuccess,
|
|
34
|
+
} from "../../../lib";
|
|
35
|
+
const InputBox = () => {
|
|
36
|
+
return (
|
|
37
|
+
<div>
|
|
38
|
+
<LargePadding>
|
|
39
|
+
<StyledHeadingCommon>02: INPUT BOX</StyledHeadingCommon>
|
|
40
|
+
<StyledMiscPara>
|
|
41
|
+
A text field is a basic text control that enables the user to type a
|
|
42
|
+
small amount of text. No matter what app you use, you’re bound to run
|
|
43
|
+
across some little text field requiring your personal information.
|
|
44
|
+
Even typing a question into Google is considered filling out a form
|
|
45
|
+
which has only one text field. This component is mainly used to enter
|
|
46
|
+
long or short form entries.
|
|
47
|
+
</StyledMiscPara>
|
|
48
|
+
</LargePadding>
|
|
49
|
+
<BoxContainer>
|
|
50
|
+
<LargePadding>
|
|
51
|
+
<StyledInputBoxContainer>
|
|
52
|
+
<StyledInputLabelContainer>
|
|
53
|
+
Inputbox Label
|
|
54
|
+
</StyledInputLabelContainer>
|
|
55
|
+
<StyledInputBox placeholder="Enter text" />
|
|
56
|
+
</StyledInputBoxContainer>
|
|
57
|
+
</LargePadding>
|
|
58
|
+
<LargePadding>
|
|
59
|
+
<StyledInputBoxContainer>
|
|
60
|
+
<StyledInputLabelContainer>
|
|
61
|
+
Inputbox with Helper text
|
|
62
|
+
</StyledInputLabelContainer>
|
|
63
|
+
<StyledInputBox placeholder="Enter text" />
|
|
64
|
+
<StyledHelperText>Please enter Helper Text</StyledHelperText>
|
|
65
|
+
</StyledInputBoxContainer>
|
|
66
|
+
</LargePadding>
|
|
67
|
+
<LargePadding>
|
|
68
|
+
<StyledInputBoxContainer>
|
|
69
|
+
<StyledInputLabelContainer>
|
|
70
|
+
Inputbox with Error text
|
|
71
|
+
</StyledInputLabelContainer>
|
|
72
|
+
<StyledInputBoxError placeholder="Enter text" />
|
|
73
|
+
<StyledErrorText>Please enter Error Text</StyledErrorText>
|
|
74
|
+
</StyledInputBoxContainer>
|
|
75
|
+
</LargePadding>
|
|
76
|
+
<LargePadding>
|
|
77
|
+
<StyledInputBoxContainer>
|
|
78
|
+
<StyledInputLabelContainer>
|
|
79
|
+
Inputbox with Success text
|
|
80
|
+
</StyledInputLabelContainer>
|
|
81
|
+
<StyledInputBoxSuccess placeholder="Enter text" />
|
|
82
|
+
<StyledSuccessText>Please enter Success Text</StyledSuccessText>
|
|
83
|
+
</StyledInputBoxContainer>
|
|
84
|
+
</LargePadding>
|
|
85
|
+
<LargePadding>
|
|
86
|
+
<StyledInputBoxContainer>
|
|
87
|
+
<StyledInputLabelContainer>
|
|
88
|
+
Inputbox with Disabled
|
|
89
|
+
</StyledInputLabelContainer>
|
|
90
|
+
<StyledInputBoxDisabled placeholder="Enter text" />
|
|
91
|
+
</StyledInputBoxContainer>
|
|
92
|
+
</LargePadding>
|
|
93
|
+
</BoxContainer>
|
|
94
|
+
|
|
95
|
+
<LargePadding>
|
|
96
|
+
<StyledCodeBoxMainContainer>
|
|
97
|
+
<StyledCodeBoxContainer>
|
|
98
|
+
<StyledCodeLineContainer>
|
|
99
|
+
import React from 'react';
|
|
100
|
+
</StyledCodeLineContainer>
|
|
101
|
+
<StyledCodeLineContainer>
|
|
102
|
+
import styled from 'styled-components';
|
|
103
|
+
</StyledCodeLineContainer>
|
|
104
|
+
<StyledCodeLineContainer>
|
|
105
|
+
import StyledInputBoxContainer,StyledInputLabelContainer,
|
|
106
|
+
StyledInputBox,StyledHelperText,
|
|
107
|
+
StyledErrorText,StyledSuccessText, StyledInputBoxDisabled from
|
|
108
|
+
'./components';
|
|
109
|
+
</StyledCodeLineContainer>
|
|
110
|
+
<StyledCodeLineContainerTagContainer>
|
|
111
|
+
<StyledCodeLineContainerTag>
|
|
112
|
+
{`<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
|
|
113
|
+
</StyledCodeLineContainerTag>
|
|
114
|
+
<StyledCodeLineContainerTag>
|
|
115
|
+
{` <StyledSecondaryButton>Secondary Button</StyledSecondaryButton>`}
|
|
116
|
+
</StyledCodeLineContainerTag>
|
|
117
|
+
<StyledCodeLineContainerTag>
|
|
118
|
+
{`<StyledSecondaryDiasabledButton>Secondary Disabled Button</StyledSecondaryDiasabledButton>`}
|
|
119
|
+
</StyledCodeLineContainerTag>
|
|
120
|
+
<StyledCodeLineContainerTag>
|
|
121
|
+
{`<StyledDisabledButton>Disabled Button</StyledDisabledButton>`}
|
|
122
|
+
</StyledCodeLineContainerTag>
|
|
123
|
+
<StyledCodeLineContainerTag>
|
|
124
|
+
{`<StyledURLButton>This is a Tertiary URL</StyledURLButton>`}
|
|
125
|
+
</StyledCodeLineContainerTag>
|
|
126
|
+
<StyledCodeLineContainerTag>
|
|
127
|
+
{`<StyledDisabledURLButton>This is a Tertiary URL</StyledDisabledURLButton>`}
|
|
128
|
+
</StyledCodeLineContainerTag>
|
|
129
|
+
</StyledCodeLineContainerTagContainer>
|
|
130
|
+
{/* <LargePadding>
|
|
131
|
+
<code>
|
|
132
|
+
{ `<StyledPrimaryButton>Primary Button</StyledPrimaryButton>`}
|
|
133
|
+
</code>
|
|
134
|
+
</LargePadding> */}
|
|
135
|
+
</StyledCodeBoxContainer>
|
|
136
|
+
</StyledCodeBoxMainContainer>
|
|
137
|
+
</LargePadding>
|
|
138
|
+
</div>
|
|
139
|
+
);
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
export default InputBox;
|
package/src/index.css
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
4
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
5
|
+
sans-serif;
|
|
6
|
+
-webkit-font-smoothing: antialiased;
|
|
7
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
code {
|
|
11
|
+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
12
|
+
monospace;
|
|
13
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import App from './App';
|
|
4
|
+
import './index.css';
|
|
5
|
+
|
|
6
|
+
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
7
|
+
root.render(
|
|
8
|
+
<React.StrictMode>
|
|
9
|
+
<App />
|
|
10
|
+
</React.StrictMode>
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
// export const StyledPrimaryButton = styled.button`
|
|
4
|
+
// background: red;
|
|
5
|
+
// border: none;
|
|
6
|
+
// `
|
|
7
|
+
|
|
8
|
+
export const StyledButton = styled.button`
|
|
9
|
+
background: #1d1d1d;
|
|
10
|
+
color: #fff;
|
|
11
|
+
border: none;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
border-radius: 3px;
|
|
14
|
+
height: 35px;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
padding: 0 20px;
|
|
17
|
+
font-size: 14px;
|
|
18
|
+
transition: all 300ms ease-in-out 0s;
|
|
19
|
+
`
|
|
20
|
+
|
|
21
|
+
export const StyledPrimaryButton = styled(StyledButton)`
|
|
22
|
+
background: #0055AF;
|
|
23
|
+
&:hover{
|
|
24
|
+
background: #033162;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
|
|
28
|
+
export const StyledSecondaryDiasabledButton = styled(StyledButton)`
|
|
29
|
+
background: #fff;
|
|
30
|
+
border: 1px solid #afafaf;
|
|
31
|
+
color: #AFAFAF;
|
|
32
|
+
cursor: default;
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
export const StyledSecondaryButton = styled(StyledButton)`
|
|
36
|
+
background: #fff;
|
|
37
|
+
border: 1px solid #0055AF;
|
|
38
|
+
color: #0055AF;
|
|
39
|
+
&:hover{
|
|
40
|
+
border: 1px solid #033162;
|
|
41
|
+
color: #033162;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
|
|
45
|
+
export const StyledDisabledButton = styled(StyledButton)`
|
|
46
|
+
background: #AFAFAF;
|
|
47
|
+
cursor: default;
|
|
48
|
+
`;
|
|
49
|
+
|
|
50
|
+
export const StyledURLButton = styled(StyledButton)`
|
|
51
|
+
background: #fff;
|
|
52
|
+
color: #0055AF;
|
|
53
|
+
font-size: 16px;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
padding: 0px;
|
|
56
|
+
height: auto;
|
|
57
|
+
&:hover{
|
|
58
|
+
color: #033162;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
|
|
62
|
+
export const StyledDisabledURLButton = styled(StyledButton)`
|
|
63
|
+
background: #fff;
|
|
64
|
+
color: #afafaf;
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
padding: 0px;
|
|
68
|
+
height: auto;
|
|
69
|
+
cursor: default;
|
|
70
|
+
`;
|
|
71
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
StyledButton,
|
|
4
|
+
StyledPrimaryButton,
|
|
5
|
+
StyledSecondaryButton,
|
|
6
|
+
StyledDisabledButton,
|
|
7
|
+
StyledURLButton,
|
|
8
|
+
StyledSecondaryDiasabledButton,
|
|
9
|
+
StyledDisabledURLButton,
|
|
10
|
+
} from "./button-style";
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
StyledButton,
|
|
14
|
+
StyledPrimaryButton,
|
|
15
|
+
StyledSecondaryButton,
|
|
16
|
+
StyledDisabledButton,
|
|
17
|
+
StyledURLButton,
|
|
18
|
+
StyledSecondaryDiasabledButton,
|
|
19
|
+
StyledDisabledURLButton,
|
|
20
|
+
};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const StyledInputBoxContainer = styled.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
position: relative;
|
|
7
|
+
`;
|
|
8
|
+
export const StyledInputLabelContainer = styled.label`
|
|
9
|
+
font-size: 12px;
|
|
10
|
+
color: #758490;
|
|
11
|
+
margin-bottom: 5px;
|
|
12
|
+
text-align: left;
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
export const StyledInputBox = styled.input`
|
|
16
|
+
border: 1px solid #ACACAC;
|
|
17
|
+
border-radius: 3px;
|
|
18
|
+
padding: 0px 15px;
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
height: 35px;
|
|
21
|
+
font-size: 14px;
|
|
22
|
+
color: #1d1d1d;
|
|
23
|
+
&:focus{
|
|
24
|
+
border: 1px solid #0055AF;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
export const StyledInputBoxError = styled(StyledInputBox)`
|
|
28
|
+
border: 1px solid #DA1E28;
|
|
29
|
+
&:focus{
|
|
30
|
+
border: 1px solid #DA1E28;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
|
|
34
|
+
export const StyledInputBoxSuccess = styled(StyledInputBox)`
|
|
35
|
+
border: 1px solid #24A148;
|
|
36
|
+
&:focus{
|
|
37
|
+
border: 1px solid #24A148;
|
|
38
|
+
}
|
|
39
|
+
`;
|
|
40
|
+
|
|
41
|
+
export const StyledInputBoxDisabled = styled(StyledInputBox)`
|
|
42
|
+
background: #EFEFEF;
|
|
43
|
+
border: none;
|
|
44
|
+
cursor: no-drop;
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
&:focus{
|
|
47
|
+
border: none;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
|
|
51
|
+
export const StyledHelperText = styled.span`
|
|
52
|
+
color: #758498;
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
text-align: left;
|
|
55
|
+
margin-top: 2px;
|
|
56
|
+
position: absolute;
|
|
57
|
+
bottom: -15px;
|
|
58
|
+
left: 15px;
|
|
59
|
+
font-style: italic;
|
|
60
|
+
`;
|
|
61
|
+
|
|
62
|
+
export const StyledErrorText = styled(StyledHelperText)`
|
|
63
|
+
color: #DA1E28;
|
|
64
|
+
font-style: normal;
|
|
65
|
+
`;
|
|
66
|
+
|
|
67
|
+
export const StyledSuccessText = styled(StyledHelperText)`
|
|
68
|
+
color: #24A148;
|
|
69
|
+
font-style: normal;
|
|
70
|
+
`;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import {
|
|
2
|
+
StyledInputBoxContainer,
|
|
3
|
+
StyledInputLabelContainer,
|
|
4
|
+
StyledInputBox,
|
|
5
|
+
StyledHelperText,
|
|
6
|
+
StyledErrorText,
|
|
7
|
+
StyledSuccessText,
|
|
8
|
+
StyledInputBoxDisabled,
|
|
9
|
+
StyledInputBoxError,
|
|
10
|
+
StyledInputBoxSuccess,
|
|
11
|
+
} from "./inputbox-style";
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
StyledInputBoxContainer,
|
|
15
|
+
StyledInputLabelContainer,
|
|
16
|
+
StyledInputBox,
|
|
17
|
+
StyledHelperText,
|
|
18
|
+
StyledErrorText,
|
|
19
|
+
StyledSuccessText,
|
|
20
|
+
StyledInputBoxDisabled,
|
|
21
|
+
StyledInputBoxError,
|
|
22
|
+
StyledInputBoxSuccess,
|
|
23
|
+
};
|
package/src/lib/index.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {
|
|
2
|
+
StyledInputBoxContainer,
|
|
3
|
+
StyledInputLabelContainer,
|
|
4
|
+
StyledInputBox,
|
|
5
|
+
StyledHelperText,
|
|
6
|
+
StyledErrorText,
|
|
7
|
+
StyledSuccessText,
|
|
8
|
+
StyledInputBoxDisabled,
|
|
9
|
+
StyledInputBoxError,
|
|
10
|
+
StyledInputBoxSuccess,
|
|
11
|
+
} from "./components/global-components/inputbox/inputbox";
|
|
12
|
+
import {
|
|
13
|
+
StyledButton,
|
|
14
|
+
StyledPrimaryButton,
|
|
15
|
+
StyledSecondaryButton,
|
|
16
|
+
StyledDisabledButton,
|
|
17
|
+
StyledURLButton,
|
|
18
|
+
StyledSecondaryDiasabledButton,
|
|
19
|
+
StyledDisabledURLButton,
|
|
20
|
+
} from "./components/global-components/button/button";
|
|
21
|
+
|
|
22
|
+
export {
|
|
23
|
+
StyledInputBoxContainer,
|
|
24
|
+
StyledInputLabelContainer,
|
|
25
|
+
StyledInputBox,
|
|
26
|
+
StyledHelperText,
|
|
27
|
+
StyledErrorText,
|
|
28
|
+
StyledSuccessText,
|
|
29
|
+
StyledInputBoxDisabled,
|
|
30
|
+
StyledInputBoxError,
|
|
31
|
+
StyledInputBoxSuccess,
|
|
32
|
+
|
|
33
|
+
StyledButton,
|
|
34
|
+
StyledPrimaryButton,
|
|
35
|
+
StyledSecondaryButton,
|
|
36
|
+
StyledDisabledButton,
|
|
37
|
+
StyledURLButton,
|
|
38
|
+
StyledSecondaryDiasabledButton,
|
|
39
|
+
StyledDisabledURLButton,
|
|
40
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
mode: "production",
|
|
5
|
+
entry: path.resolve(__dirname, "src/lib/index.js"),
|
|
6
|
+
output: {
|
|
7
|
+
path: path.resolve(__dirname, "./build/lib"),
|
|
8
|
+
filename: "index.js",
|
|
9
|
+
},
|
|
10
|
+
module: {
|
|
11
|
+
rules: [
|
|
12
|
+
{
|
|
13
|
+
test: /\.js$/,
|
|
14
|
+
exclude: /(node_modules|bower_components)/,
|
|
15
|
+
loader: "babel-loader",
|
|
16
|
+
options: {
|
|
17
|
+
presets: ["@babel/preset-env", "@babel/preset-react"],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
test: /\.css$/,
|
|
22
|
+
use: ["style-loader", "css-loader"],
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
};
|