@via-profit/ui-kit 0.1.0-rc.1

package/dist/TextField/TextFieldErrorText.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const NoSSR_1 = __importDefault(require("../NoSSR"));
+const ErrorTextContainer = styled_1.default.div `
+  margin-left: 0.5em;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled_1.default.div `
+  color: ${({ theme }) => theme.colors.error().toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const TextFieldErrorText = (props, ref) => {
+    const { children, error, focused, showEmptyIfNoError } = props, otherProps = __rest(props, ["children", "error", "focused", "showEmptyIfNoError"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('auto');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, otherProps, { ref: ref, "$maxHeight": error ? maxHeight : 0, "$focused": focused }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+exports.default = React.forwardRef(TextFieldErrorText);

package/dist/TextField/TextFieldIconWrapper.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type TextFieldIconWrapperProps = React.InputHTMLAttributes<HTMLDivElement> & {
+    readonly position: 'start' | 'end';
+};
+declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
+    readonly position: "end" | "start";
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/TextField/TextFieldIconWrapper.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const IconWrapper = styled_1.default.div `
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${({ $position }) => $position === 'start' &&
+    (0, react_1.css) `
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
+    `};
+  ${({ $position }) => $position === 'end' &&
+    (0, react_1.css) `
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+    `};
+  & > svg {
+    margin: 0 1em;
+    border-radius: inherit;
+  }
+  & > button {
+    height: 100%;
+    padding: 0 1em;
+    border-radius: inherit;
+    box-shadow: none;
+  }
+`;
+const TextFieldIconWrapper = (props, ref) => {
+    const { children, position } = props, otherProps = __rest(props, ["children", "position"]);
+    return (React.createElement(IconWrapper, Object.assign({ "$position": position }, otherProps, { ref: ref }), children));
+};
+exports.default = React.forwardRef(TextFieldIconWrapper);

package/dist/TextField/TextFieldInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TextFieldInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    readonly hasStartIcon: boolean;
+    readonly hasEndIcon: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/TextField/TextFieldInput.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const Input = styled_1.default.input `
+  font-size: 1em;
+  padding: 1em 1.2em;
+  ${({ $hasStartIcon }) => $hasStartIcon &&
+    (0, react_1.css) `
+      padding-left: 0;
+    `};
+  ${({ $hasEndIcon }) => $hasEndIcon &&
+    (0, react_1.css) `
+      padding-right: 0;
+    `};
+  background: none;
+  border-radius: inherit;
+  margin: 0;
+  border: 0;
+  width: 100%;
+  color: currentColor;
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    font-style: italic;
+  }
+`;
+const TextFieldInput = (props, ref) => {
+    const { hasEndIcon, hasStartIcon } = props;
+    return React.createElement(Input, Object.assign({ "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon }, props, { ref: ref }));
+};
+exports.default = React.forwardRef(TextFieldInput);

package/dist/TextField/TextFieldLabel.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TextFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    readonly error?: boolean;
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/dist/TextField/TextFieldLabel.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Label = styled_1.default.label `
+  font-size: 0.8em;
+  margin-bottom: 0.2em;
+`;
+const TextFieldLabel = (props, ref) => {
+    const { children, error, focused } = props, otherProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Label, Object.assign({}, otherProps, { ref: ref, "$error": error, "$focused": focused }), children));
+};
+exports.default = React.forwardRef(TextFieldLabel);

package/dist/TextField/TextFieldLabelAsterisk.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TextFieldLabelAsteriskProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly error?: boolean;
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/dist/TextField/TextFieldLabelAsterisk.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Asterisk = styled_1.default.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  color: ${({ theme }) => theme.colors.error().toString()};
+`;
+const TextFieldLabelAsterisk = (props, ref) => {
+    const { children, error, focused } = props, otherProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, otherProps, { ref: ref, "$error": error, "$focused": focused }), children));
+};
+exports.default = React.forwardRef(TextFieldLabelAsterisk);

package/dist/TextField/TextFieldWrapper.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type TextFieldWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly error?: boolean;
+    readonly fullWidth?: boolean;
+    readonly readOnly?: boolean;
+    readonly focused?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly error?: boolean | undefined;
+    readonly fullWidth?: boolean | undefined;
+    readonly readOnly?: boolean | undefined;
+    readonly focused?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/TextField/TextFieldWrapper.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const Wrapper = styled_1.default.div `
+  display: flex;
+  align-items: stretch;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border: 1px solid;
+  outline: 1px solid transparent;
+  border-color: ${({ theme }) => theme.isDark
+    ? theme.colors.textPrimary().darken(100).toString()
+    : theme.colors.textPrimary().lighten(150).toString()};
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+  font-size: 0.9em;
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.02).toString()};
+  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  transition: all 180ms ease-out 0s;
+
+  ${props => props.$focused &&
+    (0, react_1.css) `
+      border-color: ${props.theme.colors.accentPrimary().lighten(0.5).toString()};
+      outline-color: ${props.theme.colors.accentPrimary().lighten(0.5).toString()};
+    `};
+  ${props => props.$error &&
+    (0, react_1.css) `
+      border-color: ${props.theme.colors.error().toString()};
+      color: ${props.theme.colors.error().toString()};
+      &:focus {
+        border-color: ${props.theme.colors.error().lighten(0.6).toString()};
+      }
+    `}
+`;
+const TextFieldWrapper = (props, ref) => {
+    const { focused, error, readOnly, fullWidth, children } = props, otherProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
+    return (React.createElement(Wrapper, Object.assign({ "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth) }, otherProps, { ref: ref }), children));
+};
+exports.default = React.forwardRef(TextFieldWrapper);

package/dist/TextField/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    readonly error?: boolean;
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    readonly errorText?: React.ReactNode;
+    readonly fullWidth?: boolean;
+    readonly showEmptyIfNoError?: boolean;
+    readonly inputRef?: React.Ref<HTMLInputElement>;
+    readonly label?: React.ReactNode;
+    readonly endIcon?: React.ReactElement;
+    readonly startIcon?: React.ReactElement;
+}
+declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/TextField/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const TextFieldContainer_1 = __importDefault(require("./TextFieldContainer"));
+const TextFieldLabel_1 = __importDefault(require("./TextFieldLabel"));
+const TextFieldLabelAsterisk_1 = __importDefault(require("./TextFieldLabelAsterisk"));
+const TextFieldWrapper_1 = __importDefault(require("./TextFieldWrapper"));
+const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
+const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
+const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
+const TextField = (props, ref) => {
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, showEmptyIfNoError, onChange, requiredAsterisk, onFocus, onBlur } = props, inputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "showEmptyIfNoError", "onChange", "requiredAsterisk", "onFocus", "onBlur"]);
+    const [focused, setFocused] = React.useState(false);
+    const inputID = React.useMemo(() => {
+        if (typeof id === 'string') {
+            return id;
+        }
+        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
+        const guid = [
+            u.substring(0, 8),
+            u.substring(8, 12),
+            '4000-8' + u.substring(13, 16),
+            u.substring(16, 28),
+        ].join('-');
+        return guid;
+    }, [id]);
+    const inputChange = React.useCallback(event => {
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const inputFocus = React.useCallback(event => {
+        setFocused(true);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const inputBlur = React.useCallback(event => {
+        setFocused(false);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
+    const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
+    return (React.createElement(TextFieldContainer_1.default, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        typeof label !== 'undefined' && label !== null && (React.createElement(TextFieldLabel_1.default, { htmlFor: inputID, error: error },
+            label,
+            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(TextFieldLabelAsterisk_1.default, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(TextFieldWrapper_1.default, { error: error, focused: focused, fullWidth: fullWidth },
+            hasStartIcon && React.createElement(TextFieldIconWrapper_1.default, { position: "start" }, startIcon),
+            React.createElement(TextFieldInput_1.default, Object.assign({}, inputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
+            hasEndIcon && React.createElement(TextFieldIconWrapper_1.default, { position: "end" }, endIcon)),
+        React.createElement(TextFieldErrorText_1.default, { error: error, showEmptyIfNoError: showEmptyIfNoError, focused: focused }, errorText)));
+};
+exports.default = React.forwardRef(TextField);

package/dist/ThemeProvider/createTheme.d.ts

@@ -0,0 +1,36 @@
+import { ColorInterface } from '../color';
+export type CreateTheme = (overrides?: UIThemeOverrides) => UITheme;
+export type ColorManipulator = () => ColorInterface;
+export interface UITheme {
+    readonly isDark: boolean;
+    readonly fontSize: Record<'small' | 'normal' | 'medium' | 'large', number>;
+    readonly zIndex: {
+        readonly header: number;
+        readonly mainDrawer: number;
+        readonly modal: number;
+    };
+    readonly colors: {
+        readonly backgroundPrimary: ColorManipulator;
+        readonly backgroundSecondary: ColorManipulator;
+        readonly backgroundGrey: ColorManipulator;
+        readonly textPrimary: ColorManipulator;
+        readonly textSecondary: ColorManipulator;
+        readonly accentPrimary: ColorManipulator;
+        readonly accentPrimaryContrast: ColorManipulator;
+        readonly accentSecondary: ColorManipulator;
+        readonly accentSecondaryContrast: ColorManipulator;
+        readonly error: ColorManipulator;
+    };
+    readonly shape: {
+        readonly radiusFactor: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
+    };
+}
+export interface UIThemeOverrides {
+    readonly isDark?: UITheme['isDark'];
+    readonly fontSize?: UITheme['fontSize'];
+    readonly zIndex?: UITheme['zIndex'];
+    readonly colors?: Partial<Record<keyof UITheme['colors'], string>>;
+    readonly shape?: UITheme['shape'];
+}
+declare const createTheme: (overrides?: UIThemeOverrides) => UITheme;
+export default createTheme;

package/dist/ThemeProvider/createTheme.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = __importDefault(require("../color"));
+const createTheme = (overrides) => {
+    const _a = overrides || {}, { isDark, fontSize, zIndex, colors, shape } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "colors", "shape"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, mainDrawer: 9, modal: 10 }, zIndex), colors: {
+            backgroundPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary) || '#fff'),
+            backgroundSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundSecondary) || '#F9F9F9'),
+            backgroundGrey: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundGrey) || '#F4F6FA'),
+            textPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.textPrimary) || '#212121'),
+            textSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.textSecondary) || '#343434'),
+            accentPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentPrimary) || '#FFA800'),
+            accentPrimaryContrast: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentPrimaryContrast) || '#FFFFFF'),
+            accentSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentSecondary) || '#bd00ff'),
+            accentSecondaryContrast: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentSecondaryContrast) || '#FFFFFF'),
+            error: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.error) || '#ff2b2b'),
+        }, shape: Object.assign({ radiusFactor: 0.5 }, shape) });
+    return theme;
+};
+exports.default = createTheme;

package/dist/ThemeProvider/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { UITheme } from './createTheme';
+export interface ThemeProviderProps {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+    readonly theme: UITheme;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export default ThemeProvider;

package/dist/ThemeProvider/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const ThemeProvider = props => {
+    const { children, theme } = props;
+    return react_1.default.createElement(react_2.ThemeProvider, { theme: theme }, children);
+};
+exports.default = ThemeProvider;

package/dist/Typography/Base.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Base: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default Base;