@trilogy-ds/react 4.20.0-beta.1 → 4.20.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/box/Box.d.ts +2 -0
- package/lib/components/box/Box.js +5 -3
- package/lib/components/box/Box.native.d.ts +2 -0
- package/lib/components/box/Box.native.js +6 -2
- package/lib/components/box/BoxProps.d.ts +2 -0
- package/lib/components/box/BoxPropsDefaults.js +25 -1
- package/lib/components/box/content/BoxContent.native.js +4 -3
- package/lib/components/box/context/boxContext.d.ts +2 -0
- package/lib/components/box/context/boxContext.js +2 -1
- package/lib/components/box/footer/BoxFooter.native.js +5 -2
- package/lib/components/box/header/BoxHeader.native.js +5 -2
- package/lib/components/card/CardPropsDefaults.js +2 -2
- package/lib/components/container/Container.d.ts +1 -1
- package/lib/components/container/Container.js +1 -1
- package/lib/components/container/ContainerProps.d.ts +4 -3
- package/lib/components/container/ContainerProps.js +4 -4
- package/lib/components/container/ContainerPropsDefaults.js +6 -6
- package/lib/objects/facets/Padding.d.ts +12 -0
- package/lib/objects/facets/Padding.js +37 -0
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,8 @@ import { BoxProps } from './BoxProps';
|
|
|
16
16
|
* @param testId {string} Test Id for Test Integration
|
|
17
17
|
* @param id {string} Custom id attribute
|
|
18
18
|
* @param fullheight {boolean} Full height box
|
|
19
|
+
* @param radius {string} Box border radius
|
|
20
|
+
* @param padding {string} Box padding
|
|
19
21
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
20
22
|
* @param className {string} Additional CSS Classes
|
|
21
23
|
* @param href {string} Link href (renders box as anchor)
|
|
@@ -23,15 +23,17 @@ import { ComponentName } from '../enumsComponentsName';
|
|
|
23
23
|
* @param testId {string} Test Id for Test Integration
|
|
24
24
|
* @param id {string} Custom id attribute
|
|
25
25
|
* @param fullheight {boolean} Full height box
|
|
26
|
+
* @param radius {string} Box border radius
|
|
27
|
+
* @param padding {string} Box padding
|
|
26
28
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
27
29
|
* @param className {string} Additional CSS Classes
|
|
28
30
|
* @param href {string} Link href (renders box as anchor)
|
|
29
31
|
* @param blank {boolean} Target blank when href is set
|
|
30
32
|
*/
|
|
31
33
|
var Box = React.forwardRef(function (_a, ref) {
|
|
32
|
-
var inverted = _a.inverted, children = _a.children, className = _a.className, id = _a.id, onClick = _a.onClick, skeleton = _a.skeleton, href = _a.href, blank = _a.blank, backgroundColor = _a.backgroundColor, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundSrc = _a.backgroundSrc, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, testId = _a.testId, radius = _a.radius, others = __rest(_a, ["inverted", "children", "className", "id", "onClick", "skeleton", "href", "blank", "backgroundColor", "highlighted", "shadowless", "backgroundSrc", "flat", "headerOffset", "fullheight", "active", "testId", "radius"]);
|
|
34
|
+
var inverted = _a.inverted, children = _a.children, className = _a.className, id = _a.id, onClick = _a.onClick, skeleton = _a.skeleton, href = _a.href, blank = _a.blank, backgroundColor = _a.backgroundColor, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundSrc = _a.backgroundSrc, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, testId = _a.testId, radius = _a.radius, padding = _a.padding, others = __rest(_a, ["inverted", "children", "className", "id", "onClick", "skeleton", "href", "blank", "backgroundColor", "highlighted", "shadowless", "backgroundSrc", "flat", "headerOffset", "fullheight", "active", "testId", "radius", "padding"]);
|
|
33
35
|
var styled = useTrilogyContext().styled;
|
|
34
|
-
var classes = hashClass(styled, clsx('box', shadowless && is('shadowless'), className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading'), highlighted && "".concat(is('highlighted'), " ").concat(is(getColorClassName(highlighted))), flat && is('flat'), headerOffset && is('offset-header'), fullheight && is('fullheight'), active && is('active'), radius && "radius-".concat(radius)));
|
|
36
|
+
var classes = hashClass(styled, clsx('box', shadowless && is('shadowless'), className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading'), highlighted && "".concat(is('highlighted'), " ").concat(is(getColorClassName(highlighted))), flat && is('flat'), headerOffset && is('offset-header'), fullheight && is('fullheight'), active && is('active'), radius && "radius-".concat(radius), padding && "padding-".concat(padding)));
|
|
35
37
|
var Tag = href ? 'a' : 'div';
|
|
36
38
|
var hoverStyle = {
|
|
37
39
|
cursor: 'pointer',
|
|
@@ -49,4 +51,4 @@ var Box = React.forwardRef(function (_a, ref) {
|
|
|
49
51
|
});
|
|
50
52
|
Box.displayName = ComponentName.Box;
|
|
51
53
|
export default Box;
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9ib3gvQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBR3REOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBc0JHO0FBQ0gsSUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDMUIsVUFDRSxFQXFCQyxFQUNELEdBQUc7SUFyQkQsSUFBQSxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixLQUFLLFdBQUEsRUFDTCxlQUFlLHFCQUFBLEVBQ2YsV0FBVyxpQkFBQSxFQUNYLFVBQVUsZ0JBQUEsRUFDVixhQUFhLG1CQUFBLEVBQ2IsSUFBSSxVQUFBLEVBQ0osWUFBWSxrQkFBQSxFQUNaLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDTixNQUFNLFlBQUEsRUFDTixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDSixNQUFNLGNBcEJYLG1PQXFCQyxDQURVO0lBSUgsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLEtBQUssRUFDTCxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixTQUFTLEVBQ1QsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN6QixXQUFXLElBQUksVUFBRyxFQUFFLENBQUMsYUFBYSxDQUFDLGNBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUUsRUFDM0UsSUFBSSxJQUFJLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFDbEIsWUFBWSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsRUFDbkMsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsTUFBTSxJQUFJLGlCQUFVLE1BQU0sQ0FBRSxFQUM1QixPQUFPLElBQUksa0JBQVcsT0FBTyxDQUFFLENBQ2hDLENBQ0YsQ0FBQTtJQUVELElBQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUE7SUFFOUIsSUFBTSxVQUFVLEdBQXdCO1FBQ3RDLE1BQU0sRUFBRSxTQUFTO0tBQ2xCLENBQUE7SUFFRCxPQUFPLENBQ0wsb0JBQUMsR0FBRyw0QkFDVyxNQUFNLEVBQ25CLEdBQUcsRUFBRSxHQUEyRSxFQUNoRixFQUFFLEVBQUUsRUFBRSxFQUNOLEtBQUssRUFBRSxPQUFPLGlCQUFTLFVBQVUsQ0FBRSxFQUNuQyxJQUFJLEVBQUUsSUFBSSxJQUNOLENBQUMsSUFBSTtRQUNQLEtBQUssSUFBSTtRQUNQLE1BQU0sRUFBRSxRQUFRO0tBQ2pCLENBQUMsSUFDSixPQUFPLEVBQUUsVUFBQyxDQUFDO1lBQ1QsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBO1FBQ2QsQ0FBQyxFQUNELFNBQVMsRUFBRSxPQUFPLElBQ2QsTUFBTSxFQUNOLENBQUMsYUFBYSxJQUFJO1FBQ3BCLEtBQUssRUFBRTtZQUNMLGVBQWUsRUFBRSxjQUFPLGFBQWEsTUFBRztTQUN6QztLQUNGLENBQUMsR0FFRCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFDRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxHQUFHLENBQUE7QUFDbkMsZUFBZSxHQUFHLENBQUEifQ==
|
|
@@ -16,6 +16,8 @@ import React from 'react';
|
|
|
16
16
|
* @param testId {string} Test Id for Test Integration
|
|
17
17
|
* @param id {string} Custom id attribute
|
|
18
18
|
* @param fullheight {boolean} Full height box
|
|
19
|
+
* @param radius {string} Box border radius
|
|
20
|
+
* @param padding {string} Box padding
|
|
19
21
|
*/
|
|
20
22
|
declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<BoxNativeRef>>;
|
|
21
23
|
export default Box;
|
|
@@ -24,9 +24,11 @@ import { Skeleton } from '../skeleton';
|
|
|
24
24
|
* @param testId {string} Test Id for Test Integration
|
|
25
25
|
* @param id {string} Custom id attribute
|
|
26
26
|
* @param fullheight {boolean} Full height box
|
|
27
|
+
* @param radius {string} Box border radius
|
|
28
|
+
* @param padding {string} Box padding
|
|
27
29
|
*/
|
|
28
30
|
var Box = React.forwardRef(function (_a, ref) {
|
|
29
|
-
var children = _a.children, onClick = _a.onClick, skeleton = _a.skeleton, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, testId = _a.testId, radius = _a.radius, others = __rest(_a, ["children", "onClick", "skeleton", "highlighted", "shadowless", "backgroundColor", "backgroundSrc", "inverted", "flat", "headerOffset", "fullheight", "active", "testId", "radius"]);
|
|
31
|
+
var children = _a.children, onClick = _a.onClick, skeleton = _a.skeleton, highlighted = _a.highlighted, shadowless = _a.shadowless, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, flat = _a.flat, headerOffset = _a.headerOffset, fullheight = _a.fullheight, active = _a.active, testId = _a.testId, radius = _a.radius, padding = _a.padding, others = __rest(_a, ["children", "onClick", "skeleton", "highlighted", "shadowless", "backgroundColor", "backgroundSrc", "inverted", "flat", "headerOffset", "fullheight", "active", "testId", "radius", "padding"]);
|
|
30
32
|
var colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
|
|
31
33
|
var boxRadius = getRadius(radius !== null && radius !== void 0 ? radius : Radius.LG);
|
|
32
34
|
var styles = memoStyles({
|
|
@@ -78,6 +80,7 @@ var Box = React.forwardRef(function (_a, ref) {
|
|
|
78
80
|
if (onClick) {
|
|
79
81
|
return (React.createElement(BoxContext.Provider, { value: {
|
|
80
82
|
fullHeight: fullheight || false,
|
|
83
|
+
padding: padding,
|
|
81
84
|
} },
|
|
82
85
|
React.createElement(View, { style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style] },
|
|
83
86
|
React.createElement(TouchableOpacity, { ref: ref, onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, testID: boxTestId, style: {
|
|
@@ -91,6 +94,7 @@ var Box = React.forwardRef(function (_a, ref) {
|
|
|
91
94
|
}
|
|
92
95
|
return (React.createElement(BoxContext.Provider, { value: {
|
|
93
96
|
fullHeight: fullheight || false,
|
|
97
|
+
padding: padding,
|
|
94
98
|
} },
|
|
95
99
|
React.createElement(View, { style: [styles.box, !flat && styles.shadow, others === null || others === void 0 ? void 0 : others.style] },
|
|
96
100
|
React.createElement(View, { ref: ref, testID: boxTestId, style: {
|
|
@@ -103,4 +107,4 @@ var Box = React.forwardRef(function (_a, ref) {
|
|
|
103
107
|
});
|
|
104
108
|
Box.displayName = ComponentName.Box;
|
|
105
109
|
export default Box;
|
|
106
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
110
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYm94L0JveC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBc0IsTUFBTSx3QkFBd0IsQ0FBQTtBQUN4RixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQzNELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDaEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ2pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxhQUFhLENBQUE7QUFHdEM7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCRztBQUNILElBQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzFCLFVBQ0UsRUFpQkMsRUFDRCxHQUFHO0lBakJELElBQUEsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsV0FBVyxpQkFBQSxFQUNYLFVBQVUsZ0JBQUEsRUFDVixlQUFlLHFCQUFBLEVBQ2YsYUFBYSxtQkFBQSxFQUNiLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFlBQVksa0JBQUEsRUFDWixVQUFVLGdCQUFBLEVBQ1YsTUFBTSxZQUFBLEVBQ04sTUFBTSxZQUFBLEVBQ04sTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ0osTUFBTSxjQWhCWCwrTEFp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
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TouchableOpacity, type View } from 'react-native';
|
|
3
|
+
import { Padding } from '../../objects/facets/Padding';
|
|
3
4
|
import { BackgroundProps } from '../../objects/atoms/Background';
|
|
4
5
|
import { Accessibility } from '../../objects/facets/Accessibility';
|
|
5
6
|
import { Clickable } from '../../objects/facets/Clickable';
|
|
@@ -24,6 +25,7 @@ export interface BoxProps extends BackgroundProps, Clickable, Fullheight, Access
|
|
|
24
25
|
inverted?: boolean;
|
|
25
26
|
blank?: boolean;
|
|
26
27
|
radius?: Radius | `${Radius}`;
|
|
28
|
+
padding?: Padding | `${Padding}`;
|
|
27
29
|
}
|
|
28
30
|
export type BoxRef = HTMLDivElement;
|
|
29
31
|
export type BoxNativeRef = View | TouchableOpacity;
|
|
@@ -139,16 +139,40 @@ export default {
|
|
|
139
139
|
"type": "enum",
|
|
140
140
|
"values": [
|
|
141
141
|
"undefined",
|
|
142
|
+
"sm",
|
|
143
|
+
"md",
|
|
144
|
+
"lg",
|
|
142
145
|
"xs",
|
|
143
146
|
"sm",
|
|
144
147
|
"md",
|
|
145
148
|
"lg",
|
|
146
149
|
"full",
|
|
147
150
|
"xs",
|
|
151
|
+
"full"
|
|
152
|
+
]
|
|
153
|
+
},
|
|
154
|
+
"padding": {
|
|
155
|
+
"type": "enum",
|
|
156
|
+
"values": [
|
|
157
|
+
"undefined",
|
|
158
|
+
"none",
|
|
148
159
|
"sm",
|
|
149
160
|
"md",
|
|
150
161
|
"lg",
|
|
151
|
-
"
|
|
162
|
+
"xs",
|
|
163
|
+
"none",
|
|
164
|
+
"xxs",
|
|
165
|
+
"xs",
|
|
166
|
+
"sm",
|
|
167
|
+
"md",
|
|
168
|
+
"lg",
|
|
169
|
+
"xl",
|
|
170
|
+
"xxl",
|
|
171
|
+
"xxxl",
|
|
172
|
+
"xxs",
|
|
173
|
+
"xl",
|
|
174
|
+
"xxl",
|
|
175
|
+
"xxxl"
|
|
152
176
|
]
|
|
153
177
|
},
|
|
154
178
|
"backgroundColor": {
|
|
@@ -6,6 +6,7 @@ import * as React from 'react';
|
|
|
6
6
|
import { ImageBackground, Text, View } from 'react-native';
|
|
7
7
|
import { memoStyles } from '../../../helpers/memoStyles';
|
|
8
8
|
import { Theme } from '../../../constants/theme';
|
|
9
|
+
import { getPaddingStyle } from '../../../objects/facets/Padding';
|
|
9
10
|
/**
|
|
10
11
|
* Box Content
|
|
11
12
|
* @param children {React.ReactNode} Box Content Children
|
|
@@ -16,10 +17,10 @@ import { Theme } from '../../../constants/theme';
|
|
|
16
17
|
*/
|
|
17
18
|
var BoxContent = React.forwardRef(function (_a, ref) {
|
|
18
19
|
var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, testId = _a.testId, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc", "testId"]);
|
|
19
|
-
var
|
|
20
|
+
var _b = React.useContext(BoxContext), fullHeight = _b.fullHeight, padding = _b.padding;
|
|
20
21
|
var styles = memoStyles({
|
|
21
22
|
boxContent: {
|
|
22
|
-
padding:
|
|
23
|
+
padding: getPaddingStyle(padding !== null && padding !== void 0 ? padding : 'md'),
|
|
23
24
|
backgroundColor: (backgroundColor && getColorStyle(backgroundColor)) || 'transparent',
|
|
24
25
|
flex: fullHeight ? 1 : undefined,
|
|
25
26
|
},
|
|
@@ -34,4 +35,4 @@ var BoxContent = React.forwardRef(function (_a, ref) {
|
|
|
34
35
|
});
|
|
35
36
|
BoxContent.displayName = ComponentName.BoxContent;
|
|
36
37
|
export default BoxContent;
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Q29udGVudC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2JveC9jb250ZW50L0JveENvbnRlbnQubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDdEQsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGVBQWUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQzFELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUNqRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRTFEOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUFDLEVBQStELEVBQUUsR0FBRztJQUFsRSxJQUFBLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUE3RCwwREFBK0QsQ0FBRjtJQUN0RCxJQUFBLEtBQTBCLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLEVBQXBELFVBQVUsZ0JBQUEsRUFBRSxPQUFPLGFBQWlDLENBQUE7SUFFNUQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDO1FBQ3hCLFVBQVUsRUFBRTtZQUNWLE9BQU8sRUFBRSxlQUFlLENBQUMsT0FBTyxhQUFQLE9BQU8sY0FBUCxPQUFPLEdBQUksSUFBSSxDQUFDO1lBQ3pDLGVBQWUsRUFBRSxDQUFDLGVBQWUsSUFBSSxhQUFhLENBQUMsZUFBZSxDQUFDLENBQUMsSUFBSSxhQUFhO1lBQ3JGLElBQUksRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUztTQUNqQztLQUNGLENBQUMsQ0FBQTtJQUVGLElBQU0sT0FBTyxHQUFHLENBQ2Qsb0JBQUMsSUFBSSxhQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQU0sTUFBTSxHQUNuRSxRQUFRLElBQUksT0FBTyxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxvQkFBQyxJQUFJLFFBQUUsUUFBUSxDQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FDbkYsQ0FDUixDQUFBO0lBRUQsSUFBSSxhQUFhLEVBQUU7UUFDakIsT0FBTyxDQUNMLG9CQUFDLGVBQWUsSUFDZCxNQUFNLEVBQUUsT0FBTyxhQUFhLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxFQUNsRixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQ2xCLFVBQVUsRUFBRSxFQUFFLFlBQVksRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxJQUU1QyxPQUFPLENBQ1EsQ0FDbkIsQ0FBQTtLQUNGO1NBQU07UUFDTCxPQUFPLE9BQU8sQ0FBQTtLQUNmO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxVQUFVLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUE7QUFFakQsZUFBZSxVQUFVLENBQUEifQ==
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export var BoxContext = React.createContext({
|
|
3
3
|
fullHeight: false,
|
|
4
|
+
padding: undefined,
|
|
4
5
|
});
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94Q29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2NvbnRleHQvYm94Q29udGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBT3pCLE1BQU0sQ0FBQyxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFrQjtJQUM3RCxVQUFVLEVBQUUsS0FBSztJQUNqQixPQUFPLEVBQUUsU0FBUztDQUNuQixDQUFDLENBQUEifQ==
|
|
@@ -4,6 +4,8 @@ import { getColorStyle } from '../../../objects';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { Text, View } from 'react-native';
|
|
6
6
|
import { memoStyles } from '../../../helpers/memoStyles';
|
|
7
|
+
import { BoxContext } from '../context/boxContext';
|
|
8
|
+
import { getPaddingStyle } from '../../../objects/facets/Padding';
|
|
7
9
|
/**
|
|
8
10
|
* Box Footer Component
|
|
9
11
|
* @param children {React.ReactNode} Children
|
|
@@ -13,9 +15,10 @@ import { memoStyles } from '../../../helpers/memoStyles';
|
|
|
13
15
|
*/
|
|
14
16
|
var BoxFooter = React.forwardRef(function (_a, ref) {
|
|
15
17
|
var children = _a.children, backgroundColor = _a.backgroundColor, testId = _a.testId, others = __rest(_a, ["children", "backgroundColor", "testId"]);
|
|
18
|
+
var padding = React.useContext(BoxContext).padding;
|
|
16
19
|
var styles = memoStyles({
|
|
17
20
|
boxFooter: {
|
|
18
|
-
padding:
|
|
21
|
+
padding: getPaddingStyle(padding !== null && padding !== void 0 ? padding : 'md'),
|
|
19
22
|
justifyContent: 'center',
|
|
20
23
|
backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : 'transparent',
|
|
21
24
|
},
|
|
@@ -24,4 +27,4 @@ var BoxFooter = React.forwardRef(function (_a, ref) {
|
|
|
24
27
|
});
|
|
25
28
|
BoxFooter.displayName = ComponentName.BoxFooter;
|
|
26
29
|
export default BoxFooter;
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94Rm9vdGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2Zvb3Rlci9Cb3hGb290ZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDekMsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBRWpELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFFMUQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsVUFBQyxFQUFnRCxFQUFFLEdBQUc7SUFBbkQsSUFBQSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUE5Qyx5Q0FBZ0QsQ0FBRjtJQUNyQyxJQUFBLE9BQU8sR0FBSyxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxRQUFqQyxDQUFpQztJQUVoRCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUM7UUFDeEIsU0FBUyxFQUFFO1lBQ1QsT0FBTyxFQUFFLGVBQWUsQ0FBQyxPQUFPLGFBQVAsT0FBTyxjQUFQLE9BQU8sR0FBSSxJQUFJLENBQUM7WUFDekMsY0FBYyxFQUFFLFFBQVE7WUFDeEIsZUFBZSxFQUFFLGVBQWUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhO1NBQ2xGO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsRUFBRSxNQUFNLEVBQUUsTUFBTSxJQUFNLE1BQU0sR0FDbEUsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsb0JBQUMsSUFBSSxRQUFFLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBUSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQzNGLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRS9DLGVBQWUsU0FBUyxDQUFBIn0=
|
|
@@ -6,6 +6,8 @@ import * as React from 'react';
|
|
|
6
6
|
import { useContext } from 'react';
|
|
7
7
|
import { Text, View } from 'react-native';
|
|
8
8
|
import { memoStyles } from '../../../helpers/memoStyles';
|
|
9
|
+
import { getPaddingStyle } from '../../../objects/facets/Padding';
|
|
10
|
+
import { BoxContext } from '../context/boxContext';
|
|
9
11
|
/**
|
|
10
12
|
* Box Header Component
|
|
11
13
|
* @param children {React.ReactNode} Children
|
|
@@ -18,12 +20,13 @@ var BoxHeader = React.forwardRef(function (_a, ref) {
|
|
|
18
20
|
var statesContext = useContext(StatesContext);
|
|
19
21
|
var headerBgc = variant ? getColorStyle(variant) : getColorStyle(TrilogyColor.MAIN);
|
|
20
22
|
var textColor = getColorStyle(TrilogyColor.BACKGROUND);
|
|
23
|
+
var padding = React.useContext(BoxContext).padding;
|
|
21
24
|
var styles = memoStyles({
|
|
22
25
|
boxHeader: {
|
|
23
26
|
width: '100%',
|
|
24
27
|
backgroundColor: headerBgc,
|
|
25
28
|
padding: 10,
|
|
26
|
-
paddingLeft:
|
|
29
|
+
paddingLeft: getPaddingStyle(padding !== null && padding !== void 0 ? padding : 'md'),
|
|
27
30
|
marginTop: (statesContext.active && -2) || (statesContext.flat && -1) || 0,
|
|
28
31
|
justifyContent: 'space-between',
|
|
29
32
|
alignItems: 'flex-start',
|
|
@@ -48,4 +51,4 @@ var BoxHeader = React.forwardRef(function (_a, ref) {
|
|
|
48
51
|
});
|
|
49
52
|
BoxHeader.displayName = ComponentName.BoxHeader;
|
|
50
53
|
export default BoxHeader;
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
54
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQm94SGVhZGVyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvYm94L2hlYWRlci9Cb3hIZWFkZXIubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDbEMsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBRWpELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sdUJBQXVCLENBQUE7QUFFbEQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsVUFBQyxFQUF3QyxFQUFFLEdBQUc7SUFBM0MsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQXRDLGlDQUF3QyxDQUFGO0lBQ3JDLElBQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUMvQyxJQUFNLFNBQVMsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUNyRixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBQ2hELElBQUEsT0FBTyxHQUFLLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLFFBQWpDLENBQWlDO0lBRWhELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQztRQUN4QixTQUFTLEVBQUU7WUFDVCxLQUFLLEVBQUUsTUFBTTtZQUNiLGVBQWUsRUFBRSxTQUFTO1lBQzFCLE9BQU8sRUFBRSxFQUFFO1lBQ1gsV0FBVyxFQUFFLGVBQWUsQ0FBQyxPQUFPLGFBQVAsT0FBTyxjQUFQLE9BQU8sR0FBSSxJQUFJLENBQUM7WUFDN0MsU0FBUyxFQUFFLENBQUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDMUUsY0FBYyxFQUFFLGVBQWU7WUFDL0IsVUFBVSxFQUFFLFlBQVk7WUFDeEIsYUFBYSxFQUFFLEtBQUs7U0FDckI7UUFDRCxJQUFJLEVBQUU7WUFDSixLQUFLLEVBQUUsU0FBUztZQUNoQixRQUFRLEVBQUUsRUFBRTtZQUNaLFVBQVUsRUFBRSxLQUFLO1NBQ2xCO1FBQ0QsYUFBYSxFQUFFO1lBQ2IsU0FBUyxFQUFFLFFBQVE7U0FDcEI7UUFDRCxJQUFJLEVBQUU7WUFDSixRQUFRLEVBQUUsRUFBRTtZQUNaLEtBQUssRUFBRSxTQUFTO1lBQ2hCLFVBQVUsRUFBRSxLQUFLO1lBQ2pCLFVBQVUsRUFBRSxFQUFFO1NBQ2Y7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxNQUFNLElBQU0sTUFBTSxHQUNsRSxRQUFRLElBQUksT0FBTyxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUNwRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFRLENBQ3BELENBQUMsQ0FBQyxDQUFDLENBQ0YsUUFBUSxDQUNULENBQ0ksQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==
|
|
@@ -7,7 +7,7 @@ import { ContainerProps } from '../../components/container/ContainerProps';
|
|
|
7
7
|
* @param id {string} Custom id attribute
|
|
8
8
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
9
9
|
* @param className {string} Additional CSS Classes
|
|
10
|
-
* @param medium {boolean}
|
|
10
|
+
* @param medium {boolean} Deprecated: use size="small" instead (same 960px max-width)
|
|
11
11
|
* @param size {ContainerSizes | `${ContainerSizes}`} Set container size
|
|
12
12
|
*/
|
|
13
13
|
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -12,7 +12,7 @@ import { is } from '../../services/classify';
|
|
|
12
12
|
* @param id {string} Custom id attribute
|
|
13
13
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
14
14
|
* @param className {string} Additional CSS Classes
|
|
15
|
-
* @param medium {boolean}
|
|
15
|
+
* @param medium {boolean} Deprecated: use size="small" instead (same 960px max-width)
|
|
16
16
|
* @param size {ContainerSizes | `${ContainerSizes}`} Set container size
|
|
17
17
|
*/
|
|
18
18
|
var Container = React.forwardRef(function (_a, ref) {
|
|
@@ -4,13 +4,14 @@ import { CommonProps } from '../../objects/facets/CommonProps';
|
|
|
4
4
|
import { View } from 'react-native';
|
|
5
5
|
export interface ContainerProps extends CommonProps, Dev {
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
+
/** @deprecated Use size="small" instead (same 960px max-width). */
|
|
7
8
|
medium?: boolean;
|
|
8
9
|
size?: ContainerSizes | `${ContainerSizes}`;
|
|
9
10
|
}
|
|
10
11
|
export type ContainerRef = HTMLDivElement;
|
|
11
12
|
export type ContainerNativeRef = View;
|
|
12
13
|
export declare enum ContainerSizes {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
SM = "sm",
|
|
15
|
+
MD = "md",
|
|
16
|
+
LG = "lg"
|
|
16
17
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export var ContainerSizes;
|
|
2
2
|
(function (ContainerSizes) {
|
|
3
|
-
ContainerSizes["
|
|
4
|
-
ContainerSizes["
|
|
5
|
-
ContainerSizes["
|
|
3
|
+
ContainerSizes["SM"] = "sm";
|
|
4
|
+
ContainerSizes["MD"] = "md";
|
|
5
|
+
ContainerSizes["LG"] = "lg";
|
|
6
6
|
})(ContainerSizes || (ContainerSizes = {}));
|
|
7
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
7
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udGFpbmVyUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbnRhaW5lci9Db250YWluZXJQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjQSxNQUFNLENBQU4sSUFBWSxjQUlYO0FBSkQsV0FBWSxjQUFjO0lBQ3hCLDJCQUFTLENBQUE7SUFDVCwyQkFBUyxDQUFBO0lBQ1QsMkJBQVMsQ0FBQTtBQUNYLENBQUMsRUFKVyxjQUFjLEtBQWQsY0FBYyxRQUl6QiJ9
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare enum Padding {
|
|
2
|
+
NONE = "none",
|
|
3
|
+
XXS = "xxs",
|
|
4
|
+
XS = "xs",
|
|
5
|
+
SM = "sm",
|
|
6
|
+
MD = "md",
|
|
7
|
+
LG = "lg",
|
|
8
|
+
XL = "xl",
|
|
9
|
+
XXL = "xxl",
|
|
10
|
+
XXXL = "xxxl"
|
|
11
|
+
}
|
|
12
|
+
export declare const getPaddingStyle: (padding: Padding | `${Padding}`) => 0 | 16 | 4 | 8 | 12 | 24 | 32 | 48 | 64;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export var Padding;
|
|
2
|
+
(function (Padding) {
|
|
3
|
+
Padding["NONE"] = "none";
|
|
4
|
+
Padding["XXS"] = "xxs";
|
|
5
|
+
Padding["XS"] = "xs";
|
|
6
|
+
Padding["SM"] = "sm";
|
|
7
|
+
Padding["MD"] = "md";
|
|
8
|
+
Padding["LG"] = "lg";
|
|
9
|
+
Padding["XL"] = "xl";
|
|
10
|
+
Padding["XXL"] = "xxl";
|
|
11
|
+
Padding["XXXL"] = "xxxl";
|
|
12
|
+
})(Padding || (Padding = {}));
|
|
13
|
+
export var getPaddingStyle = function (padding) {
|
|
14
|
+
switch (padding) {
|
|
15
|
+
case Padding.NONE:
|
|
16
|
+
return 0;
|
|
17
|
+
case Padding.XXS:
|
|
18
|
+
return 4;
|
|
19
|
+
case Padding.XS:
|
|
20
|
+
return 8;
|
|
21
|
+
case Padding.SM:
|
|
22
|
+
return 12;
|
|
23
|
+
case Padding.MD:
|
|
24
|
+
return 16;
|
|
25
|
+
case Padding.LG:
|
|
26
|
+
return 24;
|
|
27
|
+
case Padding.XL:
|
|
28
|
+
return 32;
|
|
29
|
+
case Padding.XXL:
|
|
30
|
+
return 48;
|
|
31
|
+
case Padding.XXXL:
|
|
32
|
+
return 64;
|
|
33
|
+
default:
|
|
34
|
+
return 16;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFkZGluZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL29iamVjdHMvZmFjZXRzL1BhZGRpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksT0FVWDtBQVZELFdBQVksT0FBTztJQUNqQix3QkFBYSxDQUFBO0lBQ2Isc0JBQVcsQ0FBQTtJQUNYLG9CQUFTLENBQUE7SUFDVCxvQkFBUyxDQUFBO0lBQ1Qsb0JBQVMsQ0FBQTtJQUNULG9CQUFTLENBQUE7SUFDVCxvQkFBUyxDQUFBO0lBQ1Qsc0JBQVcsQ0FBQTtJQUNYLHdCQUFhLENBQUE7QUFDZixDQUFDLEVBVlcsT0FBTyxLQUFQLE9BQU8sUUFVbEI7QUFFRCxNQUFNLENBQUMsSUFBTSxlQUFlLEdBQUcsVUFBQyxPQUErQjtJQUM3RCxRQUFRLE9BQU8sRUFBRTtRQUNmLEtBQUssT0FBTyxDQUFDLElBQUk7WUFDZixPQUFPLENBQUMsQ0FBQTtRQUNWLEtBQUssT0FBTyxDQUFDLEdBQUc7WUFDZCxPQUFPLENBQUMsQ0FBQTtRQUNWLEtBQUssT0FBTyxDQUFDLEVBQUU7WUFDYixPQUFPLENBQUMsQ0FBQTtRQUNWLEtBQUssT0FBTyxDQUFDLEVBQUU7WUFDYixPQUFPLEVBQUUsQ0FBQTtRQUNYLEtBQUssT0FBTyxDQUFDLEVBQUU7WUFDYixPQUFPLEVBQUUsQ0FBQTtRQUNYLEtBQUssT0FBTyxDQUFDLEVBQUU7WUFDYixPQUFPLEVBQUUsQ0FBQTtRQUNYLEtBQUssT0FBTyxDQUFDLEVBQUU7WUFDYixPQUFPLEVBQUUsQ0FBQTtRQUNYLEtBQUssT0FBTyxDQUFDLEdBQUc7WUFDZCxPQUFPLEVBQUUsQ0FBQTtRQUNYLEtBQUssT0FBTyxDQUFDLElBQUk7WUFDZixPQUFPLEVBQUUsQ0FBQTtRQUNYO1lBQ0UsT0FBTyxFQUFFLENBQUE7S0FDWjtBQUNILENBQUMsQ0FBQSJ9
|
package/lib/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.20.0-beta.
|
|
1
|
+
export declare const version = "4.20.0-beta.3";
|
package/lib/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var version = "4.20.0-beta.
|
|
1
|
+
export var version = "4.20.0-beta.3";
|
|
2
2
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLElBQU0sT0FBTyxHQUFHLGVBQWUsQ0FBQSJ9
|