@agilekit/ui 0.0.481-alpha.0 → 0.0.484-alpha.0

package/lib/src/components/TextField/TextField.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var React = tslib_1.__importStar(require("react"));
+var Icon_1 = tslib_1.__importDefault(require("../Icon/Icon"));
+var Labelled_1 = tslib_1.__importDefault(require("../Labelled/Labelled"));
+var utils_1 = require("../utils");
+var styles = tslib_1.__importStar(require("./TextField.module.scss"));
+var generatedId = utils_1.idGenerator('TextField');
+var TextField = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, placeholder = _a.placeholder, disabled = _a.disabled, readOnly = _a.readOnly, autoFocus = _a.autoFocus, multiline = _a.multiline, focused = _a.focused, type = _a.type, name = _a.name, error = _a.error, label = _a.label, _c = _a.id, id = _c === void 0 ? generatedId() : _c, helpText = _a.helpText, iconLeft = _a.iconLeft, iconRight = _a.iconRight, prefix = _a.prefix, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var _d, _e, _f, _g;
+    var _h = tslib_1.__read(React.useState(null), 2), height = _h[0], setHeight = _h[1];
+    var _j = tslib_1.__read(React.useState(false), 2), focus = _j[0], setFocus = _j[1];
+    var className = classnames_1.default(styles['TextField'], (_d = {}, _d[styles['Disabled']] = disabled, _d), (_e = {}, _e[styles['Focus']] = focus || focused, _e), (_f = {}, _f[styles['Error']] = error, _f), (_g = {}, _g[styles['Multiline']] = multiline, _g));
+    var inputType = type === 'currency' ? 'text' : type;
+    var prefixMarkup = prefix ? (React.createElement("div", { className: styles['Prefix'], id: id + "Prefix" }, prefix)) : null;
+    var characterCount = value.length;
+    var inputClassName = classnames_1.default(styles['Input']);
+    var input = React.createElement(multiline ? 'textarea' : 'input', {
+        autoFocus: autoFocus,
+        className: inputClassName,
+        disabled: disabled,
+        id: id,
+        name: name,
+        onBlur: onBlur,
+        onChange: onChange,
+        onFocus: onFocus,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        type: inputType,
+        value: value,
+    });
+    var handleFocus = function () {
+        setFocus(true);
+    };
+    var handleBlur = function () {
+        setFocus(false);
+    };
+    var handleClick = function () {
+    };
+    return (React.createElement(Labelled_1.default, { label: label, id: id, error: error, helpText: helpText, focused: focus || focused, disabled: disabled },
+        React.createElement("div", { className: className, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick },
+            prefixMarkup,
+            input,
+            iconRight && (React.createElement("div", { className: styles['IconRight'] },
+                React.createElement(Icon_1.default, { source: iconRight, color: "grayRegent" }))),
+            React.createElement("div", { className: styles['Backdrop'] }))));
+};
+exports.default = TextField;
+//# sourceMappingURL=TextField.js.map

package/lib/src/components/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":";;;AAAA,kEAAoC;AACpC,mDAA+B;AAE/B,8DAAgC;AAEhC,0EAA4C;AAC5C,kCAAuC;AACvC,sEAAkD;AA0DlD,IAAM,WAAW,GAAG,mBAAW,CAAC,WAAW,CAAC,CAAC;AAE7C,IAAM,SAAS,GAA+B,UAAC,EAoB9C;QAnBC,aAAU,EAAV,+BAAU,EACV,4BAAW,EACX,sBAAQ,EACR,sBAAQ,EACR,wBAAS,EACT,wBAAS,EACT,oBAAO,EACP,cAAI,EACJ,cAAI,EACJ,gBAAK,EACL,gBAAK,EACL,UAAkB,EAAlB,uCAAkB,EAClB,sBAAQ,EACR,sBAAQ,EACR,wBAAS,EACT,kBAAM,EACN,sBAAQ,EACR,oBAAO,EACP,kBAAM;;IAEA,IAAA,4CAAyD,EAAxD,cAAM,EAAE,iBAAgD,CAAC;IAC1D,IAAA,6CAAkD,EAAjD,aAAK,EAAE,gBAA0C,CAAC;IAIzD,IAAM,SAAS,GAAG,oBAAU,CAC1B,MAAM,CAAC,WAAW,CAAC,YACjB,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,QAAQ,iBAC9B,GAAC,MAAM,CAAC,OAAO,CAAC,IAAG,KAAK,IAAI,OAAO,iBACnC,GAAC,MAAM,CAAC,OAAO,CAAC,IAAG,KAAK,iBACxB,GAAC,MAAM,CAAC,WAAW,CAAC,IAAG,SAAS,MACnC,CAAC;IAEF,IAAM,SAAS,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtD,IAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAK,EAAE,WAAQ,IAChD,MAAM,CACH,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpC,IAAM,cAAc,GAAG,oBAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnD,IAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE;QAClE,SAAS,WAAA;QACT,SAAS,EAAE,cAAc;QACzB,QAAQ,UAAA;QACR,EAAE,IAAA;QACF,IAAI,MAAA;QACJ,MAAM,QAAA;QACN,QAAQ,UAAA;QACR,OAAO,SAAA;QACP,WAAW,aAAA;QACX,QAAQ,UAAA;QAER,IAAI,EAAE,SAAS;QACf,KAAK,OAAA;KAaN,CAAC,CAAC;IAEH,IAAM,WAAW,GAAG;QAClB,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;IAEpB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,QAAQ,EAAE,QAAQ;QAC7G,6BAAK,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW;YACtF,YAAY;YACZ,KAAK;YACL,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC;gBACjC,oBAAC,cAAI,IAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAC,YAAY,GAAG,CAC1C,CACP;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,GAAI,CAClC,CACG,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/src/components/TextField/index.d.ts

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

package/lib/src/components/TextField/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var TextField_1 = require("./TextField");
+exports.TextField = TextField_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TextField/index.ts"],"names":[],"mappings":";;AAAA,yCAAmD;AAA1C,gCAAA,OAAO,CAAa"}

package/lib/src/components/TextField/stories/TextField.dev.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("../TextField").ITextFieldProps>;
+    parameters: {
+        docs: {
+            page: (props: any) => JSX.Element;
+        };
+        jest: string[];
+    };
+};
+export default _default;
+export declare const CompleteForm: () => JSX.Element;

package/lib/src/components/TextField/stories/TextField.stories.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("../TextField").ITextFieldProps>;
+    parameters: {
+        docs: {
+            page: (props: any) => JSX.Element;
+        };
+        jest: string[];
+    };
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithPlaceholder: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const WithHelpText: () => JSX.Element;
+export declare const WithValidationError: () => JSX.Element;
+export declare const WithoutLabel: () => JSX.Element;
+export declare const NumberFormat: () => JSX.Element;
+export declare const CurrencySample: () => JSX.Element;
+export declare const TextArea: () => JSX.Element;
+export declare const WithIcons: () => JSX.Element;
+export declare const WithPrependAndAppend: () => JSX.Element;
+export declare const WithColorPicker: () => JSX.Element;
+export declare const WithDatePicker: () => JSX.Element;

package/lib/src/components/TextField/stories/components/CompleteForm.d.ts

@@ -0,0 +1,2 @@
+declare const CompleteForm: () => JSX.Element;
+export default CompleteForm;

package/lib/src/components/TextField/stories/components/WithDatePicker.d.ts

@@ -0,0 +1,2 @@
+declare const WithDatePicker: () => JSX.Element;
+export default WithDatePicker;

package/lib/src/components/TextField/tests/stories/CompleteForm.d.ts

@@ -0,0 +1,2 @@
+declare const CompleteForm: () => JSX.Element;
+export default CompleteForm;

package/lib/src/components/TextField/tests/stories/TextField.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/TextField/tests/stories/WithDatePicker.d.ts

@@ -0,0 +1,2 @@
+declare const WithDatePicker: () => JSX.Element;
+export default WithDatePicker;

package/lib/src/components/TextStyle/TextStyle.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var VariationValue;
+(function (VariationValue) {
+    VariationValue["Positive"] = "positive";
+    VariationValue["Negative"] = "negative";
+    VariationValue["Strong"] = "strong";
+    VariationValue["Subdued"] = "subdued";
+    VariationValue["Code"] = "code";
+})(VariationValue || (VariationValue = {}));
+function TextStyle(_a) {
+    var variation = _a.variation, children = _a.children;
+    var Element = variationElement(variation);
+    return React.createElement(Element, null, children);
+}
+exports.default = TextStyle;
+function variationElement(variation) {
+    return variation === VariationValue.Code ? 'code' : 'span';
+}
+//# sourceMappingURL=TextStyle.js.map

package/lib/src/components/TextStyle/TextStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextStyle.js","sourceRoot":"","sources":["../../../../src/components/TextStyle/TextStyle.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAK/B,IAAK,cAMJ;AAND,WAAK,cAAc;IACjB,uCAAqB,CAAA;IACrB,uCAAqB,CAAA;IACrB,mCAAiB,CAAA;IACjB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACf,CAAC,EANI,cAAc,KAAd,cAAc,QAMlB;AAOD,SAAwB,SAAS,CAAC,EAAwC;QAAtC,wBAAS,EAAE,sBAAQ;IACrD,IAAM,OAAO,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,oBAAC,OAAO,QAAE,QAAQ,CAAW,CAAC;AACvC,CAAC;AAJD,4BAIC;AAED,SAAS,gBAAgB,CAAC,SAAqB;IAC7C,OAAO,SAAS,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7D,CAAC"}

package/lib/src/components/TextStyle/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var TextStyle_1 = tslib_1.__importDefault(require("./TextStyle"));
+exports.default = TextStyle_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TextStyle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TextStyle/index.ts"],"names":[],"mappings":";;;AAAA,kEAAoC;AAEpC,kBAAe,mBAAS,CAAC"}

package/lib/src/components/TopBar/TopBar.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Image_1 = require("../Image");
+var UnstyledLink_1 = require("../UnstyledLink");
+var styles = tslib_1.__importStar(require("./TopBar.module.scss"));
+var Search_1 = tslib_1.__importDefault(require("./components/Search"));
+var SearchField_1 = tslib_1.__importDefault(require("./components/SearchField/SearchField"));
+var UserMenu_1 = tslib_1.__importDefault(require("./components/UserMenu"));
+var TopBar = (function (_super) {
+    tslib_1.__extends(TopBar, _super);
+    function TopBar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TopBar.prototype.render = function () {
+        var _a = this.props, userMenu = _a.userMenu, searchField = _a.searchField, searchResults = _a.searchResults, searchResultsVisible = _a.searchResultsVisible, onSearchResultsDismiss = _a.onSearchResultsDismiss, logo = _a.logo;
+        var searchResultsMarkup = searchResults && searchResultsVisible ? (React.createElement(Search_1.default, { visible: searchResultsVisible, onDismiss: onSearchResultsDismiss }, searchResults)) : null;
+        var searchMarkup = searchField ? (React.createElement(React.Fragment, null,
+            searchField,
+            searchResultsMarkup)) : null;
+        return (React.createElement("div", { className: styles['topbar-container'] },
+            React.createElement("div", { className: styles['LogoContainer'] },
+                React.createElement(UnstyledLink_1.UnstyledLink, { url: "#" },
+                    React.createElement(Image_1.Image, { source: logo, alt: "Logo" }))),
+            React.createElement("div", { className: styles['Contents'] },
+                searchMarkup,
+                userMenu)));
+    };
+    TopBar.UserMenu = UserMenu_1.default;
+    TopBar.SearchField = SearchField_1.default;
+    return TopBar;
+}(React.Component));
+exports.default = TopBar;
+//# sourceMappingURL=TopBar.js.map

package/lib/src/components/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../src/components/TopBar/TopBar.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAC/B,kCAAiC;AACjC,gDAA+C;AAC/C,mEAA+C;AAG/C,uEAAyC;AACzC,6FAA+D;AAC/D,2EAA6C;AAW7C;IAAqB,kCAA6B;IAAlD;;IAmCA,CAAC;IA/BQ,uBAAM,GAAb;QACQ,IAAA,eAAyG,EAAvG,sBAAQ,EAAE,4BAAW,EAAE,gCAAa,EAAE,8CAAoB,EAAE,kDAAsB,EAAE,cAAmB,CAAC;QAEhH,IAAM,mBAAmB,GACvB,aAAa,IAAI,oBAAoB,CAAC,CAAC,CAAC,CACtC,oBAAC,gBAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,sBAAsB,IACrE,aAAa,CACP,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QAEX,IAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,CACjC,oBAAC,KAAK,CAAC,QAAQ;YACZ,WAAW;YACX,mBAAmB,CACL,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC;YACxC,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;gBACrC,oBAAC,2BAAY,IAAC,GAAG,EAAC,GAAG;oBACnB,oBAAC,aAAK,IAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,GAAG,CACrB,CACX;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC;gBAC/B,YAAY;gBACZ,QAAQ,CACL,CACF,CACP,CAAC;IACJ,CAAC;IAjCa,eAAQ,GAAG,kBAAQ,CAAC;IACpB,kBAAW,GAAG,qBAAW,CAAC;IAiC1C,aAAC;CAAA,AAnCD,CAAqB,KAAK,CAAC,SAAS,GAmCnC;AAED,kBAAe,MAAM,CAAC"}

package/lib/src/components/TopBar/components/Search/Search.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var styles = tslib_1.__importStar(require("./Search.module.scss"));
+var Search = (function (_super) {
+    tslib_1.__extends(Search, _super);
+    function Search() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.node = React.createRef();
+        _this.handleDismiss = function (_a) {
+            var target = _a.target;
+            var onDismiss = _this.props.onDismiss;
+            if (onDismiss != null) {
+                onDismiss();
+            }
+        };
+        return _this;
+    }
+    Search.prototype.render = function () {
+        var _a = this.props, visible = _a.visible, children = _a.children;
+        return (React.createElement("div", { className: styles['Search'], ref: this.node, onClick: this.handleDismiss },
+            React.createElement("div", { className: styles['Overlay'] }, children)));
+    };
+    return Search;
+}(React.PureComponent));
+exports.default = Search;
+//# sourceMappingURL=Search.js.map

package/lib/src/components/TopBar/components/Search/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/Search/Search.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAC/B,mEAA+C;AAQ/C;IAAoC,kCAAiC;IAArE;QAAA,qEAoBC;QAnBS,UAAI,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAYzC,mBAAa,GAAG,UAAC,EAAyC;gBAAvC,kBAAM;YACvB,IAAA,iCAAS,CAAgB;YAEjC,IAAI,SAAS,IAAI,IAAI,EAAE;gBACrB,SAAS,EAAE,CAAC;aACb;QACH,CAAC,CAAC;;IACJ,CAAC;IAjBQ,uBAAM,GAAb;QACQ,IAAA,eAAkC,EAAhC,oBAAO,EAAE,sBAAuB,CAAC;QAEzC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa;YAC3E,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,IAAG,QAAQ,CAAO,CAC/C,CACP,CAAC;IACJ,CAAC;IASH,aAAC;AAAD,CAAC,AApBD,CAAoC,KAAK,CAAC,aAAa,GAoBtD"}

package/lib/src/components/TopBar/components/Search/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var Search_1 = tslib_1.__importDefault(require("./Search"));
+exports.default = Search_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TopBar/components/Search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/Search/index.ts"],"names":[],"mappings":";;;AAAA,4DAA8B;AAE9B,kBAAe,gBAAM,CAAC"}

package/lib/src/components/TopBar/components/SearchField/SearchField.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Icon_1 = tslib_1.__importDefault(require("../../../Icon/Icon"));
+var styles = tslib_1.__importStar(require("./SearchField.module.scss"));
+var SearchField = (function (_super) {
+    tslib_1.__extends(SearchField, _super);
+    function SearchField() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.input = React.createRef();
+        _this.handleFocus = function () {
+            var onFocus = _this.props.onFocus;
+            if (onFocus) {
+                onFocus();
+            }
+        };
+        _this.handleBlur = function () {
+            var onBlur = _this.props.onBlur;
+            if (onBlur) {
+                onBlur();
+            }
+        };
+        _this.handleClear = function () {
+            var onChange = _this.props.onChange;
+            var input = _this.input.current;
+            if (input != null) {
+                input.value = '';
+                onChange('');
+                input.focus();
+            }
+        };
+        _this.handleChange = function (_a) {
+            var currentTarget = _a.currentTarget;
+            var onChange = _this.props.onChange;
+            onChange(currentTarget.value);
+        };
+        return _this;
+    }
+    SearchField.prototype.componentDidMount = function () {
+        var focused = this.props.focused;
+        var input = this.input.current;
+        if (input && focused) {
+            input.focus();
+        }
+    };
+    SearchField.prototype.componentDidUpdate = function (_a) {
+        var wasFocused = _a.focused;
+        var input = this.input.current;
+        if (input == null) {
+            return;
+        }
+        var focused = this.props.focused;
+        if (focused && !wasFocused) {
+            input.focus();
+        }
+        else if (!focused && wasFocused) {
+            input.blur();
+        }
+    };
+    SearchField.prototype.render = function () {
+        var _a = this.props, value = _a.value, focused = _a.focused, active = _a.active, placeholder = _a.placeholder;
+        return (React.createElement("div", { className: styles['SearchField'], onFocus: this.handleFocus, onBlur: this.handleBlur },
+            React.createElement("input", { placeholder: placeholder, type: "search", autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", ref: this.input, value: value, onChange: this.handleChange, onKeyDown: preventDefault }),
+            React.createElement("span", null,
+                React.createElement(Icon_1.default, { source: "search", color: "grayRegent" })),
+            React.createElement("div", null)));
+    };
+    return SearchField;
+}(React.Component));
+exports.default = SearchField;
+function preventDefault(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+    }
+}
+//# sourceMappingURL=SearchField.js.map

package/lib/src/components/TopBar/components/SearchField/SearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/SearchField/SearchField.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAC/B,oEAAsC;AAEtC,wEAAoD;AAapD;IAAyC,uCAAyC;IAAlF;QAAA,qEAmGC;QAlGS,WAAK,GAAsC,KAAK,CAAC,SAAS,EAAE,CAAC;QA+D9D,iBAAW,GAAG;YACX,IAAA,6BAAO,CAAgB;YAE/B,IAAI,OAAO,EAAE;gBACX,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEK,gBAAU,GAAG;YACV,IAAA,2BAAM,CAAgB;YAE9B,IAAI,MAAM,EAAE;gBACV,MAAM,EAAE,CAAC;aACV;QACH,CAAC,CAAC;QAEK,iBAAW,GAAG;YACX,IAAA,+BAAQ,CAAgB;YAErB,IAAA,2BAAc,CAChB;YAIT,IAAI,KAAK,IAAI,IAAI,EAAE;gBACjB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACjB,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,KAAK,CAAC,KAAK,EAAE,CAAC;aACf;QACH,CAAC,CAAC;QAEK,kBAAY,GAAG,UAAC,EAAsD;gBAApD,gCAAa;YAC5B,IAAA,+BAAQ,CAAgB;YAChC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;;IACJ,CAAC;IAhGQ,uCAAiB,GAAxB;QACU,IAAA,4BAAO,CAAgB;QAEpB,IAAA,0BAAc,CAChB;QAET,IAAI,KAAK,IAAI,OAAO,EAAE;YACpB,KAAK,CAAC,KAAK,EAAE,CAAC;SACf;IACH,CAAC;IAEM,wCAAkB,GAAzB,UAA0B,EAA0C;YAAxC,uBAAmB;QAElC,IAAA,0BAAc,CAChB;QACT,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,OAAO;SACR;QAEO,IAAA,4BAAO,CAAgB;QAE/B,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE;YAC1B,KAAK,CAAC,KAAK,EAAE,CAAC;SACf;aAAM,IAAI,CAAC,OAAO,IAAI,UAAU,EAAE;YACjC,KAAK,CAAC,IAAI,EAAE,CAAC;SACd;IACH,CAAC;IAEM,4BAAM,GAAb;QACQ,IAAA,eAAoD,EAAlD,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,4BAA0B,CAAC;QAO3D,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU;YAEvB,+BACE,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,EACb,cAAc,EAAC,KAAK,EACpB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,cAAc,GACzB;YACF;gBACE,oBAAC,cAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,GAAG,CACtC;YACP,gCAAO,CACH,CACP,CAAC;IACJ,CAAC;IAqCH,kBAAC;AAAD,CAAC,AAnGD,CAAyC,KAAK,CAAC,SAAS,GAmGvD;;AAED,SAAS,cAAc,CAAC,KAA4C;IAClE,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;QACzB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;AACH,CAAC"}

package/lib/src/components/TopBar/components/SearchField/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var SearchField_1 = tslib_1.__importDefault(require("./SearchField"));
+exports.default = SearchField_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TopBar/components/SearchField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/SearchField/index.ts"],"names":[],"mappings":";;;AAAA,sEAA8C;AAE9C,kBAAe,qBAAiB,CAAC"}

package/lib/src/components/TopBar/components/UserMenu/UserMenu.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var Avatar_1 = tslib_1.__importDefault(require("../../../Avatar"));
+var Icon_1 = require("../../../Icon");
+var styles = tslib_1.__importStar(require("./UserMenu.module.scss"));
+var UserMenu = function (_a) {
+    var name = _a.name, detail = _a.detail, avatar = _a.avatar, initials = _a.initials, onToggle = _a.onToggle, open = _a.open;
+    return (React.createElement("button", { className: styles['UserMenu'] },
+        React.createElement(Avatar_1.default, { source: avatar }),
+        React.createElement("div", { className: styles['arrows'] },
+            React.createElement(Icon_1.Icon, { source: "arrows", color: "white" }))));
+};
+exports.default = UserMenu;
+//# sourceMappingURL=UserMenu.js.map

package/lib/src/components/TopBar/components/UserMenu/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/UserMenu/UserMenu.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAE/B,mEAAqC;AACrC,sCAAqC;AAErC,qEAAiD;AAWjD,IAAM,QAAQ,GAA8B,UAAC,EAAkD;QAAhD,cAAI,EAAE,kBAAM,EAAE,kBAAM,EAAE,sBAAQ,EAAE,sBAAQ,EAAE,cAAI;IAC3F,OAAO,CACL,gCAAQ,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC;QACnC,oBAAC,gBAAM,IAAC,MAAM,EAAE,MAAM,GAAI;QAC1B,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC;YAC9B,oBAAC,WAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,GAAG,CAClC,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/lib/src/components/TopBar/components/UserMenu/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var UserMenu_1 = tslib_1.__importDefault(require("./UserMenu"));
+exports.default = UserMenu_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TopBar/components/UserMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TopBar/components/UserMenu/index.ts"],"names":[],"mappings":";;;AAAA,gEAAkC;AAElC,kBAAe,kBAAQ,CAAC"}

package/lib/src/components/TopBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var TopBar_1 = require("./TopBar");
+exports.TopBar = TopBar_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/TopBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TopBar/index.tsx"],"names":[],"mappings":";;AAAA,mCAA6C;AAApC,0BAAA,OAAO,CAAU"}

package/lib/src/components/TopBar/stories/TopBar.stories.d.ts

@@ -0,0 +1,13 @@
+import { TopBar } from '../../..';
+declare const _default: {
+    title: string;
+    component: typeof TopBar;
+    parameters: {
+        docs: {
+            page: (props: any) => JSX.Element;
+        };
+        jest: string[];
+    };
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/lib/src/components/TopBar/test/stories/TopBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/UnstyledLink/UnstyledLink.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var React = tslib_1.__importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var styles = tslib_1.__importStar(require("./UnstyledLink.module.scss"));
+var UnstyledLink = function (_a) {
+    var children = _a.children, external = _a.external, url = _a.url, type = _a.type, activeClassName = _a.activeClassName, rest = tslib_1.__rest(_a, ["children", "external", "url", "type", "activeClassName"]);
+    var target = external ? '_blank' : undefined;
+    var rel = external ? 'noopener noreferrer' : undefined;
+    var classNames = classnames_1.default(styles['Link']);
+    if (type === 'nav') {
+        return (React.createElement(react_router_dom_1.NavLink, { to: url, exact: true, activeClassName: activeClassName }, children));
+    }
+    else if (external) {
+        return (React.createElement("a", tslib_1.__assign({ target: target }, rest, { href: url, rel: rel }), children));
+    }
+    else {
+        return (React.createElement(react_router_dom_1.Link, { to: url, className: classNames }, children));
+    }
+};
+exports.default = UnstyledLink;
+//# sourceMappingURL=UnstyledLink.js.map

package/lib/src/components/UnstyledLink/UnstyledLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledLink.js","sourceRoot":"","sources":["../../../../src/components/UnstyledLink/UnstyledLink.tsx"],"names":[],"mappings":";;;AAAA,kEAAoC;AACpC,mDAA+B;AAC/B,qDAAiD;AAEjD,yEAAqD;AAWrD,IAAM,YAAY,GAAkC,UAAC,EAA2D;IAAzD,IAAA,sBAAQ,EAAE,sBAAQ,EAAE,YAAG,EAAE,cAAI,EAAE,oCAAe,EAAE,qFAAO;IAC5G,IAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/C,IAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEzD,IAAM,UAAU,GAAG,oBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9C,IAAI,IAAI,KAAK,KAAK,EAAE;QAClB,OAAO,CACL,oBAAC,0BAAO,IAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,eAAe,IAC5D,QAAQ,CACD,CACX,CAAC;KACH;SAAM,IAAI,QAAQ,EAAE;QACnB,OAAO,CACL,4CAAG,MAAM,EAAE,MAAM,IAAM,IAAI,IAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAC7C,QAAQ,CACP,CACL,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,uBAAI,IAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,IACjC,QAAQ,CACJ,CACR,CAAC;KACH;AACH,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/lib/src/components/UnstyledLink/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var UnstyledLink_1 = require("./UnstyledLink");
+exports.UnstyledLink = UnstyledLink_1.default;
+//# sourceMappingURL=index.js.map

package/lib/src/components/UnstyledLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/UnstyledLink/index.ts"],"names":[],"mappings":";;AAAA,+CAAyD;AAAhD,sCAAA,OAAO,CAAgB"}

package/lib/src/components/utils/breakpoints.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breakpoints = {
+    mobileXS: 374,
+    mobileSM: 413,
+    mobile: 767,
+    tabletSM: 980,
+    tablet: 1024,
+    sm: 1024,
+    mm: 1280,
+    gg: 1366,
+    lg: 1440,
+    xl: 1920,
+};
+//# sourceMappingURL=breakpoints.js.map

package/lib/src/components/utils/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../../src/components/utils/breakpoints.ts"],"names":[],"mappings":";;AAAa,QAAA,WAAW,GAAG;IACzB,QAAQ,EAAE,GAAG;IAEb,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,GAAG;IACX,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,IAAI;IAEZ,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACT,CAAC"}

package/lib/src/components/utils/findParentBySelector.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function collectionHas(a, b) {
+    for (var i = 0, len = a.length; i < len; i++) {
+        if (a[i] === b) {
+            return true;
+        }
+    }
+    return false;
+}
+function findParentBySelector(elm, selector) {
+    var all = document.querySelectorAll(selector);
+    var cur = elm.parentNode;
+    while (cur && !collectionHas(all, cur)) {
+        cur = cur.parentNode;
+    }
+    return cur;
+}
+exports.findParentBySelector = findParentBySelector;
+//# sourceMappingURL=findParentBySelector.js.map

package/lib/src/components/utils/findParentBySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findParentBySelector.js","sourceRoot":"","sources":["../../../../src/components/utils/findParentBySelector.ts"],"names":[],"mappings":";;AAAA,SAAS,aAAa,CAAC,CAAC,EAAE,CAAC;IACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;QAC5C,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;YACd,OAAO,IAAI,CAAC;SACb;KACF;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAgB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;IAChD,IAAM,GAAG,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC;IACzB,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;QACtC,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC;KACtB;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAPD,oDAOC"}

package/lib/src/components/utils/idGenerator.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.idGenerator = function (prefix) {
+    var index = 1;
+    return function () { return '' + prefix + index++; };
+};
+//# sourceMappingURL=idGenerator.js.map

package/lib/src/components/utils/idGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"idGenerator.js","sourceRoot":"","sources":["../../../../src/components/utils/idGenerator.ts"],"names":[],"mappings":";;AAAa,QAAA,WAAW,GAAG,UAAA,MAAM;IAC/B,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,OAAO,cAAM,OAAA,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,EAArB,CAAqB,CAAC;AACrC,CAAC,CAAC"}

package/lib/src/components/utils/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var breakpoints_1 = require("./breakpoints");
+exports.Breakpoints = breakpoints_1.Breakpoints;
+var idGenerator_1 = require("./idGenerator");
+exports.idGenerator = idGenerator_1.idGenerator;
+var setNativeValue_1 = require("./setNativeValue");
+exports.setNativeValue = setNativeValue_1.setNativeValue;
+var findParentBySelector_1 = require("./findParentBySelector");
+exports.findParentBySelector = findParentBySelector_1.findParentBySelector;
+//# sourceMappingURL=index.js.map

package/lib/src/components/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/utils/index.ts"],"names":[],"mappings":";;AAAA,6CAA4C;AAAnC,oCAAA,WAAW,CAAA;AACpB,6CAA4C;AAAnC,oCAAA,WAAW,CAAA;AACpB,mDAAkD;AAAzC,0CAAA,cAAc,CAAA;AACvB,+DAA8D;AAArD,sDAAA,oBAAoB,CAAA"}

package/lib/src/components/utils/setNativeValue.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function setNativeValue(element, value) {
+    var valueSetter = (Object.getOwnPropertyDescriptor(element, 'value') || { set: undefined }).set;
+    var prototype = Object.getPrototypeOf(element);
+    var prototypeValueSetter = (Object.getOwnPropertyDescriptor(prototype, 'value') || { set: undefined }).set;
+    if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+        prototypeValueSetter.call(element, value);
+    }
+    else if (valueSetter) {
+        valueSetter.call(element, value);
+    }
+    else {
+        throw new Error('The given element does not have a value setter');
+    }
+}
+exports.setNativeValue = setNativeValue;
+//# sourceMappingURL=setNativeValue.js.map

package/lib/src/components/utils/setNativeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setNativeValue.js","sourceRoot":"","sources":["../../../../src/components/utils/setNativeValue.ts"],"names":[],"mappings":";;AAAA,SAAgB,cAAc,CAAC,OAAO,EAAE,KAAK;IACnC,IAAA,2FAAgB,CAA6E;IACrG,IAAM,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACzC,IAAA,sGAAyB,CAA+E;IAEhH,IAAI,oBAAoB,IAAI,WAAW,KAAK,oBAAoB,EAAE;QAChE,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;KAC3C;SAAM,IAAI,WAAW,EAAE;QACtB,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;KAClC;SAAM;QACL,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;KACnE;AACH,CAAC;AAZD,wCAYC"}