@via-profit/ui-kit 0.5.0 → 0.6.0

package/Selectbox/SelectboxButton.d.ts

@@ -8,9 +8,9 @@ export type SelectboxButtonProps = Omit<ButtonProps, 'type'> & {
     readonly isOpen?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<ButtonProps, "type"> & {
-    readonly fullWidth?: boolean | undefined;
-    readonly error?: boolean | undefined;
-    readonly anchorPos?: import("../Popper").AnchorPos | undefined;
-    readonly isOpen?: boolean | undefined;
+    readonly fullWidth?: boolean;
+    readonly error?: boolean;
+    readonly anchorPos?: AnchorPos;
+    readonly isOpen?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Selectbox/SelectboxButton.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)
@@ -42,13 +52,19 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../Button"));
 const ButtonTextWrapper_1 = __importDefault(require("../Button/ButtonTextWrapper"));
 const react_1 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
   flex: 1;
-  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;
+  /* The line of the control: the selectbox has the height of the button */
+  line-height: calc(${tokens_1.CONTROL_LINE_HEIGHT} / ${tokens_1.FIELD_TEXT_SCALE});
   background: none;
   width: 100%;
-  border-width: 1px;
+  border-width: ${(0, tokens_1.fieldBorder)(tokens_1.FIELD_TEXT_SCALE)};
   border-style: solid;
   box-shadow: none;
   &:hover {
@@ -66,7 +82,6 @@ const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
       }
     `}
   transition: none;
-  
 `;
 // The value has the size of the text in the fields, so the selectbox has the height of the TextField
 const StyledButtonTextWrapper = (0, styled_1.default)(ButtonTextWrapper_1.default) `

package/Selectbox/SelectboxButtonWrapper.d.ts

@@ -5,8 +5,8 @@ export type SelectboxButtonWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly isOpen: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly fullWidth?: boolean | undefined;
-    readonly error?: boolean | undefined;
+    readonly fullWidth?: boolean;
+    readonly error?: boolean;
     readonly isOpen: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Selectbox/SelectboxButtonWrapper.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)
@@ -39,9 +49,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const Wrapper = styled_1.default.div `
   min-width: 16em;
-  font-size: 0.9em;
+  font-size: ${tokens_1.FIELD_TEXT_SCALE}em;
   text-align: left;
   max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
   display: flex;
@@ -52,8 +63,6 @@ const Wrapper = styled_1.default.div `
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;
-
-
 `;
 const SelectboxButtonWrapper = (props, ref) => {
     const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);

package/Selectbox/SelectboxMenu.d.ts

@@ -5,6 +5,6 @@ export interface SelectbosMenuProps<T, Multiple extends boolean | undefined = un
     readonly onChange?: OnChange<T, Multiple>;
 }
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectbosMenuProps<T, Multiple> & {
-    ref?: React.Ref<MenuRef> | undefined;
-}) => JSX.Element;
+    ref?: React.Ref<MenuRef>;
+}) => React.JSX.Element;
 export default _default;

package/Selectbox/SelectboxMenu.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/Selectbox/index.d.ts

@@ -176,6 +176,6 @@ export type ItemToString<T, Multiple extends boolean | undefined = undefined> =
 export type RenderValue<T, Multiple extends boolean | undefined = undefined> = (value: Multiple extends undefined ? T : readonly T[]) => React.ReactNode;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectboxProps<T, Multiple> & {
-    ref?: React.ForwardedRef<HTMLButtonElement> | undefined;
-}) => JSX.Element;
+    ref?: React.ForwardedRef<HTMLButtonElement>;
+}) => React.JSX.Element;
 export default _default;

package/Selectbox/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)
@@ -51,7 +61,6 @@ const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErro
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
 const SelectboxMenu_1 = __importDefault(require("./SelectboxMenu"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const DEFAULT_OVERRIDES = {
     Button: SelectboxButton_1.default,
     Icon: SelectboxChevronIcon_1.default,
@@ -62,7 +71,7 @@ const DEFAULT_OVERRIDES = {
     Container: SelectboxContainer_1.default,
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const _a = (0, useThemeProps_1.default)('Selectbox', props), { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = _a, nativeButtonProps = __rest(_a, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);

package/Slider/SliderRail.d.ts

@@ -6,7 +6,7 @@ export type SliderRailProps = React.HTMLAttributes<HTMLSpanElement> & {
     readonly disabled: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     readonly orientation: SliderOrientation;
     readonly disabled: boolean;
 } & React.RefAttributes<HTMLSpanElement>>;

package/Slider/SliderThumb.d.ts

@@ -18,7 +18,7 @@ export type SliderThumbProps = React.HTMLAttributes<HTMLSpanElement> & {
     readonly index: number;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     readonly orientation: SliderOrientation;
     readonly disabled: boolean;
     /**

package/Slider/SliderTrack.d.ts

@@ -14,7 +14,7 @@ export type SliderTrackProps = React.HTMLAttributes<HTMLSpanElement> & {
     readonly end: number;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     readonly orientation: SliderOrientation;
     readonly disabled: boolean;
     /**

package/Slider/index.js

@@ -22,9 +22,8 @@ const SliderThumb_1 = __importDefault(require("./SliderThumb"));
 const SliderMark_1 = __importDefault(require("./SliderMark"));
 const SliderMarkLabel_1 = __importDefault(require("./SliderMarkLabel"));
 const utils_1 = require("./utils");
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Slider = (props, ref) => {
-    const _a = (0, useThemeProps_1.default)('Slider', props), { value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, marks = false, orientation = 'horizontal', disabled = false, color, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, getAriaLabel, getAriaValueText, overrides, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "orientation", "disabled", "color", "name", 'aria-label', 'aria-labelledby', "getAriaLabel", "getAriaValueText", "overrides", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture"]);
+    const { value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, marks = false, orientation = 'horizontal', disabled = false, color, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, getAriaLabel, getAriaValueText, overrides, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "orientation", "disabled", "color", "name", 'aria-label', 'aria-labelledby', "getAriaLabel", "getAriaValueText", "overrides", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture"]);
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SliderContainer_1.default,
         Rail: (overrides === null || overrides === void 0 ? void 0 : overrides.Rail) || SliderRail_1.default,

package/Slider/useSliderColor.d.ts

@@ -2,5 +2,5 @@ import Color from '../Color';
 /**
  * Resolves the `color` property of the Slider to the Color instance
  */
-declare const useSliderColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+declare const useSliderColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
 export default useSliderColor;

package/Stack/index.d.ts

@@ -29,34 +29,46 @@ export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
      * The stack takes the width of its content (`inline-flex`) instead of the full width
      */
     readonly inline?: boolean;
+    /**
+     * The element of the stack: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
      * `column` — the elements go one under another, `row` — in a line\
      * **Default:** `column`
      */
-    readonly direction?: "row" | "column" | undefined;
+    readonly direction?: "column" | "row";
     /**
      * The gap between the elements: a step of the theme spacing scale or any CSS length\
      * **Default:** `md`
      */
-    readonly gap?: Spacing | undefined;
+    readonly gap?: Spacing;
     /**
      * The alignment across the direction (`align-items`)\
      * **Default:** `stretch` for the column, `center` for the row
      */
-    readonly align?: import("csstype").Property.AlignItems | undefined;
+    readonly align?: React.CSSProperties["alignItems"];
     /**
      * The alignment along the direction (`justify-content`)
      */
-    readonly justify?: import("csstype").Property.JustifyContent | undefined;
+    readonly justify?: React.CSSProperties["justifyContent"];
     /**
      * The elements of the row wrap to the next line when they do not fit
      */
-    readonly wrap?: boolean | undefined;
+    readonly wrap?: boolean;
     /**
      * The stack takes the width of its content (`inline-flex`) instead of the full width
      */
-    readonly inline?: boolean | undefined;
+    readonly inline?: boolean;
+    /**
+     * The element of the stack: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Stack/index.js

@@ -17,6 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const spacing_1 = require("../utils/spacing");
+/**
+ * The lists are the rows of the elements here: no default margins and markers
+ */
+const LIST_TAGS = ['ul', 'ol', 'dl'];
 const StyledStack = styled_1.default.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   flex-direction: ${({ $direction }) => $direction};
@@ -26,13 +30,14 @@ const StyledStack = styled_1.default.div `
   gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
   /* A flex child shrinks below its content only with min-width: 0 */
   min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
 `;
 /**
  * The elements in a column or in a row with the same gap between them.
  * The children stay the plain elements: no wrappers for the items
  */
 const Stack = (props, ref) => {
-    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline"]);
-    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, ref: ref }), children));
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false, as } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline", "as"]);
+    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(Stack);

package/Surface/SurfaceContainer.d.ts

@@ -5,8 +5,8 @@ export type SurfaceContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly inline?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
-    readonly noPadding?: boolean | undefined;
+    readonly inline?: boolean;
+    readonly rounded?: boolean;
+    readonly noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceContainer.js

@@ -24,7 +24,7 @@ const StyledSurfaceContainer = styled_1.default.div `
   flex-direction: column;
   background: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'surface', `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`)};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'surface')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   font-size: 1em;
 

package/Surface/SurfaceContent.d.ts

@@ -4,7 +4,7 @@ export type SurfaceContentProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceContent.js

@@ -17,20 +17,27 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const StyledContent = styled_1.default.div `
   flex: 1;
-  ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
-    (0, react_2.css) `
-      padding: 1.4rem 1rem 1rem 1rem;
-    `}
+  ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return (!$noPadding &&
+        (0, react_2.css) `
+        padding: calc(${y} * 1.4) ${x} ${y} ${x};
+      `);
+}}
 
-  ${({ $rounded, $noPadding }) => $rounded &&
-    (0, react_2.css) `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: ${$noPadding ? '0' : '1rem'};
-    `}
+  ${({ $rounded, $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return ($rounded &&
+        (0, react_2.css) `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: ${$noPadding ? '0' : `${y} ${x}`};
+      `);
+}}
 `;
 const SurfaceContent = (props, ref) => {
     const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);

package/Surface/SurfaceFooter.d.ts

@@ -4,7 +4,7 @@ export type SurfaceFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceFooter.js

@@ -16,11 +16,15 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const StyledFooter = styled_1.default.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return $noPadding ? '0' : `${y} ${x}`;
+}};
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 `;

package/Surface/SurfaceHeader.d.ts

@@ -4,7 +4,7 @@ export type SurfaceHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceHeader.js

@@ -16,9 +16,13 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 1rem 0 1rem')};
-  font-size: 1.3rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container', 1.3);
+    return $noPadding ? '0' : `${y} ${x} 0 ${x}`;
+}};
+  font-size: 1.3em;
   font-weight: 600;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;

package/Surface/SurfaceSubheader.d.ts

@@ -4,7 +4,7 @@ export type SurfaceSubheaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceSubheader.js

@@ -16,9 +16,13 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '0.5em 1rem 0 1rem')};
-  font-size: 0.9rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container', 0.9);
+    return $noPadding ? '0' : `calc(${y} / 2) ${x} 0 ${x}`;
+}};
+  font-size: 0.9em;
   font-weight: 200;
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;

package/Surface/index.d.ts

@@ -9,15 +9,15 @@ export type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Header content
      */
-    readonly header?: JSX.Element | string;
+    readonly header?: React.JSX.Element | string;
     /**
      * Footer content
      */
-    readonly footer?: JSX.Element | string;
+    readonly footer?: React.JSX.Element | string;
     /**
      * Subheader content
      */
-    readonly subheader?: JSX.Element | string;
+    readonly subheader?: React.JSX.Element | string;
     /**
      * If true then surface will be inline-flex element, and the flex otherwise
      */
@@ -62,30 +62,30 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * Header content
      */
-    readonly header?: string | JSX.Element | undefined;
+    readonly header?: React.JSX.Element | string;
     /**
      * Footer content
      */
-    readonly footer?: string | JSX.Element | undefined;
+    readonly footer?: React.JSX.Element | string;
     /**
      * Subheader content
      */
-    readonly subheader?: string | JSX.Element | undefined;
+    readonly subheader?: React.JSX.Element | string;
     /**
      * If true then surface will be inline-flex element, and the flex otherwise
      */
-    readonly inline?: boolean | undefined;
+    readonly inline?: boolean;
     /**
      * The surface will be rounded
      */
-    readonly rounded?: boolean | undefined;
+    readonly rounded?: boolean;
     /**
      * If true then surface does not contin any paddings
      */
-    readonly noPadding?: boolean | undefined;
+    readonly noPadding?: boolean;
     /**
      * Overridable components map
      */
-    readonly overrides?: SurfaceOverrides | undefined;
+    readonly overrides?: SurfaceOverrides;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;