@instructure/ui-instructure 10.21.1-snapshot-11

package/lib/AiInformation/styles.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, _props) => {
+  return {
+    aiInformation: {
+      label: 'ai-information',
+      width: '18.5rem',
+      padding: componentTheme.bodyPadding,
+      boxSizing: 'border-box'
+    },
+    header: {
+      label: 'ai-information__header',
+      marginBottom: componentTheme.headingBottomMargin
+    },
+    featureName: {
+      label: 'ai-information__feature-name',
+      marginBottom: componentTheme.featureNameBottomMargin
+    },
+    permissionLevelText: {
+      label: 'ai-information__permission-level-text',
+      marginBottom: componentTheme.permissionLevelTextBottomMargin
+    },
+    permissionLevel: {
+      label: 'ai-information__permission-level',
+      marginBottom: componentTheme.permissionLevelBottomMargin,
+      color: componentTheme.levelColor
+    },
+    description: {
+      label: 'ai-information__description',
+      marginBottom: componentTheme.descriptionBottomMargin
+    },
+    permissionLevelsModalTriggerText: {
+      label: 'ai-information__permission-levels-modal-trigger-text',
+      marginBottom: componentTheme.permissionLevelsModalTriggerBottomMargin
+    },
+    modelNameText: {
+      label: 'ai-information__model-name-text',
+      marginBottom: componentTheme.modelNameTextBottomMargin
+    },
+    modelName: {
+      label: 'ai-information__model-name',
+      marginBottom: componentTheme.modelNameBottomMargin
+    },
+    divider: {
+      label: 'ai-information__divider',
+      marginBottom: componentTheme.dividerMargin,
+      marginTop: componentTheme.dividerMargin,
+      borderTop: 'solid 1px',
+      width: '100%',
+      borderColor: componentTheme.dividerColor
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/AiInformation/theme.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$ui, _colors$contrasts;
+  const colors = theme.colors,
+    spacing = theme.spacing;
+  const componentVariables = {
+    bodyPadding: spacing === null || spacing === void 0 ? void 0 : spacing.paddingCardLarge,
+    headingBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.sectionElements,
+    featureNameBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
+    permissionLevelTextBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    permissionLevelBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    descriptionBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    permissionLevelsModalTriggerBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
+    modelNameTextBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space4,
+    modelNameBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space4,
+    dividerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.moduleElements,
+    dividerColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.surfaceDivider,
+    levelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.violet5790
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/DataPermissionLevels/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DataPermissionLevels = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _Modal = require("@instructure/ui-modal/lib/Modal");
+var _Button = require("@instructure/ui-buttons/lib/Button");
+var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
+var _Heading2 = require("@instructure/ui-heading/lib/Heading");
+var _Text2 = require("@instructure/ui-text/lib/Text");
+var _Link = require("@instructure/ui-link/lib/Link");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+---
+category: components/AI Components
+---
+**/const DataPermissionLevels = ({
+  modalLabel,
+  title,
+  data,
+  closeButtonText,
+  closeIconButtonScreenReaderLabel,
+  currentFeature,
+  currentFeatureText,
+  triggerText,
+  fullscreen = false
+}) => {
+  var _Heading, _Text;
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    generateComponentTheme: _theme.default,
+    componentId: 'DataPermissionLevels',
+    displayName: 'DataPermissionLevels'
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsx)(_Link.Link, {
+      variant: "standalone",
+      onClick: e => {
+        e.preventDefault();
+        setOpen(true);
+      },
+      forceButtonRole: false,
+      href: "#",
+      children: triggerText
+    }), (0, _jsxRuntime.jsxs)(_Modal.Modal, {
+      size: fullscreen ? 'fullscreen' : 'medium',
+      open: open,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      label: modalLabel,
+      shouldCloseOnDocumentClick: true,
+      children: [(0, _jsxRuntime.jsxs)(_Modal.Modal.Header, {
+        spacing: "compact",
+        children: [(0, _jsxRuntime.jsx)(_Heading2.Heading, {
+          aiVariant: "stacked",
+          children: title
+        }), (0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+          size: "medium",
+          placement: "end",
+          offset: "small",
+          onClick: () => setOpen(false),
+          screenReaderLabel: closeIconButtonScreenReaderLabel
+        })]
+      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Body, {
+        children: (0, _jsxRuntime.jsx)("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.body,
+          children: data.map(({
+            level,
+            title,
+            description,
+            highlighted
+          }, index) => (0, _jsxRuntime.jsxs)("div", {
+            css: highlighted ? styles === null || styles === void 0 ? void 0 : styles.highlightedCard : styles === null || styles === void 0 ? void 0 : styles.card,
+            children: [highlighted ? (0, _jsxRuntime.jsxs)("div", {
+              css: styles === null || styles === void 0 ? void 0 : styles.currentFeature,
+              children: [_Heading || (_Heading = (0, _jsxRuntime.jsxs)(_Heading2.Heading, {
+                color: "primary-inverse",
+                level: "reset",
+                variant: "labelInline",
+                children: [currentFeatureText, ' ']
+              })), _Text || (_Text = (0, _jsxRuntime.jsx)(_Text2.Text, {
+                color: "primary-inverse",
+                variant: "content",
+                children: currentFeature
+              }))]
+            }) : null, (0, _jsxRuntime.jsxs)("div", {
+              css: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+              children: [(0, _jsxRuntime.jsx)("div", {
+                css: styles === null || styles === void 0 ? void 0 : styles.level,
+                children: level
+              }), (0, _jsxRuntime.jsx)("div", {
+                css: styles === null || styles === void 0 ? void 0 : styles.permissionTitle,
+                children: (0, _jsxRuntime.jsxs)(_Text2.Text, {
+                  variant: "descriptionPage",
+                  children: [title, " "]
+                })
+              }), (0, _jsxRuntime.jsx)(_Text2.Text, {
+                variant: "content",
+                color: "secondary",
+                children: description
+              })]
+            })]
+          }, index))
+        })
+      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Footer, {
+        children: (0, _jsxRuntime.jsx)(_Button.Button, {
+          onClick: () => setOpen(false),
+          children: closeButtonText
+        })
+      })]
+    })]
+  });
+};
+exports.DataPermissionLevels = DataPermissionLevels;
+var _default = exports.default = DataPermissionLevels;

package/lib/DataPermissionLevels/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['fullscreen', 'modalLabel', 'title', 'data', 'closeButtonText', 'closeIconButtonScreenReaderLabel', 'currentFeatureText', 'currentFeature', 'triggerText'];

package/lib/DataPermissionLevels/styles.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, _props) => {
+  return {
+    dataPermissionLevels: {
+      label: 'data-permission-levels'
+    },
+    body: {
+      label: 'data-permission-levels__body',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.bodyPadding
+    },
+    card: {
+      label: 'data-permission-levels__card',
+      padding: '2px',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    highlightedCard: {
+      label: 'data-permission-levels__highlighted-card',
+      borderStyle: 'solid',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
+      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderColor,
+      borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
+      padding: '2px',
+      display: 'flex',
+      flexDirection: 'column',
+      background: `
+        linear-gradient(to right,  ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%) padding-box,
+        linear-gradient(to right, ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%) border-box`,
+      border: 'solid transparent'
+    },
+    level: {
+      label: 'data-permission-levels__level',
+      color: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.levelColor
+    },
+    currentFeature: {
+      label: 'data-permission-levels__current-feature',
+      background: `
+        linear-gradient(to right, ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%)`,
+      paddingLeft: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingSides,
+      paddingRight: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingSides,
+      paddingTop: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingTopBottom,
+      paddingBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.currentFeaturePaddingTopBottom,
+      borderTopLeftRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
+      borderTopRightRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius
+    },
+    contentContainer: {
+      label: 'data-permission-levels__content-container',
+      background: 'white',
+      padding: '10px',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    permissionTitle: {
+      label: 'data-permission-levels__permission-title',
+      marginBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.permissionTitleBottomMargin
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/DataPermissionLevels/theme.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$ui, _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
+  const colors = theme.colors,
+    spacing = theme.spacing,
+    borders = theme.borders;
+  const componentVariables = {
+    cardBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    cardBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.lineStroke,
+    cardBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    cardPadding: spacing === null || spacing === void 0 ? void 0 : spacing.space12,
+    cardExplainerContainerBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    cardGap: spacing === null || spacing === void 0 ? void 0 : spacing.modalElements,
+    currentFeaturePaddingSides: spacing === null || spacing === void 0 ? void 0 : spacing.space12,
+    currentFeaturePaddingTopBottom: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    permissionTitleBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    levelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.violet5790,
+    bodyPadding: spacing === null || spacing === void 0 ? void 0 : spacing.paddingCardLarge,
+    aiTextLeftGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.violet4570,
+    aiTextRightGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.sea4570
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/NutritionFacts/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NutritionFacts = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _Modal = require("@instructure/ui-modal/lib/Modal");
+var _Button = require("@instructure/ui-buttons/lib/Button");
+var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
+var _Heading = require("@instructure/ui-heading/lib/Heading");
+var _Text = require("@instructure/ui-text/lib/Text");
+var _Link = require("@instructure/ui-link/lib/Link");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+---
+category: components/AI Components
+---
+**/const NutritionFacts = ({
+  modalLabel,
+  title,
+  featureName,
+  data,
+  closeButtonText,
+  closeIconButtonScreenReaderLabel,
+  triggerText,
+  fullscreen = false
+}) => {
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    generateComponentTheme: _theme.default,
+    componentId: 'NutritionFacts',
+    displayName: 'NutritionFacts'
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsx)(_Link.Link, {
+      variant: "standalone",
+      onClick: e => {
+        e.preventDefault();
+        setOpen(true);
+      },
+      forceButtonRole: false,
+      href: "#",
+      children: triggerText
+    }), (0, _jsxRuntime.jsxs)(_Modal.Modal, {
+      open: open,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      label: modalLabel,
+      shouldCloseOnDocumentClick: true,
+      size: fullscreen ? 'fullscreen' : 'medium',
+      children: [(0, _jsxRuntime.jsxs)(_Modal.Modal.Header, {
+        spacing: "compact",
+        children: [(0, _jsxRuntime.jsx)(_Heading.Heading, {
+          aiVariant: "stacked",
+          children: title
+        }), (0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+          size: "medium",
+          placement: "end",
+          offset: "small",
+          onClick: () => setOpen(false),
+          screenReaderLabel: closeIconButtonScreenReaderLabel
+        })]
+      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Body, {
+        children: (0, _jsxRuntime.jsxs)("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.body,
+          children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+            variant: "titleSection",
+            level: "h3",
+            children: [' ', featureName, ' ']
+          }), data.map(({
+            blockTitle,
+            segmentData
+          }, index) => {
+            return (0, _jsxRuntime.jsxs)("div", {
+              css: styles === null || styles === void 0 ? void 0 : styles.blockContainer,
+              children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+                variant: "titleModule",
+                level: "h4",
+                children: [' ', blockTitle, ' ']
+              }), (0, _jsxRuntime.jsx)("div", {
+                css: styles === null || styles === void 0 ? void 0 : styles.segmentContainer,
+                children: segmentData.map(({
+                  segmentTitle,
+                  description,
+                  value,
+                  valueDescription
+                }, index) => {
+                  return (0, _jsxRuntime.jsxs)("div", {
+                    css: styles === null || styles === void 0 ? void 0 : styles.segmentCard,
+                    children: [(0, _jsxRuntime.jsxs)("div", {
+                      css: styles === null || styles === void 0 ? void 0 : styles.segmentCardExplainerContainer,
+                      children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+                        variant: "label",
+                        children: [' ', segmentTitle, ' ']
+                      }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                        variant: "contentSmall",
+                        color: "secondary",
+                        children: [' ', description, ' ']
+                      })]
+                    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                      variant: "content",
+                      children: [" ", value, " "]
+                    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                      variant: "contentSmall",
+                      color: "secondary",
+                      children: [' ', valueDescription, ' ']
+                    })]
+                  }, index);
+                })
+              })]
+            }, index);
+          })]
+        })
+      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Footer, {
+        children: (0, _jsxRuntime.jsx)(_Button.Button, {
+          onClick: () => setOpen(false),
+          children: closeButtonText
+        })
+      })]
+    })]
+  });
+};
+exports.NutritionFacts = NutritionFacts;
+var _default = exports.default = NutritionFacts;