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

package/Button/ButtonAccent.d.ts

@@ -0,0 +1,11 @@
+declare module '@via-profit/ui-kit/Button/ButtonAccent' {
+  import '@via-profit/ui-kit';
+
+  import { ButtonBaseProps } from '@via-profit/ui-kit/Button/ButtonBase';
+
+  export type ButtonAccentProps = ButtonBaseProps;
+
+  const ButtonAccent: React.FC<ButtonAccentProps>;
+
+  export default ButtonAccent;
+}

package/Button/ButtonAccent.js

@@ -0,0 +1,47 @@
+"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 react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const Button = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.accentPrimaryContrast.toString()};
+  background-color: ${({ theme, disabled }) => disabled
+    ? theme.colors.backgroundGrey.darken(30).toString()
+    : theme.colors.accentPrimary.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.accentPrimary.darken(60).alpha(0.3).toString()};
+      &:hover {
+        background-color: ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.accentPrimary.darken(30).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+    `};
+`;
+const ButtonAccent = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Button, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonAccent);

package/Button/ButtonBase.d.ts

@@ -0,0 +1,8 @@
+declare module '@via-profit/ui-kit/Button/ButtonBase' {
+  import '@via-profit/ui-kit';
+
+  export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly startIcon?: JSX.Element;
+    readonly endIcon?: JSX.Element;
+  }
+}

package/{dist/Button → Button}/ButtonBase.js

@@ -16,23 +16,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const StartIconWrapper_1 = __importDefault(require("./components/StartIconWrapper"));
+const EndIconWrapper_1 = __importDefault(require("./components/EndIconWrapper"));
+const TextWrapper_1 = __importDefault(require("./components/TextWrapper"));
 const Button = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
-  cursor: pointer;
+  font-size: 0.8rem;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   border: 0;
   outline: transparent;
   transition: all 180ms ease-out 0s;
   background: none;
   color: currentColor;
-`;
-const ButtonText = styled_1.default.span `
-  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
 `;
 const ButtonBase = (props, ref) => {
-    const { children } = props, otherProps = __rest(props, ["children"]);
+    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
     return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        react_1.default.createElement(ButtonText, null, children)));
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper_1.default, null, startIcon)),
+        react_1.default.createElement(TextWrapper_1.default, null, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper_1.default, null, endIcon))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonStandard.d.ts

@@ -0,0 +1,11 @@
+declare module '@via-profit/ui-kit/Button/ButtonStandard' {
+  import '@via-profit/ui-kit';
+
+  import { ButtonBaseProps } from '@via-profit/ui-kit/Button/ButtonBase';
+
+  export type ButtonStandardProps = ButtonBaseProps;
+
+  const ButtonStandard: React.FC<ButtonStandardProps>;
+
+  export default ButtonStandard;
+}

package/Button/ButtonStandard.js

@@ -0,0 +1,52 @@
+"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 react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+/**
+ * Standard
+ */
+const StyledButtonBase = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.textPrimary.toString()};
+  background-color: ${({ theme, disabled }) => disabled
+    ? theme.colors.backgroundGrey.darken(10).toString()
+    : theme.isDark
+        ? theme.colors.backgroundPrimary.lighten(20).toString()
+        : theme.colors.backgroundPrimary.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.backgroundPrimary.darken(40).alpha(0.6).toString()};
+      &:hover {
+        background-color: ${theme.colors.backgroundPrimary.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.backgroundPrimary.darken(40).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.toString()};
+      }
+    `}
+`;
+const ButtonStandard = (props, ref) => {
+    const { children, disabled } = props, restProps = __rest(props, ["children", "disabled"]);
+    return (react_1.default.createElement(StyledButtonBase, Object.assign({ disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/components/EndIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const EndIconWrapper = styled_1.default.span `
+  margin-left: 0.8em;
+`;
+exports.default = EndIconWrapper;

package/Button/components/StartIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StartIconWrapper = styled_1.default.span `
+  margin-right: 0.8em;
+`;
+exports.default = StartIconWrapper;

package/Button/components/TextWrapper.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 styled_1 = __importDefault(require("@emotion/styled"));
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+`;
+exports.default = TextWrapper;

package/Button/index.d.ts

@@ -0,0 +1,10 @@
+declare module '@via-profit/ui-kit/Button' {
+  import { ButtonAccentProps } from '@via-profit/ui-kit/Button/ButtonAccent';
+  import { ButtonStandardProps } from '@via-profit/ui-kit/Button/ButtonStandard';
+
+  export interface BaseProps {
+    readonly variant?: 'standard' | 'accent';
+  }
+
+  export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
+}

package/{dist/Calendar → Calendar}/CalendarCell.js

@@ -29,28 +29,28 @@ const Btn = styled_1.default.button `
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
   border: 1px solid transparent;
   background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary().toString()
-    : theme.colors.backgroundPrimary().toString()};
+    ? theme.colors.accentPrimary.toString()
+    : theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
     if ($isDisabled) {
-        return theme.colors.textSecondary().toString();
+        return theme.colors.textSecondary.toString();
     }
     if ($isSelected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     if ($isToday) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
-    return theme.colors.textPrimary().toString();
+    return theme.colors.textPrimary.toString();
 }};
   &:hover {
     background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.1).toString()};
+    ? theme.colors.accentPrimary.darken(0.1).toString()
+    : theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
 `;

package/{dist/Calendar → Calendar}/CalendarMonthControl.js

@@ -31,14 +31,14 @@ const Btn = styled_1.default.button `
   outline: none;
   cursor: pointer;
   border: 1px solid transparent;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
 `;

package/{dist/Calendar → Calendar}/CalendarPaper.js

@@ -9,12 +9,12 @@ const CalendarPaper = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   padding: 0.4em;
   max-width: 17.6em;
   max-height: 20.4em;
   box-shadow: 0 4px 24px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+    ${({ theme }) => theme.colors.backgroundPrimary.darken(0.5).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/{dist/Calendar → Calendar}/CalendarWeekDayLabel.js

@@ -12,6 +12,6 @@ const CalendarWeekDayLabel = styled_1.default.div `
   user-select: none;
   width: 3em;
   height: 3em;
-  color: ${({ theme }) => theme.colors.textSecondary().toString()};
+  color: ${({ theme }) => theme.colors.textSecondary.toString()};
 `;
 exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/{dist/Menu → Menu}/MenuItemInner.js

@@ -24,19 +24,19 @@ const InnerContainer = styled_1.default.div `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   background-color: ${({ theme, selected, hovered }) => {
     if (selected && hovered) {
-        return theme.colors.accentPrimary().darken(0.1).toString();
+        return theme.colors.accentPrimary.darken(0.1).toString();
     }
     if (selected) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
     if (hovered) {
-        return theme.colors.backgroundGrey().darken(0.04).toString();
+        return theme.colors.backgroundGrey.darken(0.04).toString();
     }
     return 'inherit';
 }};
   color: ${({ theme, selected }) => {
     if (selected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     return 'inherit';
 }};

package/{dist/Menu → Menu}/MenuWrapper.js

@@ -25,10 +25,10 @@ const StyledMenuWrapper = styled_1.default.div `
   transition: visibility 120ms ease-out, opacity 120ms ease-out;
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   box-shadow: 0 4px 24px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+    ${({ theme }) => theme.colors.backgroundPrimary.darken(0.5).alpha(0.6).toString()};
   &:focus {
     outline: none;
   }
@@ -43,20 +43,20 @@ const StyledMenuWrapper = styled_1.default.div `
 
   & ::-webkit-scrollbar-track {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.05).toString()};
+    ? theme.colors.backgroundPrimary.darken(0.1).toString()
+    : theme.colors.backgroundPrimary.darken(0.05).toString()};
   }
 
   & ::-webkit-scrollbar-thumb {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundSecondary().lighten(0.3).toString()
-    : theme.colors.backgroundSecondary().darken(0.3).toString()};
+    ? theme.colors.backgroundSecondary.lighten(0.3).toString()
+    : theme.colors.backgroundSecondary.darken(0.3).toString()};
     border-radius: 0.3rem;
   }
 
   & ::-webkit-scrollbar-thumb:horizontal:hover,
   & ::-webkit-scrollbar-thumb:vertical:hover {
-    background: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    background: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const MenuWrapperInner = styled_1.default.div `

package/{dist/Modal → Modal}/ModalConfirmBox.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const Container = styled_1.default.div `
   display: flex;
   flex-flow: column;
@@ -127,7 +127,7 @@ const ModalConfirmBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/Modal → Modal}/ModalDialog.js

@@ -78,7 +78,7 @@ const ModalDialog = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/Modal → Modal}/ModalDrawer.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const CloseIcon_1 = __importDefault(require("./CloseIcon"));
 const Container = styled_1.default.div `
   min-height: 2rem;
@@ -76,7 +76,7 @@ const Inner = styled_1.default.div `
 `;
 const CloseButton = (0, styled_1.default)(Button_1.default) `
   margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
-  color: ${props => props.theme.colors.textPrimary().toString()};
+  color: ${props => props.theme.colors.textPrimary.toString()};
   background: none;
   width: auto;
   height: auto;
@@ -131,7 +131,7 @@ const ModalDrawer = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em 1em 0 0;
             transform: translate(0, 100%);
             transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

package/{dist/Modal → Modal}/ModalMessageBox.js

@@ -41,7 +41,7 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
 const react_modal_1 = __importDefault(require("react-modal"));
-const Button_1 = __importDefault(require("@via-profit/ui-kit/src/Button"));
+const Button_1 = __importDefault(require("../Button"));
 const Container = styled_1.default.div `
   display: flex;
   flex-flow: column;
@@ -126,7 +126,7 @@ const ModalMessageBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/{dist/PhoneField → PhoneField}/CountryFlag.js

@@ -32,7 +32,7 @@ const CountryFlagContainer = styled_1.default.span `
   overflow: hidden;
   margin-left: 0.5em;
   margin-right: 0.5em;
-  border: 1px solid ${({ theme }) => theme.colors.textPrimary().alpha(0.8).toString()};
+  border: 1px solid ${({ theme }) => theme.colors.textPrimary.alpha(0.8).toString()};
 `;
 const CountryFlag = props => {
     const { countryCode } = props, otherProps = __rest(props, ["countryCode"]);

package/{dist/PhoneField → PhoneField}/flags/UnknownFlag.js

@@ -28,7 +28,7 @@ const react_1 = require("@emotion/react");
 const UnknownFlag = (props, ref) => {
     const { colors } = (0, react_1.useTheme)();
     return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.backgroundPrimary().toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary().toString(), strokeWidth: ".72279" })));
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.backgroundPrimary.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary.toString(), strokeWidth: ".72279" })));
 };
 exports.default = React.forwardRef(UnknownFlag);

package/{dist/SelectBox → SelectBox}/SelectButton.js

@@ -36,16 +36,16 @@ const StyledButton = styled_1.default.button `
   border: 1px solid;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-color: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().lighten(1.4).toString()
-    : theme.colors.backgroundPrimary().darken(0.4).toString()};
+    ? theme.colors.backgroundPrimary.lighten(1.4).toString()
+    : theme.colors.backgroundPrimary.darken(0.4).toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.05).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.05).toString()};
   }
   &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().toString()};
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const ValueWrapper = styled_1.default.span `

package/{dist/TextField → TextField}/TextFieldErrorText.js

@@ -47,7 +47,7 @@ const ErrorTextContainer = styled_1.default.div `
   overflow: hidden;
 `;
 const ErrorTextInner = styled_1.default.div `
-  color: ${({ theme }) => theme.colors.error().toString()};
+  color: ${({ theme }) => theme.colors.error.toString()};
   font-size: 0.8em;
   transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
   opacity: ${({ $error }) => ($error ? 1 : 0)};

package/{dist/TextField → TextField}/TextFieldLabelAsterisk.js

@@ -42,7 +42,7 @@ 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()};
+  color: ${({ theme }) => theme.colors.error.toString()};
 `;
 const TextFieldLabelAsterisk = (props, ref) => {
     const { children, error, focused } = props, otherProps = __rest(props, ["children", "error", "focused"]);

package/{dist/TextField → TextField}/TextFieldWrapper.js

@@ -47,25 +47,25 @@ const Wrapper = styled_1.default.div `
   border: 1px solid;
   outline: 1px solid transparent;
   border-color: ${({ theme }) => theme.isDark
-    ? theme.colors.textPrimary().darken(100).toString()
-    : theme.colors.textPrimary().lighten(150).toString()};
+    ? 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()};
+  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()};
+      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()};
+      border-color: ${props.theme.colors.error.toString()};
+      color: ${props.theme.colors.error.toString()};
       &:focus {
-        border-color: ${props.theme.colors.error().lighten(0.6).toString()};
+        border-color: ${props.theme.colors.error.lighten(0.6).toString()};
       }
     `}
 `;

package/ThemeProvider/createTheme.js

@@ -0,0 +1,39 @@
+"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: {}, shape: Object.assign({ radiusFactor: 0.5 }, shape) });
+    const defaultColors = {
+        backgroundPrimary: '#FFFFFF',
+        backgroundSecondary: '#F9F9F9',
+        backgroundGrey: '#F4F6FA',
+        textPrimary: '#212121',
+        textSecondary: '#343434',
+        accentPrimary: '#FFA800',
+        accentPrimaryContrast: '#FFFFFF',
+        accentSecondary: '#bd00ff',
+        accentSecondaryContrast: '#FFFFFF',
+        error: '#ff2b2b',
+    };
+    Object.entries(Object.assign(Object.assign({}, defaultColors), colors)).forEach(([colorName, colorValue]) => {
+        theme.colors[colorName] = new color_1.default(colorValue);
+    });
+    theme.colors.test = new color_1.default('red');
+    return theme;
+};
+exports.default = createTheme;

package/ThemeProvider/index.d.ts

@@ -0,0 +1,5 @@
+declare module '@via-profit/ui-kit/ThemeProvider' {
+  import { UITheme, UIThemeOverrides } from '@via-profit/ui-kit';
+
+  export type CreateTheme = (overrides?: UIThemeOverrides) => UITheme;
+}

package/{dist/Typography → Typography}/Base.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Base = styled_1.default.span `
   font-size: 1rem;
   font-weight: 300;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Base;

package/{dist/Typography → Typography}/Blockquote.js

@@ -9,8 +9,8 @@ const Blockquote = styled_1.default.blockquote `
   font-weight: 400;
   font-style: italic;
   position: relative;
-  border-left: 4px solid ${({ theme }) => theme.colors.textSecondary().toString()};
-  color: ${({ theme }) => theme.colors.textSecondary().toString()};
+  border-left: 4px solid ${({ theme }) => theme.colors.textSecondary.toString()};
+  color: ${({ theme }) => theme.colors.textSecondary.toString()};
   margin: 0;
   padding: 1em 0 1em 2em;
   & > p:first-of-type {

package/{dist/Typography → Typography}/Del.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Del = styled_1.default.del `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Del;

package/{dist/Typography → Typography}/Em.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Em = styled_1.default.em `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Em;