@instructure/ui-pill 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Pill/v1/index.js +39 -36
  3. package/es/Pill/v1/styles.js +3 -1
  4. package/es/Pill/v1/theme.js +21 -20
  5. package/es/Pill/v2/index.js +39 -36
  6. package/es/Pill/v2/styles.js +3 -1
  7. package/lib/Pill/v1/index.js +39 -36
  8. package/lib/Pill/v1/styles.js +3 -1
  9. package/lib/Pill/v1/theme.js +21 -20
  10. package/lib/Pill/v2/index.js +39 -36
  11. package/lib/Pill/v2/styles.js +3 -1
  12. package/package.json +16 -16
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
6
+ ## [11.7.3-snapshot-27](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-27) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-pill
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Pill/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
3
- var _dec, _class, _Pill;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -39,30 +37,27 @@ category: components
39
37
  ---
40
38
  **/
41
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
- let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Pill = class Pill extends Component {
40
+ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Pill extends Component {
41
+ static displayName = "Pill";
42
+ static componentId = 'Pill';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ color: 'primary'
46
+ };
47
+ ref = null;
48
+ ellipsisRef = null;
43
49
  constructor(props) {
44
50
  super(props);
45
- this.ref = null;
46
- this.ellipsisRef = null;
47
- this.handleRef = el => {
48
- const elementRef = this.props.elementRef;
49
- this.ref = el;
50
- if (typeof elementRef === 'function') {
51
- elementRef(el);
52
- }
53
- };
54
51
  this.state = {
55
52
  truncated: false
56
53
  };
57
54
  }
58
55
  componentDidMount() {
59
- var _this$props$makeStyle, _this$props;
60
56
  this.setTruncation();
61
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
57
+ this.props.makeStyles?.();
62
58
  }
63
59
  componentDidUpdate() {
64
- var _this$props$makeStyle2, _this$props2;
65
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ this.props.makeStyles?.();
66
61
  }
67
62
  setTruncation() {
68
63
  if (this.ellipsisRef) {
@@ -71,18 +66,28 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
71
66
  });
72
67
  }
73
68
  }
69
+ handleRef = el => {
70
+ const {
71
+ elementRef
72
+ } = this.props;
73
+ this.ref = el;
74
+ if (typeof elementRef === 'function') {
75
+ elementRef(el);
76
+ }
77
+ };
74
78
  renderPill(focused, getTriggerProps) {
75
- const _this$props3 = this.props,
76
- margin = _this$props3.margin,
77
- children = _this$props3.children,
78
- color = _this$props3.color,
79
- as = _this$props3.as,
80
- elementRef = _this$props3.elementRef,
81
- styles = _this$props3.styles,
82
- makeStyles = _this$props3.makeStyles,
83
- statusLabel = _this$props3.statusLabel,
84
- renderIcon = _this$props3.renderIcon,
85
- props = _objectWithoutProperties(_this$props3, _excluded);
79
+ const {
80
+ margin,
81
+ children,
82
+ color,
83
+ as,
84
+ elementRef,
85
+ styles,
86
+ makeStyles,
87
+ statusLabel,
88
+ renderIcon,
89
+ ...props
90
+ } = this.props;
86
91
  const filteredProps = passthroughProps(props);
87
92
  const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
88
93
  const refProp = this.state.truncated ? {} : {
@@ -94,7 +99,7 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
94
99
  ...refProp,
95
100
  margin: margin,
96
101
  padding: "0",
97
- maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
102
+ maxWidth: styles?.maxWidth,
98
103
  background: "transparent",
99
104
  borderRadius: "pill",
100
105
  borderWidth: "0",
@@ -104,17 +109,17 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
104
109
  focusColor: "info",
105
110
  "data-cid": "Pill",
106
111
  children: _jsxs("div", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.pill,
112
+ css: styles?.pill,
108
113
  children: [renderIcon && _jsx("div", {
109
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
114
+ css: styles?.icon,
110
115
  children: renderIcon
111
116
  }), _jsxs("div", {
112
- css: styles === null || styles === void 0 ? void 0 : styles.text,
117
+ css: styles?.text,
113
118
  ref: el => {
114
119
  this.ellipsisRef = el;
115
120
  },
116
121
  children: [statusLabel && _jsx("span", {
117
- css: styles === null || styles === void 0 ? void 0 : styles.status,
122
+ css: styles?.status,
118
123
  children: statusLabel && statusLabel.concat(':')
119
124
  }), children]
120
125
  })]
@@ -137,8 +142,6 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
137
142
  return this.renderPill();
138
143
  }
139
144
  }
140
- }, _Pill.displayName = "Pill", _Pill.componentId = 'Pill', _Pill.allowedProps = allowedProps, _Pill.defaultProps = {
141
- color: 'primary'
142
- }, _Pill)) || _class);
145
+ }) || _class);
143
146
  export default Pill;
144
147
  export { Pill };
package/es/Pill/v1/styles.js CHANGED
@@ -33,7 +33,9 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const color = props.color;
36
+ const {
37
+ color
38
+ } = props;
37
39
  const pillColorVariants = {
38
40
  primary: {
39
41
  color: componentTheme.primaryColor,
package/es/Pill/v1/theme.js CHANGED
@@ -28,34 +28,35 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
32
- const borders = theme.borders,
33
- colors = theme.colors,
34
- spacing = theme.spacing,
35
- typography = theme.typography,
36
- themeName = theme.key;
31
+ const {
32
+ borders,
33
+ colors,
34
+ spacing,
35
+ typography,
36
+ key: themeName
37
+ } = theme;
37
38
  const themeSpecificStyle = {
38
39
  instructure: {
39
40
  height: '1.5rem'
40
41
  }
41
42
  };
42
43
  const componentVariables = {
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
44
+ fontFamily: typography?.fontFamily,
45
+ padding: `0 ${spacing?.xSmall}`,
45
46
  height: '1.5rem',
46
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
47
- textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
48
- textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
49
- statusLabelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
47
+ background: colors?.contrasts?.white1010,
48
+ textFontSize: typography?.fontSizeSmall,
49
+ textFontWeight: typography?.fontWeightNormal,
50
+ statusLabelFontWeight: typography?.fontWeightBold,
50
51
  maxWidth: '15rem',
51
- primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey4570,
52
- infoColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
53
- dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red4570,
54
- successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.green4570,
55
- warningColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
56
- alertColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
57
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
58
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
52
+ primaryColor: colors?.contrasts?.grey4570,
53
+ infoColor: colors?.contrasts?.blue4570,
54
+ dangerColor: colors?.contrasts?.red4570,
55
+ successColor: colors?.contrasts?.green4570,
56
+ warningColor: colors?.contrasts?.orange4570,
57
+ alertColor: colors?.contrasts?.blue4570,
58
+ borderWidth: borders?.widthSmall,
59
+ borderStyle: borders?.style,
59
60
  borderRadius: '999rem'
60
61
  };
61
62
  return {
package/es/Pill/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
3
- var _dec, _class, _Pill;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -38,30 +36,27 @@ category: components
38
36
  ---
39
37
  **/
40
38
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let Pill = (_dec = withStyle(generateStyle), _dec(_class = (_Pill = class Pill extends Component {
39
+ let Pill = (_dec = withStyle(generateStyle), _dec(_class = class Pill extends Component {
40
+ static displayName = "Pill";
41
+ static componentId = 'Pill';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ color: 'primary'
45
+ };
46
+ ref = null;
47
+ ellipsisRef = null;
42
48
  constructor(props) {
43
49
  super(props);
44
- this.ref = null;
45
- this.ellipsisRef = null;
46
- this.handleRef = el => {
47
- const elementRef = this.props.elementRef;
48
- this.ref = el;
49
- if (typeof elementRef === 'function') {
50
- elementRef(el);
51
- }
52
- };
53
50
  this.state = {
54
51
  truncated: false
55
52
  };
56
53
  }
57
54
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props;
59
55
  this.setTruncation();
60
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
56
+ this.props.makeStyles?.();
61
57
  }
62
58
  componentDidUpdate() {
63
- var _this$props$makeStyle2, _this$props2;
64
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
59
+ this.props.makeStyles?.();
65
60
  }
66
61
  setTruncation() {
67
62
  if (this.ellipsisRef) {
@@ -70,18 +65,28 @@ let Pill = (_dec = withStyle(generateStyle), _dec(_class = (_Pill = class Pill e
70
65
  });
71
66
  }
72
67
  }
68
+ handleRef = el => {
69
+ const {
70
+ elementRef
71
+ } = this.props;
72
+ this.ref = el;
73
+ if (typeof elementRef === 'function') {
74
+ elementRef(el);
75
+ }
76
+ };
73
77
  renderPill(focused, getTriggerProps) {
74
- const _this$props3 = this.props,
75
- margin = _this$props3.margin,
76
- children = _this$props3.children,
77
- color = _this$props3.color,
78
- as = _this$props3.as,
79
- elementRef = _this$props3.elementRef,
80
- styles = _this$props3.styles,
81
- makeStyles = _this$props3.makeStyles,
82
- statusLabel = _this$props3.statusLabel,
83
- renderIcon = _this$props3.renderIcon,
84
- props = _objectWithoutProperties(_this$props3, _excluded);
78
+ const {
79
+ margin,
80
+ children,
81
+ color,
82
+ as,
83
+ elementRef,
84
+ styles,
85
+ makeStyles,
86
+ statusLabel,
87
+ renderIcon,
88
+ ...props
89
+ } = this.props;
85
90
  const filteredProps = passthroughProps(props);
86
91
  const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
87
92
  const refProp = this.state.truncated ? {} : {
@@ -93,7 +98,7 @@ let Pill = (_dec = withStyle(generateStyle), _dec(_class = (_Pill = class Pill e
93
98
  ...refProp,
94
99
  margin: margin,
95
100
  padding: "0",
96
- maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
101
+ maxWidth: styles?.maxWidth,
97
102
  background: "transparent",
98
103
  borderRadius: "pill",
99
104
  borderWidth: "0",
@@ -103,17 +108,17 @@ let Pill = (_dec = withStyle(generateStyle), _dec(_class = (_Pill = class Pill e
103
108
  focusColor: "info",
104
109
  "data-cid": "Pill",
105
110
  children: _jsxs("div", {
106
- css: styles === null || styles === void 0 ? void 0 : styles.pill,
111
+ css: styles?.pill,
107
112
  children: [renderIcon && _jsx("div", {
108
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
113
+ css: styles?.icon,
109
114
  children: renderIcon
110
115
  }), _jsxs("div", {
111
- css: styles === null || styles === void 0 ? void 0 : styles.text,
116
+ css: styles?.text,
112
117
  ref: el => {
113
118
  this.ellipsisRef = el;
114
119
  },
115
120
  children: [statusLabel && _jsx("span", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.status,
121
+ css: styles?.status,
117
122
  children: statusLabel && statusLabel.concat(':')
118
123
  }), children]
119
124
  })]
@@ -136,8 +141,6 @@ let Pill = (_dec = withStyle(generateStyle), _dec(_class = (_Pill = class Pill e
136
141
  return this.renderPill();
137
142
  }
138
143
  }
139
- }, _Pill.displayName = "Pill", _Pill.componentId = 'Pill', _Pill.allowedProps = allowedProps, _Pill.defaultProps = {
140
- color: 'primary'
141
- }, _Pill)) || _class);
144
+ }) || _class);
142
145
  export default Pill;
143
146
  export { Pill };
package/es/Pill/v2/styles.js CHANGED
@@ -32,7 +32,9 @@
32
32
  * @return {Object} The final style object, which will be used in the component
33
33
  */
34
34
  const generateStyle = (componentTheme, props) => {
35
- const color = props.color;
35
+ const {
36
+ color
37
+ } = props;
36
38
  const pillColorVariants = {
37
39
  primary: {
38
40
  color: componentTheme.baseTextColor,
package/lib/Pill/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Pill = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _v11_ = require("@instructure/ui-view/v11_6");
11
10
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -15,8 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
15
14
  var _theme = _interopRequireDefault(require("./theme"));
16
15
  var _props = require("./props");
17
16
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
- const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
19
- var _dec, _class, _Pill;
17
+ var _dec, _class;
20
18
  /*
21
19
  * The MIT License (MIT)
22
20
  *
@@ -45,30 +43,27 @@ var _dec, _class, _Pill;
45
43
  category: components
46
44
  ---
47
45
  **/
48
- let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Pill = class Pill extends _react.Component {
46
+ let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Pill extends _react.Component {
47
+ static displayName = "Pill";
48
+ static componentId = 'Pill';
49
+ static allowedProps = _props.allowedProps;
50
+ static defaultProps = {
51
+ color: 'primary'
52
+ };
53
+ ref = null;
54
+ ellipsisRef = null;
49
55
  constructor(props) {
50
56
  super(props);
51
- this.ref = null;
52
- this.ellipsisRef = null;
53
- this.handleRef = el => {
54
- const elementRef = this.props.elementRef;
55
- this.ref = el;
56
- if (typeof elementRef === 'function') {
57
- elementRef(el);
58
- }
59
- };
60
57
  this.state = {
61
58
  truncated: false
62
59
  };
63
60
  }
64
61
  componentDidMount() {
65
- var _this$props$makeStyle, _this$props;
66
62
  this.setTruncation();
67
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
+ this.props.makeStyles?.();
68
64
  }
69
65
  componentDidUpdate() {
70
- var _this$props$makeStyle2, _this$props2;
71
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
66
+ this.props.makeStyles?.();
72
67
  }
73
68
  setTruncation() {
74
69
  if (this.ellipsisRef) {
@@ -77,18 +72,28 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
77
72
  });
78
73
  }
79
74
  }
75
+ handleRef = el => {
76
+ const {
77
+ elementRef
78
+ } = this.props;
79
+ this.ref = el;
80
+ if (typeof elementRef === 'function') {
81
+ elementRef(el);
82
+ }
83
+ };
80
84
  renderPill(focused, getTriggerProps) {
81
- const _this$props3 = this.props,
82
- margin = _this$props3.margin,
83
- children = _this$props3.children,
84
- color = _this$props3.color,
85
- as = _this$props3.as,
86
- elementRef = _this$props3.elementRef,
87
- styles = _this$props3.styles,
88
- makeStyles = _this$props3.makeStyles,
89
- statusLabel = _this$props3.statusLabel,
90
- renderIcon = _this$props3.renderIcon,
91
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
85
+ const {
86
+ margin,
87
+ children,
88
+ color,
89
+ as,
90
+ elementRef,
91
+ styles,
92
+ makeStyles,
93
+ statusLabel,
94
+ renderIcon,
95
+ ...props
96
+ } = this.props;
92
97
  const filteredProps = (0, _passthroughProps.passthroughProps)(props);
93
98
  const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
94
99
  const refProp = this.state.truncated ? {} : {
@@ -100,7 +105,7 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
100
105
  ...refProp,
101
106
  margin: margin,
102
107
  padding: "0",
103
- maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
108
+ maxWidth: styles?.maxWidth,
104
109
  background: "transparent",
105
110
  borderRadius: "pill",
106
111
  borderWidth: "0",
@@ -110,17 +115,17 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
110
115
  focusColor: "info",
111
116
  "data-cid": "Pill",
112
117
  children: (0, _jsxRuntime.jsxs)("div", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.pill,
118
+ css: styles?.pill,
114
119
  children: [renderIcon && (0, _jsxRuntime.jsx)("div", {
115
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
120
+ css: styles?.icon,
116
121
  children: renderIcon
117
122
  }), (0, _jsxRuntime.jsxs)("div", {
118
- css: styles === null || styles === void 0 ? void 0 : styles.text,
123
+ css: styles?.text,
119
124
  ref: el => {
120
125
  this.ellipsisRef = el;
121
126
  },
122
127
  children: [statusLabel && (0, _jsxRuntime.jsx)("span", {
123
- css: styles === null || styles === void 0 ? void 0 : styles.status,
128
+ css: styles?.status,
124
129
  children: statusLabel && statusLabel.concat(':')
125
130
  }), children]
126
131
  })]
@@ -143,7 +148,5 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
143
148
  return this.renderPill();
144
149
  }
145
150
  }
146
- }, _Pill.displayName = "Pill", _Pill.componentId = 'Pill', _Pill.allowedProps = _props.allowedProps, _Pill.defaultProps = {
147
- color: 'primary'
148
- }, _Pill)) || _class);
151
+ }) || _class);
149
152
  var _default = exports.default = Pill;
package/lib/Pill/v1/styles.js CHANGED
@@ -39,7 +39,9 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const color = props.color;
42
+ const {
43
+ color
44
+ } = props;
43
45
  const pillColorVariants = {
44
46
  primary: {
45
47
  color: componentTheme.primaryColor,
package/lib/Pill/v1/theme.js CHANGED
@@ -34,34 +34,35 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
38
- const borders = theme.borders,
39
- colors = theme.colors,
40
- spacing = theme.spacing,
41
- typography = theme.typography,
42
- themeName = theme.key;
37
+ const {
38
+ borders,
39
+ colors,
40
+ spacing,
41
+ typography,
42
+ key: themeName
43
+ } = theme;
43
44
  const themeSpecificStyle = {
44
45
  instructure: {
45
46
  height: '1.5rem'
46
47
  }
47
48
  };
48
49
  const componentVariables = {
49
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
- padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
50
+ fontFamily: typography?.fontFamily,
51
+ padding: `0 ${spacing?.xSmall}`,
51
52
  height: '1.5rem',
52
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
53
- textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
54
- textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
55
- statusLabelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
53
+ background: colors?.contrasts?.white1010,
54
+ textFontSize: typography?.fontSizeSmall,
55
+ textFontWeight: typography?.fontWeightNormal,
56
+ statusLabelFontWeight: typography?.fontWeightBold,
56
57
  maxWidth: '15rem',
57
- primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey4570,
58
- infoColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
59
- dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red4570,
60
- successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.green4570,
61
- warningColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
62
- alertColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
63
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
64
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
58
+ primaryColor: colors?.contrasts?.grey4570,
59
+ infoColor: colors?.contrasts?.blue4570,
60
+ dangerColor: colors?.contrasts?.red4570,
61
+ successColor: colors?.contrasts?.green4570,
62
+ warningColor: colors?.contrasts?.orange4570,
63
+ alertColor: colors?.contrasts?.blue4570,
64
+ borderWidth: borders?.widthSmall,
65
+ borderStyle: borders?.style,
65
66
  borderRadius: '999rem'
66
67
  };
67
68
  return {