@instructure/ui-instructure 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (29) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/AiInformation/v1/index.js +13 -18
  3. package/es/AiInformation/v1/theme.js +16 -15
  4. package/es/AiInformation/v2/index.js +14 -19
  5. package/es/DataPermissionLevels/v1/index.js +10 -15
  6. package/es/DataPermissionLevels/v1/styles.js +13 -13
  7. package/es/DataPermissionLevels/v1/theme.js +18 -17
  8. package/es/DataPermissionLevels/v2/index.js +10 -15
  9. package/es/DataPermissionLevels/v2/styles.js +16 -16
  10. package/es/NutritionFacts/v1/index.js +6 -10
  11. package/es/NutritionFacts/v1/styles.js +9 -9
  12. package/es/NutritionFacts/v1/theme.js +13 -12
  13. package/es/NutritionFacts/v2/index.js +6 -10
  14. package/es/NutritionFacts/v2/styles.js +9 -9
  15. package/lib/AiInformation/v1/index.js +16 -21
  16. package/lib/AiInformation/v1/theme.js +16 -15
  17. package/lib/AiInformation/v2/index.js +16 -21
  18. package/lib/DataPermissionLevels/v1/index.js +10 -15
  19. package/lib/DataPermissionLevels/v1/styles.js +13 -13
  20. package/lib/DataPermissionLevels/v1/theme.js +18 -17
  21. package/lib/DataPermissionLevels/v2/index.js +10 -15
  22. package/lib/DataPermissionLevels/v2/styles.js +16 -16
  23. package/lib/NutritionFacts/v1/index.js +6 -10
  24. package/lib/NutritionFacts/v1/styles.js +9 -9
  25. package/lib/NutritionFacts/v1/theme.js +13 -12
  26. package/lib/NutritionFacts/v2/index.js +6 -10
  27. package/lib/NutritionFacts/v2/styles.js +9 -9
  28. package/package.json +17 -17
  29. package/tsconfig.build.tsbuildinfo +1 -1
package/es/NutritionFacts/v1/styles.js CHANGED
@@ -36,35 +36,35 @@ const generateStyle = (componentTheme, _props) => {
36
36
  segmentCard: {
37
37
  label: 'nutrition-facts__segment-card',
38
38
  borderStyle: 'solid',
39
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
40
- borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderColor,
41
- borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
42
- padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardPadding,
39
+ borderWidth: componentTheme?.cardBorderWidth,
40
+ borderColor: componentTheme?.cardBorderColor,
41
+ borderRadius: componentTheme?.cardBorderRadius,
42
+ padding: componentTheme?.cardPadding,
43
43
  display: 'flex',
44
44
  flexDirection: 'column'
45
45
  },
46
46
  segmentCardExplainerContainer: {
47
47
  label: 'nutrition-facts__segment-card-explainer-container',
48
- marginBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardExplainerContainerBottomMargin
48
+ marginBottom: componentTheme?.cardExplainerContainerBottomMargin
49
49
  },
50
50
  segmentContainer: {
51
51
  label: 'nutrition-facts__segment-container',
52
52
  display: 'flex',
53
53
  flexDirection: 'column',
54
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
54
+ gap: componentTheme?.cardGap
55
55
  },
56
56
  blockContainer: {
57
57
  label: 'nutrition-facts__block-container',
58
58
  display: 'flex',
59
59
  flexDirection: 'column',
60
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
60
+ gap: componentTheme?.cardGap
61
61
  },
62
62
  body: {
63
63
  label: 'nutrition-facts__body',
64
64
  display: 'flex',
65
65
  flexDirection: 'column',
66
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.blockGap,
67
- padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.bodyPadding,
66
+ gap: componentTheme?.blockGap,
67
+ padding: componentTheme?.bodyPadding,
68
68
  boxSizing: 'border-box'
69
69
  }
70
70
  };
package/es/NutritionFacts/v1/theme.js CHANGED
@@ -28,19 +28,20 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$ui;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- borders = theme.borders;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ borders
35
+ } = theme;
35
36
  const componentVariables = {
36
- cardBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
37
- cardBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.lineStroke,
38
- cardBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
39
- cardPadding: spacing === null || spacing === void 0 ? void 0 : spacing.space12,
40
- cardExplainerContainerBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
41
- cardGap: spacing === null || spacing === void 0 ? void 0 : spacing.modalElements,
42
- bodyPadding: spacing === null || spacing === void 0 ? void 0 : spacing.paddingCardLarge,
43
- blockGap: spacing === null || spacing === void 0 ? void 0 : spacing.sectionElements
37
+ cardBorderRadius: borders?.radiusMedium,
38
+ cardBorderColor: colors?.ui?.lineStroke,
39
+ cardBorderWidth: borders?.widthSmall,
40
+ cardPadding: spacing?.space12,
41
+ cardExplainerContainerBottomMargin: spacing?.space8,
42
+ cardGap: spacing?.modalElements,
43
+ bodyPadding: spacing?.paddingCardLarge,
44
+ blockGap: spacing?.sectionElements
44
45
  };
45
46
  return {
46
47
  ...componentVariables
package/es/NutritionFacts/v2/index.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
1
  /*
3
2
  * The MIT License (MIT)
4
3
  *
@@ -47,10 +46,7 @@ const NutritionFacts = ({
47
46
  fullscreen = false,
48
47
  themeOverride
49
48
  }) => {
50
- const _useState = useState(false),
51
- _useState2 = _slicedToArray(_useState, 2),
52
- open = _useState2[0],
53
- setOpen = _useState2[1];
49
+ const [open, setOpen] = useState(false);
54
50
  const styles = useStyle({
55
51
  generateStyle,
56
52
  themeOverride,
@@ -89,7 +85,7 @@ const NutritionFacts = ({
89
85
  })]
90
86
  }), _jsx(Modal.Body, {
91
87
  children: _jsxs("div", {
92
- css: styles === null || styles === void 0 ? void 0 : styles.body,
88
+ css: styles?.body,
93
89
  children: [_jsxs(Heading, {
94
90
  variant: "titleSection",
95
91
  level: "h3",
@@ -99,13 +95,13 @@ const NutritionFacts = ({
99
95
  segmentData
100
96
  }, index) => {
101
97
  return _jsxs("div", {
102
- css: styles === null || styles === void 0 ? void 0 : styles.blockContainer,
98
+ css: styles?.blockContainer,
103
99
  children: [_jsxs(Heading, {
104
100
  variant: "titleModule",
105
101
  level: "h4",
106
102
  children: [' ', blockTitle, ' ']
107
103
  }), _jsx("div", {
108
- css: styles === null || styles === void 0 ? void 0 : styles.segmentContainer,
104
+ css: styles?.segmentContainer,
109
105
  children: segmentData.map(({
110
106
  segmentTitle,
111
107
  description,
@@ -113,9 +109,9 @@ const NutritionFacts = ({
113
109
  valueDescription
114
110
  }, index) => {
115
111
  return _jsxs("div", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.segmentCard,
112
+ css: styles?.segmentCard,
117
113
  children: [_jsxs("div", {
118
- css: styles === null || styles === void 0 ? void 0 : styles.segmentCardExplainerContainer,
114
+ css: styles?.segmentCardExplainerContainer,
119
115
  children: [_jsxs(Heading, {
120
116
  variant: "label",
121
117
  children: [' ', segmentTitle, ' ']
package/es/NutritionFacts/v2/styles.js CHANGED
@@ -35,35 +35,35 @@ const generateStyle = componentTheme => {
35
35
  segmentCard: {
36
36
  label: 'nutrition-facts__segment-card',
37
37
  borderStyle: 'solid',
38
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
39
- borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderColor,
40
- borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderRadius,
41
- padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardPadding,
38
+ borderWidth: componentTheme?.cardBorderWidth,
39
+ borderColor: componentTheme?.cardBorderColor,
40
+ borderRadius: componentTheme?.borderRadius,
41
+ padding: componentTheme?.cardPadding,
42
42
  display: 'flex',
43
43
  flexDirection: 'column'
44
44
  },
45
45
  segmentCardExplainerContainer: {
46
46
  label: 'nutrition-facts__segment-card-explainer-container',
47
- marginBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardExplainerContainerBottomMargin
47
+ marginBottom: componentTheme?.cardExplainerContainerBottomMargin
48
48
  },
49
49
  segmentContainer: {
50
50
  label: 'nutrition-facts__segment-container',
51
51
  display: 'flex',
52
52
  flexDirection: 'column',
53
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
53
+ gap: componentTheme?.cardGap
54
54
  },
55
55
  blockContainer: {
56
56
  label: 'nutrition-facts__block-container',
57
57
  display: 'flex',
58
58
  flexDirection: 'column',
59
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
59
+ gap: componentTheme?.cardGap
60
60
  },
61
61
  body: {
62
62
  label: 'nutrition-facts__body',
63
63
  display: 'flex',
64
64
  flexDirection: 'column',
65
- gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.blockGap,
66
- padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.bodyPadding,
65
+ gap: componentTheme?.blockGap,
66
+ padding: componentTheme?.bodyPadding,
67
67
  boxSizing: 'border-box'
68
68
  }
69
69
  };
package/lib/AiInformation/v1/index.js CHANGED
@@ -5,21 +5,19 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.AiInformation = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _react = require("react");
10
9
  var _v11_ = require("@instructure/ui-popover/v11_6");
11
10
  var _v11_2 = require("@instructure/ui-buttons/v11_6");
12
11
  var _v11_3 = require("@instructure/ui-heading/v11_6");
13
12
  var _v11_4 = require("@instructure/ui-text/v11_6");
14
13
  var _v11_5 = require("@instructure/ui-link/v11_6");
15
- var _IconExternalLinkLine2 = require("@instructure/ui-icons/lib/generated/IconExternalLinkLine.js");
14
+ var _IconExternalLinkLine = require("@instructure/ui-icons/lib/generated/IconExternalLinkLine.js");
16
15
  var _emotion = require("@instructure/emotion");
17
16
  var _v = require("../../NutritionFacts/v1");
18
17
  var _v2 = require("../../DataPermissionLevels/v1");
19
18
  var _styles = _interopRequireDefault(require("./styles"));
20
19
  var _theme = _interopRequireDefault(require("./theme"));
21
20
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
22
- var _IconExternalLinkLine;
23
21
  /*
24
22
  * The MIT License (MIT)
25
23
  *
@@ -43,12 +41,12 @@ var _IconExternalLinkLine;
43
41
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
44
42
  * SOFTWARE.
45
43
  */
44
+
46
45
  /**
47
46
  ---
48
47
  category: components/AI Components
49
48
  ---
50
- **/
51
- const AiInformation = ({
49
+ **/const AiInformation = ({
52
50
  title,
53
51
  data,
54
52
  trigger,
@@ -67,10 +65,7 @@ const AiInformation = ({
67
65
  nutritionFactsCloseButtonText,
68
66
  nutritionFactsCloseIconButtonScreenReaderLabel
69
67
  }) => {
70
- const _useState = (0, _react.useState)(false),
71
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
72
- open = _useState2[0],
73
- setOpen = _useState2[1];
68
+ const [open, setOpen] = (0, _react.useState)(false);
74
69
  const styles = (0, _emotion.useStyleLegacy)({
75
70
  generateStyle: _styles.default,
76
71
  generateComponentTheme: _theme.default,
@@ -90,9 +85,9 @@ const AiInformation = ({
90
85
  onShowContent: () => setOpen(true),
91
86
  onHideContent: () => setOpen(false),
92
87
  children: (0, _jsxRuntime.jsxs)("div", {
93
- css: styles === null || styles === void 0 ? void 0 : styles.aiInformation,
88
+ css: styles?.aiInformation,
94
89
  children: [(0, _jsxRuntime.jsxs)("div", {
95
- css: styles === null || styles === void 0 ? void 0 : styles.header,
90
+ css: styles?.header,
96
91
  children: [(0, _jsxRuntime.jsx)(_v11_3.Heading, {
97
92
  level: "h2",
98
93
  aiVariant: "stacked",
@@ -118,43 +113,43 @@ const AiInformation = ({
118
113
  nutritionFactsModalTriggerText
119
114
  }, index) => (0, _jsxRuntime.jsxs)("div", {
120
115
  children: [(0, _jsxRuntime.jsx)("div", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.privacyNotice,
116
+ css: styles?.privacyNotice,
122
117
  children: (0, _jsxRuntime.jsx)(_v11_5.Link, {
123
118
  href: privacyNoticeUrl,
124
- renderIcon: _IconExternalLinkLine || (_IconExternalLinkLine = (0, _jsxRuntime.jsx)(_IconExternalLinkLine2.IconExternalLinkLine, {})),
119
+ renderIcon: (0, _jsxRuntime.jsx)(_IconExternalLinkLine.IconExternalLinkLine, {}),
125
120
  iconPlacement: "end",
126
121
  variant: "standalone",
127
122
  target: "_blank",
128
123
  children: privacyNoticeText
129
124
  })
130
125
  }), (0, _jsxRuntime.jsx)("div", {
131
- css: styles === null || styles === void 0 ? void 0 : styles.featureName,
126
+ css: styles?.featureName,
132
127
  children: (0, _jsxRuntime.jsx)(_v11_3.Heading, {
133
128
  level: "h3",
134
129
  variant: "titleCardRegular",
135
130
  children: featureName
136
131
  })
137
132
  }), (0, _jsxRuntime.jsx)("div", {
138
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevelText,
133
+ css: styles?.permissionLevelText,
139
134
  children: (0, _jsxRuntime.jsx)(_v11_3.Heading, {
140
135
  level: "h4",
141
136
  variant: "label",
142
137
  children: permissionLevelText
143
138
  })
144
139
  }), (0, _jsxRuntime.jsx)("div", {
145
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevel,
140
+ css: styles?.permissionLevel,
146
141
  children: (0, _jsxRuntime.jsxs)(_v11_4.Text, {
147
142
  variant: "legend",
148
143
  children: [" ", permissionLevel, " "]
149
144
  })
150
145
  }), (0, _jsxRuntime.jsx)("div", {
151
- css: styles === null || styles === void 0 ? void 0 : styles.description,
146
+ css: styles?.description,
152
147
  children: (0, _jsxRuntime.jsxs)(_v11_4.Text, {
153
148
  variant: "contentSmall",
154
149
  children: [" ", description, " "]
155
150
  })
156
151
  }), (0, _jsxRuntime.jsx)("div", {
157
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevelsModalTriggerText,
152
+ css: styles?.permissionLevelsModalTriggerText,
158
153
  children: (0, _jsxRuntime.jsx)(_v2.DataPermissionLevels, {
159
154
  fullscreen: fullscreenModals,
160
155
  title: dataPermissionLevelsTitle,
@@ -167,14 +162,14 @@ const AiInformation = ({
167
162
  data: dataPermissionLevelsData
168
163
  })
169
164
  }), (0, _jsxRuntime.jsx)("div", {
170
- css: styles === null || styles === void 0 ? void 0 : styles.modelNameText,
165
+ css: styles?.modelNameText,
171
166
  children: (0, _jsxRuntime.jsxs)(_v11_3.Heading, {
172
167
  level: "h3",
173
168
  variant: "label",
174
169
  children: [' ', modelNameText, ' ']
175
170
  })
176
171
  }), (0, _jsxRuntime.jsx)("div", {
177
- css: styles === null || styles === void 0 ? void 0 : styles.modelName,
172
+ css: styles?.modelName,
178
173
  children: (0, _jsxRuntime.jsxs)(_v11_4.Text, {
179
174
  variant: "contentSmall",
180
175
  children: [" ", modelName, " "]
@@ -189,7 +184,7 @@ const AiInformation = ({
189
184
  triggerText: nutritionFactsModalTriggerText,
190
185
  data: nutritionFactsData
191
186
  }), data.length !== index + 1 ? (0, _jsxRuntime.jsx)("div", {
192
- css: styles === null || styles === void 0 ? void 0 : styles.divider
187
+ css: styles?.divider
193
188
  }) : null]
194
189
  }, index))
195
190
  })]
package/lib/AiInformation/v1/theme.js CHANGED
@@ -34,22 +34,23 @@ 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$ui, _colors$contrasts;
38
- const colors = theme.colors,
39
- spacing = theme.spacing;
37
+ const {
38
+ colors,
39
+ spacing
40
+ } = theme;
40
41
  const componentVariables = {
41
- bodyPadding: spacing === null || spacing === void 0 ? void 0 : spacing.paddingCardLarge,
42
- headingBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.sectionElements,
43
- featureNameBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
44
- permissionLevelTextBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
45
- permissionLevelBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
46
- descriptionBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
47
- permissionLevelsModalTriggerBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
48
- modelNameTextBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space4,
49
- modelNameBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space4,
50
- dividerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
51
- dividerColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.surfaceDivider,
52
- levelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.violet5790
42
+ bodyPadding: spacing?.paddingCardLarge,
43
+ headingBottomMargin: spacing?.sectionElements,
44
+ featureNameBottomMargin: spacing?.moduleElements,
45
+ permissionLevelTextBottomMargin: spacing?.space8,
46
+ permissionLevelBottomMargin: spacing?.space8,
47
+ descriptionBottomMargin: spacing?.space8,
48
+ permissionLevelsModalTriggerBottomMargin: spacing?.moduleElements,
49
+ modelNameTextBottomMargin: spacing?.space4,
50
+ modelNameBottomMargin: spacing?.space4,
51
+ dividerMargin: spacing?.moduleElements,
52
+ dividerColor: colors?.ui?.surfaceDivider,
53
+ levelColor: colors?.contrasts?.violet5790
53
54
  };
54
55
  return {
55
56
  ...componentVariables
package/lib/AiInformation/v2/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.AiInformation = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _react = require("react");
10
9
  var _latest = require("@instructure/ui-popover/latest");
11
10
  var _latest2 = require("@instructure/ui-buttons/latest");
@@ -18,7 +17,6 @@ var _v = require("../../NutritionFacts/v2");
18
17
  var _v2 = require("../../DataPermissionLevels/v2");
19
18
  var _styles = _interopRequireDefault(require("./styles"));
20
19
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
21
- var _ExternalLinkInstUIIc;
22
20
  /*
23
21
  * The MIT License (MIT)
24
22
  *
@@ -42,12 +40,12 @@ var _ExternalLinkInstUIIc;
42
40
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
43
41
  * SOFTWARE.
44
42
  */
43
+
45
44
  /**
46
45
  ---
47
46
  category: components/AI Components
48
47
  ---
49
- **/
50
- const AiInformation = ({
48
+ **/const AiInformation = ({
51
49
  title,
52
50
  data,
53
51
  trigger,
@@ -67,10 +65,7 @@ const AiInformation = ({
67
65
  nutritionFactsCloseIconButtonScreenReaderLabel,
68
66
  themeOverride
69
67
  }) => {
70
- const _useState = (0, _react.useState)(false),
71
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
72
- open = _useState2[0],
73
- setOpen = _useState2[1];
68
+ const [open, setOpen] = (0, _react.useState)(false);
74
69
  const styles = (0, _emotion.useStyle)({
75
70
  generateStyle: _styles.default,
76
71
  themeOverride,
@@ -90,9 +85,9 @@ const AiInformation = ({
90
85
  onShowContent: () => setOpen(true),
91
86
  onHideContent: () => setOpen(false),
92
87
  children: (0, _jsxRuntime.jsxs)("div", {
93
- css: styles === null || styles === void 0 ? void 0 : styles.aiInformation,
88
+ css: styles?.aiInformation,
94
89
  children: [(0, _jsxRuntime.jsxs)("div", {
95
- css: styles === null || styles === void 0 ? void 0 : styles.header,
90
+ css: styles?.header,
96
91
  children: [(0, _jsxRuntime.jsx)(_latest3.Heading, {
97
92
  level: "h2",
98
93
  aiVariant: "stacked",
@@ -118,44 +113,44 @@ const AiInformation = ({
118
113
  nutritionFactsModalTriggerText
119
114
  }, index) => (0, _jsxRuntime.jsxs)("div", {
120
115
  children: [(0, _jsxRuntime.jsx)("div", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.privacyNotice,
116
+ css: styles?.privacyNotice,
122
117
  children: (0, _jsxRuntime.jsx)(_latest5.Link, {
123
118
  href: privacyNoticeUrl,
124
- renderIcon: _ExternalLinkInstUIIc || (_ExternalLinkInstUIIc = (0, _jsxRuntime.jsx)(_uiIcons.ExternalLinkInstUIIcon, {
119
+ renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.ExternalLinkInstUIIcon, {
125
120
  size: "sm"
126
- })),
121
+ }),
127
122
  iconPlacement: "end",
128
123
  variant: "standalone",
129
124
  children: privacyNoticeText
130
125
  })
131
126
  }), (0, _jsxRuntime.jsx)("div", {
132
- css: styles === null || styles === void 0 ? void 0 : styles.featureName,
127
+ css: styles?.featureName,
133
128
  children: (0, _jsxRuntime.jsx)(_latest3.Heading, {
134
129
  level: "h3",
135
130
  variant: "titleCardRegular",
136
131
  children: featureName
137
132
  })
138
133
  }), (0, _jsxRuntime.jsx)("div", {
139
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevelText,
134
+ css: styles?.permissionLevelText,
140
135
  children: (0, _jsxRuntime.jsx)(_latest3.Heading, {
141
136
  level: "h4",
142
137
  variant: "label",
143
138
  children: permissionLevelText
144
139
  })
145
140
  }), (0, _jsxRuntime.jsx)("div", {
146
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevel,
141
+ css: styles?.permissionLevel,
147
142
  children: (0, _jsxRuntime.jsxs)(_latest4.Text, {
148
143
  variant: "legend",
149
144
  children: [" ", permissionLevel, " "]
150
145
  })
151
146
  }), (0, _jsxRuntime.jsx)("div", {
152
- css: styles === null || styles === void 0 ? void 0 : styles.description,
147
+ css: styles?.description,
153
148
  children: (0, _jsxRuntime.jsxs)(_latest4.Text, {
154
149
  variant: "contentSmall",
155
150
  children: [" ", description, " "]
156
151
  })
157
152
  }), (0, _jsxRuntime.jsx)("div", {
158
- css: styles === null || styles === void 0 ? void 0 : styles.permissionLevelsModalTriggerText,
153
+ css: styles?.permissionLevelsModalTriggerText,
159
154
  children: (0, _jsxRuntime.jsx)(_v2.DataPermissionLevels, {
160
155
  fullscreen: fullscreenModals,
161
156
  title: dataPermissionLevelsTitle,
@@ -168,14 +163,14 @@ const AiInformation = ({
168
163
  data: dataPermissionLevelsData
169
164
  })
170
165
  }), (0, _jsxRuntime.jsx)("div", {
171
- css: styles === null || styles === void 0 ? void 0 : styles.modelNameText,
166
+ css: styles?.modelNameText,
172
167
  children: (0, _jsxRuntime.jsxs)(_latest3.Heading, {
173
168
  level: "h3",
174
169
  variant: "label",
175
170
  children: [' ', modelNameText, ' ']
176
171
  })
177
172
  }), (0, _jsxRuntime.jsx)("div", {
178
- css: styles === null || styles === void 0 ? void 0 : styles.modelName,
173
+ css: styles?.modelName,
179
174
  children: (0, _jsxRuntime.jsxs)(_latest4.Text, {
180
175
  variant: "contentSmall",
181
176
  children: [" ", modelName, " "]
@@ -190,7 +185,7 @@ const AiInformation = ({
190
185
  triggerText: nutritionFactsModalTriggerText,
191
186
  data: nutritionFactsData
192
187
  }), data.length !== index + 1 ? (0, _jsxRuntime.jsx)("div", {
193
- css: styles === null || styles === void 0 ? void 0 : styles.divider
188
+ css: styles?.divider
194
189
  }) : null]
195
190
  }, index))
196
191
  })]
package/lib/DataPermissionLevels/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.DataPermissionLevels = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _react = require("react");
10
9
  var _v11_ = require("@instructure/ui-modal/v11_6");
11
10
  var _v11_2 = require("@instructure/ui-buttons/v11_6");
@@ -55,11 +54,7 @@ category: components/AI Components
55
54
  triggerText,
56
55
  fullscreen = false
57
56
  }) => {
58
- var _Heading, _Text;
59
- const _useState = (0, _react.useState)(false),
60
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
61
- open = _useState2[0],
62
- setOpen = _useState2[1];
57
+ const [open, setOpen] = (0, _react.useState)(false);
63
58
  const styles = (0, _emotion.useStyleLegacy)({
64
59
  generateStyle: _styles.default,
65
60
  generateComponentTheme: _theme.default,
@@ -98,33 +93,33 @@ category: components/AI Components
98
93
  })]
99
94
  }), (0, _jsxRuntime.jsx)(_v11_.Modal.Body, {
100
95
  children: (0, _jsxRuntime.jsx)("div", {
101
- css: styles === null || styles === void 0 ? void 0 : styles.body,
96
+ css: styles?.body,
102
97
  children: data.map(({
103
98
  level,
104
99
  title,
105
100
  description,
106
101
  highlighted
107
102
  }, index) => (0, _jsxRuntime.jsxs)("div", {
108
- css: highlighted ? styles === null || styles === void 0 ? void 0 : styles.highlightedCard : styles === null || styles === void 0 ? void 0 : styles.card,
103
+ css: highlighted ? styles?.highlightedCard : styles?.card,
109
104
  children: [highlighted ? (0, _jsxRuntime.jsxs)("div", {
110
- css: styles === null || styles === void 0 ? void 0 : styles.currentFeature,
111
- children: [_Heading || (_Heading = (0, _jsxRuntime.jsxs)(_v11_3.Heading, {
105
+ css: styles?.currentFeature,
106
+ children: [(0, _jsxRuntime.jsxs)(_v11_3.Heading, {
112
107
  color: "primary-inverse",
113
108
  level: "reset",
114
109
  variant: "labelInline",
115
110
  children: [currentFeatureText, ' ']
116
- })), _Text || (_Text = (0, _jsxRuntime.jsx)(_v11_4.Text, {
111
+ }), (0, _jsxRuntime.jsx)(_v11_4.Text, {
117
112
  color: "primary-inverse",
118
113
  variant: "content",
119
114
  children: currentFeature
120
- }))]
115
+ })]
121
116
  }) : null, (0, _jsxRuntime.jsxs)("div", {
122
- css: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
117
+ css: styles?.contentContainer,
123
118
  children: [(0, _jsxRuntime.jsx)("div", {
124
- css: styles === null || styles === void 0 ? void 0 : styles.level,
119
+ css: styles?.level,
125
120
  children: level
126
121
  }), (0, _jsxRuntime.jsx)("div", {
127
- css: styles === null || styles === void 0 ? void 0 : styles.permissionTitle,
122
+ css: styles?.permissionTitle,
128
123
  children: (0, _jsxRuntime.jsxs)(_v11_4.Text, {
129
124
  variant: "descriptionPage",
130
125
  children: [title, " "]
package/lib/DataPermissionLevels/v1/styles.js CHANGED
@@ -46,23 +46,23 @@ const generateStyle = (componentTheme, _props) => {
46
46
  label: 'data-permission-levels__body',
47
47
  display: 'flex',
48
48
  flexDirection: 'column',
49
- padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.bodyPadding
49
+ padding: componentTheme?.bodyPadding
50
50
  },
51
51
  card: {
52
52
  label: 'data-permission-levels__card',
53
53
  padding: '2px',
54
54
  borderStyle: 'solid',
55
55
  borderColor: 'transparent',
56
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
56
+ borderWidth: componentTheme?.cardBorderWidth,
57
57
  display: 'flex',
58
58
  flexDirection: 'column'
59
59
  },
60
60
  highlightedCard: {
61
61
  label: 'data-permission-levels__highlighted-card',
62
62
  borderStyle: 'solid',
63
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
64
- borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderColor,
65
- borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
63
+ borderWidth: componentTheme?.cardBorderWidth,
64
+ borderColor: componentTheme?.cardBorderColor,
65
+ borderRadius: componentTheme?.cardBorderRadius,
66
66
  padding: '2px',
67
67
  display: 'flex',
68
68
  flexDirection: 'column',
@@ -73,18 +73,18 @@ const generateStyle = (componentTheme, _props) => {
73
73
  },
74
74
  level: {
75
75
  label: 'data-permission-levels__level',
76
- color: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.levelColor
76
+ color: componentTheme?.levelColor
77
77
  },
78
78
  currentFeature: {
79
79
  label: 'data-permission-levels__current-feature',
80
80
  background: `
81
81
  linear-gradient(to right, ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%)`,
82
- paddingLeft: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingSides,
83
- paddingRight: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingSides,
84
- paddingTop: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingTopBottom,
85
- paddingBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingTopBottom,
86
- borderTopLeftRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
87
- borderTopRightRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius
82
+ paddingLeft: componentTheme?.currentFeaturePaddingSides,
83
+ paddingRight: componentTheme?.currentFeaturePaddingSides,
84
+ paddingTop: componentTheme?.currentFeaturePaddingTopBottom,
85
+ paddingBottom: componentTheme?.currentFeaturePaddingTopBottom,
86
+ borderTopLeftRadius: componentTheme?.cardBorderRadius,
87
+ borderTopRightRadius: componentTheme?.cardBorderRadius
88
88
  },
89
89
  contentContainer: {
90
90
  label: 'data-permission-levels__content-container',
@@ -95,7 +95,7 @@ const generateStyle = (componentTheme, _props) => {
95
95
  },
96
96
  permissionTitle: {
97
97
  label: 'data-permission-levels__permission-title',
98
- marginBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.permissionTitleBottomMargin
98
+ marginBottom: componentTheme?.permissionTitleBottomMargin
99
99
  }
100
100
  };
101
101
  };