@via-profit/ui-kit 0.4.0 → 0.6.0

package/Tabs/context.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import Color from '../Color';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export interface TabsContextValue {
+    /**
+     * The selected tab or `null` if nothing is selected
+     */
+    readonly value: string | null;
+    readonly select: (value: string, event: React.SyntheticEvent) => void;
+    /**
+     * Selects the tab without `onChange`: the initial tab of the uncontrolled tabs without `defaultValue`
+     */
+    readonly selectInitial: (value: string) => void;
+    readonly isUncontrolledEmpty: boolean;
+    readonly orientation: TabsOrientation;
+    readonly activation: 'auto' | 'manual';
+    readonly fullWidth: boolean;
+    readonly color: Color;
+    readonly getTabId: (value: string) => string;
+    readonly getPanelId: (value: string) => string;
+}
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+export declare const useTabsContext: (component: string) => TabsContextValue;

package/Tabs/context.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = exports.TabsContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.TabsContext = react_1.default.createContext(null);
+const useTabsContext = (component) => {
+    const context = react_1.default.useContext(exports.TabsContext);
+    if (!context) {
+        throw new Error(`<${component}> should be placed inside <Tabs>`);
+    }
+    return context;
+};
+exports.useTabsContext = useTabsContext;

package/Tabs/index.d.ts

@@ -0,0 +1,10 @@
+import Tabs from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabList } from './TabList';
+export { default as TabPanel } from './TabPanel';
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';
+export type { TabListProps } from './TabList';
+export type { TabPanelProps } from './TabPanel';
+export type { TabsOrientation } from './context';
+export default Tabs;

package/Tabs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabList = exports.Tab = void 0;
+const Tabs_1 = __importDefault(require("./Tabs"));
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });
+var TabList_1 = require("./TabList");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return __importDefault(TabList_1).default; } });
+var TabPanel_1 = require("./TabPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return __importDefault(TabPanel_1).default; } });
+exports.default = Tabs_1.default;

package/Tabs/useTabsColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Tabs to the Color instance
+ */
+declare const useTabsColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
+export default useTabsColor;

package/Tabs/useTabsColor.js

@@ -0,0 +1,33 @@
+"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 Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Tabs to the Color instance
+ */
+const useTabsColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useTabsColor;

package/TextArea/TextAreaIconWrapper.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { TextFieldIconWrapperProps } from '../TextField/TextFieldIconWrapper';
 export type TextAreaIconWrapperProps = TextFieldIconWrapperProps;
 declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
-    readonly position: "end" | "start";
-    readonly error?: boolean | undefined;
-    readonly focused?: boolean | undefined;
+    readonly position: "start" | "end";
+    readonly error?: boolean;
+    readonly focused?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/TextArea/TextAreaIconWrapper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextArea/TextAreaInput.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -40,10 +50,15 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const TextareaNative = styled_1.default.textarea `
   resize: none;
-  padding: 1em 1.2em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.fieldPadding)(theme, tokens_1.FIELD_TEXT_SCALE);
+    return `${y} ${x}`;
+}};
   font-size: 1em;
+  line-height: inherit;
   /* Form controls do not inherit the font by default (textarea is monospace) */
   font-family: inherit;
   background: none;

package/TextArea/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/TextFieldContainer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/TextFieldErrorText.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/TextFieldIconWrapper.d.ts

@@ -11,8 +11,8 @@ export declare const TextFieldIconWrapper: React.ForwardRefExoticComponent<React
     /**
      * Icon position
      */
-    readonly position: 'start' | 'end';
-    readonly error?: boolean | undefined;
-    readonly focused?: boolean | undefined;
+    readonly position: "start" | "end";
+    readonly error?: boolean;
+    readonly focused?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TextFieldIconWrapper;

package/TextField/TextFieldIconWrapper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/TextFieldInput.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -41,9 +51,14 @@ exports.TextFieldInput = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const Input = styled_1.default.input `
-  padding: 1em 1.2em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.fieldPadding)(theme, tokens_1.FIELD_TEXT_SCALE);
+    return `${y} ${x}`;
+}};
   font-size: 1em;
+  line-height: inherit;
   /* Form controls do not inherit the font by default (textarea is monospace) */
   font-family: inherit;
   background: none;

package/TextField/TextFieldInputWrapper.d.ts

@@ -7,10 +7,10 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly disabled?: boolean;
 };
 export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly error?: boolean | undefined;
-    readonly fullWidth?: boolean | undefined;
-    readonly readOnly?: boolean | undefined;
-    readonly focused?: boolean | undefined;
-    readonly disabled?: boolean | undefined;
+    readonly error?: boolean;
+    readonly fullWidth?: boolean;
+    readonly readOnly?: boolean;
+    readonly focused?: boolean;
+    readonly disabled?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TextFieldInputWrapper;

package/TextField/TextFieldInputWrapper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -41,17 +51,20 @@ exports.TextFieldInputWrapper = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const Wrapper = styled_1.default.div `
   display: flex;
   align-items: stretch;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  border: 1px solid;
+  border: ${(0, tokens_1.fieldBorder)(tokens_1.FIELD_TEXT_SCALE)} solid;
   outline: 1px solid transparent;
   border-color: ${({ theme }) => theme.isDark
     ? theme.color.textPrimary.darken(100).toString()
     : theme.color.textPrimary.lighten(150).toString()};
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-  font-size: 0.9em;
+  font-size: ${tokens_1.FIELD_TEXT_SCALE}em;
+  /* The line of the control: the field has the height of the button */
+  line-height: calc(${tokens_1.CONTROL_LINE_HEIGHT} / ${tokens_1.FIELD_TEXT_SCALE});
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;

package/TextField/TextFieldLabel.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/TextFieldLabelAsterisk.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)

package/TextField/index.d.ts

@@ -83,5 +83,5 @@ export interface TextFieldOverrides {
      */
     readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>>;
+declare const _default: React.NamedExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/TextField/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/ThemeProvider/createTheme.js

@@ -17,8 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const Color_1 = __importDefault(require("../Color"));
 const createTheme = overrides => {
-    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing"]);
-    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, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing, padding, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "padding", "typography", "focusRing", "elevation"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, 
+        // Empty by default: the components keep their own fonts, focus and shadows
+        typography: Object.assign({}, typography), focusRing: Object.assign({}, focusRing), elevation: Object.assign({}, elevation), fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing), padding: {
+            control: Object.assign({ y: '0.75em', x: '1em' }, padding === null || padding === void 0 ? void 0 : padding.control),
+            item: Object.assign({ y: '0.6em', x: '0.8em' }, padding === null || padding === void 0 ? void 0 : padding.item),
+            container: Object.assign({ y: '1em', x: '1em' }, padding === null || padding === void 0 ? void 0 : padding.container),
+        } });
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     /* @ts-ignore */
     const defaultColors = {