@via-profit/ui-kit 0.5.0 → 0.6.0

package/Tabs/Tabs.d.ts

@@ -43,37 +43,37 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
      * The selected tab of the controlled tabs. Pass it together with `onChange`
      * Default: undefined
      */
-    readonly value?: string | null | undefined;
+    readonly value?: string | null;
     /**
      * The initially selected tab of the uncontrolled tabs
      * Default: the first enabled tab
      */
-    readonly defaultValue?: string | undefined;
+    readonly defaultValue?: string;
     /**
      * Called when the user selects a tab
      */
-    readonly onChange?: ((value: string, event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    readonly onChange?: (value: string, event: React.SyntheticEvent) => void;
     /**
      * `vertical` puts the tabs in a column to the left of the panels, the arrows ↑/↓ move between them
      * Default: `horizontal`
      */
-    readonly orientation?: TabsOrientation | undefined;
+    readonly orientation?: TabsOrientation;
     /**
      * `auto`: the arrows select the tab at once.\
      * `manual`: the arrows only move the focus, Enter or Space selects the tab.
      * Use `manual` when the panel loads slowly, e.g. from the server
      * Default: `auto`
      */
-    readonly activation?: "auto" | "manual" | undefined;
+    readonly activation?: "auto" | "manual";
     /**
      * The tabs share the whole width of the list
      * Default: false
      */
-    readonly fullWidth?: boolean | undefined;
+    readonly fullWidth?: boolean;
     /**
      * The color of the selected tab: the primary, default, secondary name of the colors or your specified color value
      * Default: `default`
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Tabs/Tabs.js

@@ -18,7 +18,6 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const context_1 = require("./context");
 const useTabsColor_1 = __importDefault(require("./useTabsColor"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const StyledTabs = styled_1.default.div `
   display: ${({ $orientation }) => ($orientation === 'vertical' ? 'flex' : 'block')};
   align-items: flex-start;
@@ -28,7 +27,7 @@ const StyledTabs = styled_1.default.div `
  */
 const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
 const Tabs = (props, ref) => {
-    const _a = (0, useThemeProps_1.default)('Tabs', props), { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
     const isControlled = typeof value !== 'undefined';
     const [internalValue, setInternalValue] = react_1.default.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const currentValue = isControlled ? value : internalValue;

package/Tabs/useTabsColor.d.ts

@@ -2,5 +2,5 @@ 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;
+declare const useTabsColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
 export 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)
@@ -45,9 +55,8 @@ const TextFieldInputWrapper_1 = __importDefault(require("../TextField/TextFieldI
 const TextAreaInput_1 = __importDefault(require("../TextArea/TextAreaInput"));
 const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErrorText"));
 const TextAreaIconWrapper_1 = __importDefault(require("./TextAreaIconWrapper"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const TextArea = (props, ref) => {
-    const _a = (0, useThemeProps_1.default)('TextArea', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

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);
 };
@@ -48,7 +58,6 @@ const TextFieldInputWrapper_1 = __importDefault(require("./TextFieldInputWrapper
 const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
 const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
 const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./TextFieldContainer"), exports);
 __exportStar(require("./TextFieldLabel"), exports);
 __exportStar(require("./TextFieldLabelAsterisk"), exports);
@@ -66,7 +75,7 @@ const defailtOverrides = {
     InputWrapper: TextFieldInputWrapper_1.default,
 };
 const TextField = React.forwardRef((props, ref) => {
-    const _a = (0, useThemeProps_1.default)('TextField', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

package/ThemeProvider/createTheme.js

@@ -17,10 +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, components, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "components", "typography", "focusRing", "elevation"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, components: components || {}, 
+    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) });
+        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 = {