@easypost/easy-ui 1.0.0-alpha.4 → 1.0.0-alpha.5
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/Badge/index.js +32 -26
- package/Badge/index.mjs +32 -26
- package/Banner/index.js +15 -16
- package/Banner/index.mjs +15 -16
- package/Button/index.js +33 -68
- package/Button/index.mjs +33 -68
- package/CHANGELOG.md +13 -0
- package/Card/index.js +1 -1
- package/Card/index.mjs +1 -1
- package/Checkbox/index.js +84 -72
- package/Checkbox/index.mjs +84 -72
- package/CodeBlock/index.js +42 -48
- package/CodeBlock/index.mjs +42 -48
- package/DropdownButton/index.js +29 -101
- package/DropdownButton/index.mjs +29 -85
- package/HorizontalGrid/index.js +11 -31
- package/HorizontalGrid/index.mjs +11 -31
- package/HorizontalStack/index.js +1 -1
- package/HorizontalStack/index.mjs +1 -1
- package/Icon/index.js +1 -1
- package/Icon/index.mjs +1 -1
- package/IconButton/index.js +25 -42
- package/IconButton/index.mjs +25 -42
- package/InputField/Label.d.ts +2 -2
- package/InputField/index.js +8 -7
- package/InputField/index.mjs +8 -7
- package/InputField/utilities.d.ts +1 -1
- package/InputField/utilities.d.ts.map +1 -1
- package/Menu/MenuOverlay.d.ts.map +1 -1
- package/Menu/index.js +135 -1957
- package/Menu/index.mjs +127 -1949
- package/Menu/utilities.d.ts +11 -0
- package/Menu/utilities.d.ts.map +1 -0
- package/Notification/index.js +7 -7
- package/Notification/index.mjs +7 -7
- package/Provider/index.js +15 -15
- package/Provider/index.mjs +15 -15
- package/RadioGroup/index.js +63 -63
- package/RadioGroup/index.mjs +63 -63
- package/Select/Select.d.ts +88 -0
- package/Select/Select.d.ts.map +1 -0
- package/Select/Select.stories.d.ts +17 -0
- package/Select/Select.stories.d.ts.map +1 -0
- package/Select/Select.test.d.ts +2 -0
- package/Select/Select.test.d.ts.map +1 -0
- package/Select/SelectContext.d.ts +14 -0
- package/Select/SelectContext.d.ts.map +1 -0
- package/Select/SelectField.d.ts +62 -0
- package/Select/SelectField.d.ts.map +1 -0
- package/Select/SelectOption.d.ts +23 -0
- package/Select/SelectOption.d.ts.map +1 -0
- package/Select/SelectOverlay.d.ts +3 -0
- package/Select/SelectOverlay.d.ts.map +1 -0
- package/Select/SelectSection.d.ts +22 -0
- package/Select/SelectSection.d.ts.map +1 -0
- package/Select/SelectTrigger.d.ts +30 -0
- package/Select/SelectTrigger.d.ts.map +1 -0
- package/Select/index.d.ts +2 -0
- package/Select/index.d.ts.map +1 -0
- package/Select/index.js +774 -0
- package/Select/index.mjs +774 -0
- package/SelectorErrorTooltip/index.js +9 -9
- package/SelectorErrorTooltip/index.mjs +9 -9
- package/Text/index.js +1 -1
- package/Text/index.mjs +1 -1
- package/TextField/index.js +19 -38
- package/TextField/index.mjs +19 -38
- package/Textarea/index.js +20 -37
- package/Textarea/index.mjs +20 -37
- package/Theme/index.js +1 -1
- package/Theme/index.mjs +1 -1
- package/Toggle/index.js +51 -50
- package/Toggle/index.mjs +51 -50
- package/Tooltip/index.js +7 -7
- package/Tooltip/index.mjs +7 -7
- package/UnstyledButton/index.js +3 -3
- package/UnstyledButton/index.mjs +3 -3
- package/VerticalStack/index.js +13 -47
- package/VerticalStack/index.mjs +13 -47
- package/__chunks__/{Card-dac53c75.js → Card-2bd533c4.js} +24 -48
- package/__chunks__/{Card-7bbd41e0.mjs → Card-4ad318ba.mjs} +24 -48
- package/__chunks__/ExpandMore400-7c5263a4.mjs +49 -0
- package/__chunks__/ExpandMore400-92646971.js +65 -0
- package/__chunks__/{HorizontalStack-a441c63f.mjs → HorizontalStack-65adb570.mjs} +10 -40
- package/__chunks__/{HorizontalStack-a862839b.js → HorizontalStack-f331bfc7.js} +10 -40
- package/__chunks__/{Icon-3d00481a.js → Icon-1a25dcae.js} +13 -18
- package/__chunks__/{Icon-a75b5201.mjs → Icon-6eb724b4.mjs} +13 -18
- package/__chunks__/InputField-cc829736.mjs +268 -0
- package/__chunks__/InputField-f5072e37.js +283 -0
- package/__chunks__/InputIcon-4a8e5243.mjs +148 -0
- package/__chunks__/InputIcon-70dad3e5.js +147 -0
- package/__chunks__/{Notification-b8eafec6.mjs → Notification-8d749bd1.mjs} +215 -138
- package/__chunks__/{Notification-c5b34eb3.js → Notification-b7a2c277.js} +219 -142
- package/__chunks__/{SelectorErrorTooltip-b6204987.mjs → SelectorErrorTooltip-4d820c45.mjs} +28 -14
- package/__chunks__/{SelectorErrorTooltip-43c5e29e.js → SelectorErrorTooltip-b7bb5b9d.js} +28 -14
- package/__chunks__/Text-2efbe1fe.js +86 -0
- package/__chunks__/Text-ec2b8d8a.mjs +87 -0
- package/__chunks__/{Theme-4e498252.mjs → Theme-123ba2c3.mjs} +51 -36
- package/__chunks__/{Theme-751e5575.js → Theme-57f8311c.js} +51 -36
- package/__chunks__/{Tooltip-f7e67b21.mjs → Tooltip-b4e23b78.mjs} +34 -53
- package/__chunks__/{Tooltip-bd55165e.js → Tooltip-c5076ca7.js} +34 -53
- package/__chunks__/{UnstyledButton-96172ec0.js → UnstyledButton-5bbb3c5e.js} +17 -42
- package/__chunks__/{UnstyledButton-883f0c6c.mjs → UnstyledButton-981cd9af.mjs} +17 -42
- package/__chunks__/{import-01299af6.js → import-24a482e1.js} +3 -2
- package/__chunks__/{import-856e0385.mjs → import-29edaaea.mjs} +41 -28
- package/__chunks__/{import-86330a7c.mjs → import-6a831ca1.mjs} +16 -15
- package/__chunks__/{import-3ab42f86.js → import-87c465c9.js} +35 -22
- package/__chunks__/{import-0d1b4d93.js → import-9581a2dc.js} +151 -141
- package/__chunks__/{import-e7f45c7e.mjs → import-9c958e32.mjs} +3 -3
- package/__chunks__/{import-63bf0645.js → import-a1e0f814.js} +47 -9
- package/__chunks__/{import-ab878fb6.mjs → import-a6cadfe8.mjs} +161 -151
- package/__chunks__/{import-baa3cd0c.mjs → import-d2e79ac1.mjs} +4 -3
- package/__chunks__/{import-7545401a.js → import-d52cd5cf.js} +3 -3
- package/__chunks__/{import-76076ca6.js → import-dea5a24d.js} +15 -14
- package/__chunks__/{import-b7971a11.mjs → import-fbe7cc7e.mjs} +69 -31
- package/__chunks__/{real-module-e4cd2301.mjs → real-module-2f165429.mjs} +4 -4
- package/__chunks__/{real-module-ae2a4342.js → real-module-e36b1436.js} +1 -1
- package/__chunks__/useTriggerWidth-29becc21.mjs +1989 -0
- package/__chunks__/useTriggerWidth-9528009c.js +1988 -0
- package/package.json +9 -9
- package/style.css +583 -357
- package/utilities/css.js +14 -58
- package/utilities/css.mjs +14 -58
- package/__chunks__/InputField-4fbaae06.js +0 -487
- package/__chunks__/InputField-a272f602.mjs +0 -472
- package/__chunks__/Text-1ae70c19.js +0 -102
- package/__chunks__/Text-4ae50d5c.mjs +0 -103
package/Badge/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const Icon = require("../__chunks__/Icon-
|
|
5
|
-
const Text = require("../__chunks__/Text-
|
|
4
|
+
const Icon = require("../__chunks__/Icon-1a25dcae.js");
|
|
5
|
+
const Text = require("../__chunks__/Text-2efbe1fe.js");
|
|
6
6
|
const utilities_css = require("../utilities/css.js");
|
|
7
|
-
const root = "
|
|
8
|
-
const primary = "
|
|
9
|
-
const secondary = "
|
|
10
|
-
const text = "
|
|
11
|
-
const variantPrimary = "
|
|
12
|
-
const variantSecondary = "
|
|
13
|
-
const variantBlack = "
|
|
14
|
-
const variantInverse = "
|
|
15
|
-
const variantGray = "
|
|
16
|
-
const variantSuccess = "
|
|
17
|
-
const variantWarning = "
|
|
18
|
-
const variantDanger = "
|
|
7
|
+
const root = "_root_1s481_5";
|
|
8
|
+
const primary = "_primary_1s481_16";
|
|
9
|
+
const secondary = "_secondary_1s481_17";
|
|
10
|
+
const text = "_text_1s481_32";
|
|
11
|
+
const variantPrimary = "_variantPrimary_1s481_37";
|
|
12
|
+
const variantSecondary = "_variantSecondary_1s481_44";
|
|
13
|
+
const variantBlack = "_variantBlack_1s481_51";
|
|
14
|
+
const variantInverse = "_variantInverse_1s481_58";
|
|
15
|
+
const variantGray = "_variantGray_1s481_65";
|
|
16
|
+
const variantSuccess = "_variantSuccess_1s481_72";
|
|
17
|
+
const variantWarning = "_variantWarning_1s481_79";
|
|
18
|
+
const variantDanger = "_variantDanger_1s481_86";
|
|
19
19
|
const styles = {
|
|
20
20
|
root,
|
|
21
21
|
primary,
|
|
@@ -32,17 +32,8 @@ const styles = {
|
|
|
32
32
|
};
|
|
33
33
|
const DEFAULT_VARIANT = "primary";
|
|
34
34
|
function Badge(props) {
|
|
35
|
-
const {
|
|
36
|
-
|
|
37
|
-
children,
|
|
38
|
-
secondaryLabel,
|
|
39
|
-
icon,
|
|
40
|
-
variant = DEFAULT_VARIANT
|
|
41
|
-
} = props;
|
|
42
|
-
const className = utilities_css.classNames(
|
|
43
|
-
styles.root,
|
|
44
|
-
styles[utilities_css.variationName("variant", variant)]
|
|
45
|
-
);
|
|
35
|
+
const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
|
|
36
|
+
const className = utilities_css.classNames(styles.root, styles[utilities_css.variationName("variant", variant)]);
|
|
46
37
|
if (!icon && !children) {
|
|
47
38
|
console.warn("Badge requires one of children or icon");
|
|
48
39
|
}
|
|
@@ -52,7 +43,22 @@ function Badge(props) {
|
|
|
52
43
|
if (icon && !children && !accessibilityLabel) {
|
|
53
44
|
console.warn("Badge with only icon must have accessibilityLabel");
|
|
54
45
|
}
|
|
55
|
-
return
|
|
46
|
+
return React.createElement("span", {
|
|
47
|
+
className
|
|
48
|
+
}, accessibilityLabel && React.createElement(Text.Text, {
|
|
49
|
+
visuallyHidden: true
|
|
50
|
+
}, accessibilityLabel), React.createElement("span", {
|
|
51
|
+
className: styles.primary
|
|
52
|
+
}, icon ? React.createElement(Icon.Icon, {
|
|
53
|
+
symbol: icon,
|
|
54
|
+
size: "sm"
|
|
55
|
+
}) : React.createElement("span", {
|
|
56
|
+
className: styles.text
|
|
57
|
+
}, children)), children && (icon || secondaryLabel) && React.createElement("span", {
|
|
58
|
+
className: styles.secondary
|
|
59
|
+
}, React.createElement("span", {
|
|
60
|
+
className: styles.text
|
|
61
|
+
}, icon ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, secondaryLabel))));
|
|
56
62
|
}
|
|
57
63
|
exports.Badge = Badge;
|
|
58
64
|
exports.DEFAULT_VARIANT = DEFAULT_VARIANT;
|
package/Badge/index.mjs
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import React__default from "react";
|
|
2
|
-
import { I as Icon } from "../__chunks__/Icon-
|
|
3
|
-
import { T as Text } from "../__chunks__/Text-
|
|
2
|
+
import { I as Icon } from "../__chunks__/Icon-6eb724b4.mjs";
|
|
3
|
+
import { T as Text } from "../__chunks__/Text-ec2b8d8a.mjs";
|
|
4
4
|
import { classNames, variationName } from "../utilities/css.mjs";
|
|
5
|
-
const root = "
|
|
6
|
-
const primary = "
|
|
7
|
-
const secondary = "
|
|
8
|
-
const text = "
|
|
9
|
-
const variantPrimary = "
|
|
10
|
-
const variantSecondary = "
|
|
11
|
-
const variantBlack = "
|
|
12
|
-
const variantInverse = "
|
|
13
|
-
const variantGray = "
|
|
14
|
-
const variantSuccess = "
|
|
15
|
-
const variantWarning = "
|
|
16
|
-
const variantDanger = "
|
|
5
|
+
const root = "_root_1s481_5";
|
|
6
|
+
const primary = "_primary_1s481_16";
|
|
7
|
+
const secondary = "_secondary_1s481_17";
|
|
8
|
+
const text = "_text_1s481_32";
|
|
9
|
+
const variantPrimary = "_variantPrimary_1s481_37";
|
|
10
|
+
const variantSecondary = "_variantSecondary_1s481_44";
|
|
11
|
+
const variantBlack = "_variantBlack_1s481_51";
|
|
12
|
+
const variantInverse = "_variantInverse_1s481_58";
|
|
13
|
+
const variantGray = "_variantGray_1s481_65";
|
|
14
|
+
const variantSuccess = "_variantSuccess_1s481_72";
|
|
15
|
+
const variantWarning = "_variantWarning_1s481_79";
|
|
16
|
+
const variantDanger = "_variantDanger_1s481_86";
|
|
17
17
|
const styles = {
|
|
18
18
|
root,
|
|
19
19
|
primary,
|
|
@@ -30,17 +30,8 @@ const styles = {
|
|
|
30
30
|
};
|
|
31
31
|
const DEFAULT_VARIANT = "primary";
|
|
32
32
|
function Badge(props) {
|
|
33
|
-
const {
|
|
34
|
-
|
|
35
|
-
children,
|
|
36
|
-
secondaryLabel,
|
|
37
|
-
icon,
|
|
38
|
-
variant = DEFAULT_VARIANT
|
|
39
|
-
} = props;
|
|
40
|
-
const className = classNames(
|
|
41
|
-
styles.root,
|
|
42
|
-
styles[variationName("variant", variant)]
|
|
43
|
-
);
|
|
33
|
+
const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
|
|
34
|
+
const className = classNames(styles.root, styles[variationName("variant", variant)]);
|
|
44
35
|
if (!icon && !children) {
|
|
45
36
|
console.warn("Badge requires one of children or icon");
|
|
46
37
|
}
|
|
@@ -50,7 +41,22 @@ function Badge(props) {
|
|
|
50
41
|
if (icon && !children && !accessibilityLabel) {
|
|
51
42
|
console.warn("Badge with only icon must have accessibilityLabel");
|
|
52
43
|
}
|
|
53
|
-
return
|
|
44
|
+
return React__default.createElement("span", {
|
|
45
|
+
className
|
|
46
|
+
}, accessibilityLabel && React__default.createElement(Text, {
|
|
47
|
+
visuallyHidden: true
|
|
48
|
+
}, accessibilityLabel), React__default.createElement("span", {
|
|
49
|
+
className: styles.primary
|
|
50
|
+
}, icon ? React__default.createElement(Icon, {
|
|
51
|
+
symbol: icon,
|
|
52
|
+
size: "sm"
|
|
53
|
+
}) : React__default.createElement("span", {
|
|
54
|
+
className: styles.text
|
|
55
|
+
}, children)), children && (icon || secondaryLabel) && React__default.createElement("span", {
|
|
56
|
+
className: styles.secondary
|
|
57
|
+
}, React__default.createElement("span", {
|
|
58
|
+
className: styles.text
|
|
59
|
+
}, icon ? React__default.createElement(React__default.Fragment, null, children) : React__default.createElement(React__default.Fragment, null, secondaryLabel))));
|
|
54
60
|
}
|
|
55
61
|
export {
|
|
56
62
|
Badge,
|
package/Banner/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const Text = require("../__chunks__/Text-
|
|
4
|
+
const Text = require("../__chunks__/Text-2efbe1fe.js");
|
|
5
5
|
const utilities_css = require("../utilities/css.js");
|
|
6
|
-
const colorSuccess = "
|
|
7
|
-
const colorPrimary = "
|
|
8
|
-
const colorNeutral = "
|
|
9
|
-
const Banner$1 = "
|
|
6
|
+
const colorSuccess = "_colorSuccess_drlk7_5";
|
|
7
|
+
const colorPrimary = "_colorPrimary_drlk7_10";
|
|
8
|
+
const colorNeutral = "_colorNeutral_drlk7_11";
|
|
9
|
+
const Banner$1 = "_Banner_drlk7_23";
|
|
10
10
|
const styles = {
|
|
11
11
|
colorSuccess,
|
|
12
12
|
colorPrimary,
|
|
@@ -15,16 +15,15 @@ const styles = {
|
|
|
15
15
|
};
|
|
16
16
|
function Banner(props) {
|
|
17
17
|
const { color = "success", emphasisText, children } = props;
|
|
18
|
-
return
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
);
|
|
18
|
+
return React.createElement("div", {
|
|
19
|
+
className: utilities_css.classNames(styles.Banner, styles[utilities_css.variationName("color", color)])
|
|
20
|
+
}, emphasisText && React.createElement(Text.Text, {
|
|
21
|
+
as: "strong",
|
|
22
|
+
variant: "subtitle1",
|
|
23
|
+
alignment: "center"
|
|
24
|
+
}, !children ? React.createElement(React.Fragment, null, emphasisText) : React.createElement(React.Fragment, null, emphasisText, ": ")), children && React.createElement(Text.Text, {
|
|
25
|
+
variant: "body1",
|
|
26
|
+
alignment: "center"
|
|
27
|
+
}, children));
|
|
29
28
|
}
|
|
30
29
|
exports.Banner = Banner;
|
package/Banner/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React__default from "react";
|
|
2
|
-
import { T as Text } from "../__chunks__/Text-
|
|
2
|
+
import { T as Text } from "../__chunks__/Text-ec2b8d8a.mjs";
|
|
3
3
|
import { classNames, variationName } from "../utilities/css.mjs";
|
|
4
|
-
const colorSuccess = "
|
|
5
|
-
const colorPrimary = "
|
|
6
|
-
const colorNeutral = "
|
|
7
|
-
const Banner$1 = "
|
|
4
|
+
const colorSuccess = "_colorSuccess_drlk7_5";
|
|
5
|
+
const colorPrimary = "_colorPrimary_drlk7_10";
|
|
6
|
+
const colorNeutral = "_colorNeutral_drlk7_11";
|
|
7
|
+
const Banner$1 = "_Banner_drlk7_23";
|
|
8
8
|
const styles = {
|
|
9
9
|
colorSuccess,
|
|
10
10
|
colorPrimary,
|
|
@@ -13,17 +13,16 @@ const styles = {
|
|
|
13
13
|
};
|
|
14
14
|
function Banner(props) {
|
|
15
15
|
const { color = "success", emphasisText, children } = props;
|
|
16
|
-
return
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
);
|
|
16
|
+
return React__default.createElement("div", {
|
|
17
|
+
className: classNames(styles.Banner, styles[variationName("color", color)])
|
|
18
|
+
}, emphasisText && React__default.createElement(Text, {
|
|
19
|
+
as: "strong",
|
|
20
|
+
variant: "subtitle1",
|
|
21
|
+
alignment: "center"
|
|
22
|
+
}, !children ? React__default.createElement(React__default.Fragment, null, emphasisText) : React__default.createElement(React__default.Fragment, null, emphasisText, ": ")), children && React__default.createElement(Text, {
|
|
23
|
+
variant: "body1",
|
|
24
|
+
alignment: "center"
|
|
25
|
+
}, children));
|
|
27
26
|
}
|
|
28
27
|
export {
|
|
29
28
|
Banner
|
package/Button/index.js
CHANGED
|
@@ -29,28 +29,28 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
};
|
|
30
30
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
31
31
|
const React = require("react");
|
|
32
|
-
const UnstyledButton = require("../__chunks__/UnstyledButton-
|
|
33
|
-
const Icon = require("../__chunks__/Icon-
|
|
32
|
+
const UnstyledButton = require("../__chunks__/UnstyledButton-5bbb3c5e.js");
|
|
33
|
+
const Icon = require("../__chunks__/Icon-1a25dcae.js");
|
|
34
34
|
const utilities_css = require("../utilities/css.js");
|
|
35
|
-
require("../__chunks__/import-
|
|
35
|
+
require("../__chunks__/import-a1e0f814.js");
|
|
36
36
|
require("../__chunks__/omit-fca26542.js");
|
|
37
|
-
require("../__chunks__/import-
|
|
38
|
-
const Button$1 = "
|
|
39
|
-
const colorPrimary = "
|
|
40
|
-
const colorSecondary = "
|
|
41
|
-
const colorSuccess = "
|
|
42
|
-
const colorWarning = "
|
|
43
|
-
const colorNeutral = "
|
|
44
|
-
const colorSupport = "
|
|
45
|
-
const colorInverse = "
|
|
46
|
-
const variantFilled = "
|
|
47
|
-
const variantOutlined = "
|
|
48
|
-
const variantLink = "
|
|
49
|
-
const sizeMd = "
|
|
50
|
-
const sizeSm = "
|
|
51
|
-
const block = "
|
|
52
|
-
const iconAtStart = "
|
|
53
|
-
const iconAtEnd = "
|
|
37
|
+
require("../__chunks__/import-9581a2dc.js");
|
|
38
|
+
const Button$1 = "_Button_1nmzk_5";
|
|
39
|
+
const colorPrimary = "_colorPrimary_1nmzk_20";
|
|
40
|
+
const colorSecondary = "_colorSecondary_1nmzk_28";
|
|
41
|
+
const colorSuccess = "_colorSuccess_1nmzk_36";
|
|
42
|
+
const colorWarning = "_colorWarning_1nmzk_44";
|
|
43
|
+
const colorNeutral = "_colorNeutral_1nmzk_52";
|
|
44
|
+
const colorSupport = "_colorSupport_1nmzk_60";
|
|
45
|
+
const colorInverse = "_colorInverse_1nmzk_66";
|
|
46
|
+
const variantFilled = "_variantFilled_1nmzk_72";
|
|
47
|
+
const variantOutlined = "_variantOutlined_1nmzk_99";
|
|
48
|
+
const variantLink = "_variantLink_1nmzk_127";
|
|
49
|
+
const sizeMd = "_sizeMd_1nmzk_153";
|
|
50
|
+
const sizeSm = "_sizeSm_1nmzk_161";
|
|
51
|
+
const block = "_block_1nmzk_180";
|
|
52
|
+
const iconAtStart = "_iconAtStart_1nmzk_185";
|
|
53
|
+
const iconAtEnd = "_iconAtEnd_1nmzk_189";
|
|
54
54
|
const styles = {
|
|
55
55
|
Button: Button$1,
|
|
56
56
|
colorPrimary,
|
|
@@ -70,60 +70,25 @@ const styles = {
|
|
|
70
70
|
iconAtEnd
|
|
71
71
|
};
|
|
72
72
|
const Button = React.forwardRef((props, inRef) => {
|
|
73
|
-
const _a = props, {
|
|
74
|
-
color = "primary",
|
|
75
|
-
variant = "filled",
|
|
76
|
-
size = "md",
|
|
77
|
-
isDisabled = false,
|
|
78
|
-
isBlock = false,
|
|
79
|
-
iconAtStart: iconAtStart2,
|
|
80
|
-
iconAtEnd: iconAtEnd2,
|
|
81
|
-
children = "Button",
|
|
82
|
-
href = ""
|
|
83
|
-
} = _a, restProps = __objRest(_a, [
|
|
84
|
-
"color",
|
|
85
|
-
"variant",
|
|
86
|
-
"size",
|
|
87
|
-
"isDisabled",
|
|
88
|
-
"isBlock",
|
|
89
|
-
"iconAtStart",
|
|
90
|
-
"iconAtEnd",
|
|
91
|
-
"children",
|
|
92
|
-
"href"
|
|
93
|
-
]);
|
|
73
|
+
const _a = props, { color = "primary", variant = "filled", size = "md", isDisabled = false, isBlock = false, iconAtStart: iconAtStart2, iconAtEnd: iconAtEnd2, children = "Button", href = "" } = _a, restProps = __objRest(_a, ["color", "variant", "size", "isDisabled", "isBlock", "iconAtStart", "iconAtEnd", "children", "href"]);
|
|
94
74
|
const bothIconPropsDefined = iconAtEnd2 && iconAtStart2;
|
|
95
75
|
if (bothIconPropsDefined) {
|
|
96
76
|
console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
|
|
97
77
|
}
|
|
98
78
|
const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
|
|
99
79
|
UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
href
|
|
113
|
-
}, restProps),
|
|
114
|
-
iconAtStart2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtStart2 }),
|
|
115
|
-
/* @__PURE__ */ React.createElement(
|
|
116
|
-
"span",
|
|
117
|
-
{
|
|
118
|
-
className: utilities_css.classNames(
|
|
119
|
-
iconAtStart2 && canUseIcon && styles.iconAtStart,
|
|
120
|
-
iconAtEnd2 && canUseIcon && styles.iconAtEnd
|
|
121
|
-
)
|
|
122
|
-
},
|
|
123
|
-
children
|
|
124
|
-
),
|
|
125
|
-
iconAtEnd2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtEnd2 })
|
|
126
|
-
);
|
|
80
|
+
return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
|
|
81
|
+
isDisabled,
|
|
82
|
+
ref: inRef,
|
|
83
|
+
className: utilities_css.classNames(styles.Button, styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("size", size)], isBlock && styles.block),
|
|
84
|
+
href
|
|
85
|
+
}, restProps), iconAtStart2 && canUseIcon && React.createElement(Icon.Icon, {
|
|
86
|
+
symbol: iconAtStart2
|
|
87
|
+
}), React.createElement("span", {
|
|
88
|
+
className: utilities_css.classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
|
|
89
|
+
}, children), iconAtEnd2 && canUseIcon && React.createElement(Icon.Icon, {
|
|
90
|
+
symbol: iconAtEnd2
|
|
91
|
+
}));
|
|
127
92
|
});
|
|
128
93
|
Button.displayName = "Button";
|
|
129
94
|
exports.Button = Button;
|
package/Button/index.mjs
CHANGED
|
@@ -27,28 +27,28 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
import React__default, { forwardRef } from "react";
|
|
30
|
-
import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/UnstyledButton-
|
|
31
|
-
import { I as Icon } from "../__chunks__/Icon-
|
|
30
|
+
import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/UnstyledButton-981cd9af.mjs";
|
|
31
|
+
import { I as Icon } from "../__chunks__/Icon-6eb724b4.mjs";
|
|
32
32
|
import { classNames, variationName } from "../utilities/css.mjs";
|
|
33
|
-
import "../__chunks__/import-
|
|
33
|
+
import "../__chunks__/import-fbe7cc7e.mjs";
|
|
34
34
|
import "../__chunks__/omit-f17deb8f.mjs";
|
|
35
|
-
import "../__chunks__/import-
|
|
36
|
-
const Button$1 = "
|
|
37
|
-
const colorPrimary = "
|
|
38
|
-
const colorSecondary = "
|
|
39
|
-
const colorSuccess = "
|
|
40
|
-
const colorWarning = "
|
|
41
|
-
const colorNeutral = "
|
|
42
|
-
const colorSupport = "
|
|
43
|
-
const colorInverse = "
|
|
44
|
-
const variantFilled = "
|
|
45
|
-
const variantOutlined = "
|
|
46
|
-
const variantLink = "
|
|
47
|
-
const sizeMd = "
|
|
48
|
-
const sizeSm = "
|
|
49
|
-
const block = "
|
|
50
|
-
const iconAtStart = "
|
|
51
|
-
const iconAtEnd = "
|
|
35
|
+
import "../__chunks__/import-a6cadfe8.mjs";
|
|
36
|
+
const Button$1 = "_Button_1nmzk_5";
|
|
37
|
+
const colorPrimary = "_colorPrimary_1nmzk_20";
|
|
38
|
+
const colorSecondary = "_colorSecondary_1nmzk_28";
|
|
39
|
+
const colorSuccess = "_colorSuccess_1nmzk_36";
|
|
40
|
+
const colorWarning = "_colorWarning_1nmzk_44";
|
|
41
|
+
const colorNeutral = "_colorNeutral_1nmzk_52";
|
|
42
|
+
const colorSupport = "_colorSupport_1nmzk_60";
|
|
43
|
+
const colorInverse = "_colorInverse_1nmzk_66";
|
|
44
|
+
const variantFilled = "_variantFilled_1nmzk_72";
|
|
45
|
+
const variantOutlined = "_variantOutlined_1nmzk_99";
|
|
46
|
+
const variantLink = "_variantLink_1nmzk_127";
|
|
47
|
+
const sizeMd = "_sizeMd_1nmzk_153";
|
|
48
|
+
const sizeSm = "_sizeSm_1nmzk_161";
|
|
49
|
+
const block = "_block_1nmzk_180";
|
|
50
|
+
const iconAtStart = "_iconAtStart_1nmzk_185";
|
|
51
|
+
const iconAtEnd = "_iconAtEnd_1nmzk_189";
|
|
52
52
|
const styles = {
|
|
53
53
|
Button: Button$1,
|
|
54
54
|
colorPrimary,
|
|
@@ -68,60 +68,25 @@ const styles = {
|
|
|
68
68
|
iconAtEnd
|
|
69
69
|
};
|
|
70
70
|
const Button = forwardRef((props, inRef) => {
|
|
71
|
-
const _a = props, {
|
|
72
|
-
color = "primary",
|
|
73
|
-
variant = "filled",
|
|
74
|
-
size = "md",
|
|
75
|
-
isDisabled = false,
|
|
76
|
-
isBlock = false,
|
|
77
|
-
iconAtStart: iconAtStart2,
|
|
78
|
-
iconAtEnd: iconAtEnd2,
|
|
79
|
-
children = "Button",
|
|
80
|
-
href = ""
|
|
81
|
-
} = _a, restProps = __objRest(_a, [
|
|
82
|
-
"color",
|
|
83
|
-
"variant",
|
|
84
|
-
"size",
|
|
85
|
-
"isDisabled",
|
|
86
|
-
"isBlock",
|
|
87
|
-
"iconAtStart",
|
|
88
|
-
"iconAtEnd",
|
|
89
|
-
"children",
|
|
90
|
-
"href"
|
|
91
|
-
]);
|
|
71
|
+
const _a = props, { color = "primary", variant = "filled", size = "md", isDisabled = false, isBlock = false, iconAtStart: iconAtStart2, iconAtEnd: iconAtEnd2, children = "Button", href = "" } = _a, restProps = __objRest(_a, ["color", "variant", "size", "isDisabled", "isBlock", "iconAtStart", "iconAtEnd", "children", "href"]);
|
|
92
72
|
const bothIconPropsDefined = iconAtEnd2 && iconAtStart2;
|
|
93
73
|
if (bothIconPropsDefined) {
|
|
94
74
|
console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
|
|
95
75
|
}
|
|
96
76
|
const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
|
|
97
77
|
logWarningIfInvalidColorVariantCombination(color, variant);
|
|
98
|
-
return
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
href
|
|
111
|
-
}, restProps),
|
|
112
|
-
iconAtStart2 && canUseIcon && /* @__PURE__ */ React__default.createElement(Icon, { symbol: iconAtStart2 }),
|
|
113
|
-
/* @__PURE__ */ React__default.createElement(
|
|
114
|
-
"span",
|
|
115
|
-
{
|
|
116
|
-
className: classNames(
|
|
117
|
-
iconAtStart2 && canUseIcon && styles.iconAtStart,
|
|
118
|
-
iconAtEnd2 && canUseIcon && styles.iconAtEnd
|
|
119
|
-
)
|
|
120
|
-
},
|
|
121
|
-
children
|
|
122
|
-
),
|
|
123
|
-
iconAtEnd2 && canUseIcon && /* @__PURE__ */ React__default.createElement(Icon, { symbol: iconAtEnd2 })
|
|
124
|
-
);
|
|
78
|
+
return React__default.createElement(UnstyledButton, __spreadValues({
|
|
79
|
+
isDisabled,
|
|
80
|
+
ref: inRef,
|
|
81
|
+
className: classNames(styles.Button, styles[variationName("color", color)], styles[variationName("variant", variant)], styles[variationName("size", size)], isBlock && styles.block),
|
|
82
|
+
href
|
|
83
|
+
}, restProps), iconAtStart2 && canUseIcon && React__default.createElement(Icon, {
|
|
84
|
+
symbol: iconAtStart2
|
|
85
|
+
}), React__default.createElement("span", {
|
|
86
|
+
className: classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
|
|
87
|
+
}, children), iconAtEnd2 && canUseIcon && React__default.createElement(Icon, {
|
|
88
|
+
symbol: iconAtEnd2
|
|
89
|
+
}));
|
|
125
90
|
});
|
|
126
91
|
Button.displayName = "Button";
|
|
127
92
|
export {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @easypost/easy-ui
|
|
2
2
|
|
|
3
|
+
## 1.0.0-alpha.5
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 1bdf32b: Add `Select` component
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 88673e3: Add layout primitive stories
|
|
12
|
+
- Updated dependencies [1bdf32b]
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
- @easypost/easy-ui-icons@1.0.0-alpha.5
|
|
15
|
+
|
|
3
16
|
## 1.0.0-alpha.4
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/Card/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const Card = require("../__chunks__/Card-
|
|
3
|
+
const Card = require("../__chunks__/Card-2bd533c4.js");
|
|
4
4
|
require("../__chunks__/omit-fca26542.js");
|
|
5
5
|
require("react");
|
|
6
6
|
require("../utilities/css.js");
|
package/Card/index.mjs
CHANGED