@instructure/ui-options 11.6.0 → 11.6.1-snapshot-129

package/lib/Options/v2/Item/styles.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _uiReactUtils = require("@instructure/ui-react-utils");
+/*
+ * 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
+ * @param  {Object} state the state 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) => {
+  const variant = props.variant,
+    children = props.children,
+    hasContentBeforeLabel = props.renderBeforeLabel,
+    hasContentAfterLabel = props.renderAfterLabel,
+    beforeLabelContentVAlign = props.beforeLabelContentVAlign,
+    afterLabelContentVAlign = props.afterLabelContentVAlign;
+  // TODO if children are () => ReactNode this wont match anything
+  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']);
+
+  // used for label and description too
+  const variantVariants = {
+    highlighted: {
+      background: componentTheme.highlightedBackground,
+      color: componentTheme.highlightedLabelColor
+    },
+    selected: {
+      background: componentTheme.selectedBackground,
+      color: componentTheme.selectedLabelColor
+    },
+    disabled: {
+      cursor: 'not-allowed',
+      opacity: 0.68
+    },
+    'highlighted-disabled': {
+      background: componentTheme.highlightedBackground,
+      color: componentTheme.highlightedLabelColor,
+      cursor: 'not-allowed'
+    },
+    'selected-highlighted': {
+      background: componentTheme.selectedHighlightedBackground,
+      color: componentTheme.highlightedLabelColor
+    },
+    default: {
+      transition: 'background 200ms'
+    }
+  };
+  const getContentVAlign = type => {
+    const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
+    const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
+    return {
+      start: {
+        alignItems: 'flex-start',
+        paddingBlockStart: vOffset
+      },
+      center: {
+        alignItems: 'center',
+        paddingBlockStart: vOffset,
+        paddingBlockEnd: vOffset
+      },
+      end: {
+        alignItems: 'flex-end',
+        paddingBlockEnd: vOffset
+      }
+    }[vAlign];
+  };
+  const linkStyles = {
+    textDecoration: 'none',
+    color: 'currentColor'
+  };
+  return {
+    item: {
+      label: 'optionItem',
+      background: componentTheme.background,
+      color: componentTheme.color,
+      cursor: 'pointer',
+      display: 'block',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: props.isSelected ? componentTheme.fontWeightSelected : componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      outline: 'none',
+      position: 'relative',
+      userSelect: 'none',
+      ...variantVariants[variant],
+      ...(containsList && {
+        cursor: 'default'
+      }),
+      // for nested items
+      '[class*=-optionItem] &': {
+        // except if it has icon before
+        ...(!hasContentBeforeLabel && {
+          '[class$=-optionItem__container]': {
+            paddingInlineStart: componentTheme.nestedPadding
+          },
+          '[class$=-optionItem__content--before]': {
+            insetInlineStart: componentTheme.nestedPadding
+          }
+        })
+      }
+    },
+    container: {
+      label: 'optionItem__container',
+      display: 'block',
+      outline: 'none',
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
+      ...(containsList && {
+        padding: '0'
+      }),
+      ...(hasContentBeforeLabel && {
+        paddingInlineEnd: componentTheme.iconPadding,
+        paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
+      }),
+      ...(hasContentAfterLabel && {
+        paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
+        paddingInlineStart: componentTheme.iconPadding
+      }),
+      ...(hasContentBeforeLabel && hasContentAfterLabel && {
+        paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
+        paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
+      }),
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      },
+      '&:-webkit-any(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      }
+    },
+    content: {
+      label: 'optionItem__content',
+      display: 'flex',
+      height: '100%',
+      boxSizing: 'border-box',
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: '0'
+    },
+    contentBefore: {
+      label: 'optionItem__content--before',
+      insetInlineEnd: 'auto',
+      insetInlineStart: componentTheme.iconPadding,
+      ...getContentVAlign('before')
+    },
+    contentAfter: {
+      label: 'optionItem__content--after',
+      insetInlineEnd: componentTheme.iconPadding,
+      insetInlineStart: 'auto',
+      ...getContentVAlign('after')
+    },
+    description: {
+      label: 'optionItem__description',
+      display: 'block',
+      paddingBlockStart: componentTheme.descriptionPaddingStart,
+      fontWeight: componentTheme.descriptionFontWeight,
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      color: componentTheme.descriptionColor,
+      ...variantVariants[variant],
+      background: 'none' // needed to clear variant background
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Options/v2/Item/theme.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionsItemThemeGenerator = 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$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
+  const colors = theme.colors,
+    typography = theme.typography,
+    spacing = theme.spacing,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark'],
+      highlightedBackground: theme['ic-brand-primary']
+    }
+  };
+  const componentVariables = {
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    fontWeightSelected: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    highlightedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
+    highlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
+    selectedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
+    selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey4570,
+    selectedHighlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
+    iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    beforeLabelContentVOffset: '0.625rem',
+    afterLabelContentVOffset: '0.625rem',
+    descriptionFontSize: typography.fontSizeSmall,
+    descriptionFontWeight: typography.fontWeightNormal,
+    descriptionLineHeight: typography.lineHeight,
+    descriptionPaddingStart: '0.25em',
+    descriptionColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey5782
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+exports.optionsItemThemeGenerator = generateComponentTheme;
+var _default = exports.default = generateComponentTheme;

package/lib/Options/v2/Separator/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Separator = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["as", "styles"];
+var _dec, _class, _Separator;
+/*
+ * 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.
+ */
+/**
+---
+parent: Options
+id: Options.Separator
+---
+@module Separator
+**/
+let Separator = exports.Separator = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Separator = class Separator extends _react.Component {
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      styles = _this$props3.styles,
+      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const ElementType = (0, _uiReactUtils.getElementType)(Separator, this.props, () => as);
+    return (0, _jsxRuntime.jsx)(ElementType, {
+      role: "none",
+      children: (0, _jsxRuntime.jsx)("div", {
+        ...(0, _uiReactUtils.omitProps)(rest, ['styles', 'makeStyles', 'themeOverride']),
+        css: styles === null || styles === void 0 ? void 0 : styles.separator,
+        role: "presentation"
+      })
+    });
+  }
+}, _Separator.displayName = "Separator", _Separator.componentId = 'Options.Separator', _Separator.allowedProps = _props.allowedProps, _Separator.defaultProps = {
+  as: 'span'
+}, _Separator)) || _class);
+var _default = exports.default = Separator;

package/lib/Options/v2/Separator/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 = ['as'];

package/lib/Options/v2/Separator/styles.js

@@ -0,0 +1,52 @@
+"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
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    separator: {
+      label: 'separator',
+      height: componentTheme.height,
+      margin: `${componentTheme.marginVertical} ${componentTheme.marginHorizontal}`,
+      overflow: 'hidden',
+      background: componentTheme.background
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Options/v2/Separator/theme.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionsSeparatorThemeGenerator = 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$contrasts;
+  const borders = theme.borders,
+    colors = theme.colors,
+    spacing = theme.spacing;
+  const componentVariables = {
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
+    height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
+  };
+  return {
+    ...componentVariables
+  };
+};
+exports.optionsSeparatorThemeGenerator = generateComponentTheme;
+var _default = exports.default = generateComponentTheme;

package/lib/Options/{index.js → v2/index.js}

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Options = void 0;
 var _react = require("react");
 var _uiReactUtils = require("@instructure/ui-react-utils");
-var _uiView = require("@instructure/ui-view");
+var _latest = require("@instructure/ui-view/latest");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _Item = require("./Item");
 var _Separator = require("./Separator");
 var _props = require("./props");
@@ -45,7 +44,7 @@ var _dec, _dec2, _class, _Options;
 category: components/utilities
 ---
 **/
-let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Options = class Options extends _react.Component {
+let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Options = class Options extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -116,7 +115,7 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
     return void 0;
   }
   render() {
-    const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
+    const passthroughProps = _latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
     const _this$props4 = this.props,
       as = _this$props4.as,
       role = _this$props4.role,
@@ -128,7 +127,7 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
       role: "presentation",
       ref: this.handleRef,
       "data-cid": "Options",
-      children: [renderLabel && this.renderLabel(), (0, _jsxRuntime.jsx)(_uiView.View, {
+      children: [renderLabel && this.renderLabel(), (0, _jsxRuntime.jsx)(_latest.View, {
         ...passthroughProps,
         elementRef: elementRef,
         css: styles === null || styles === void 0 ? void 0 : styles.list,

package/lib/Options/v2/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 = ['as', 'role', 'elementRef', 'renderLabel', 'children'];

package/lib/Options/v2/styles.js

@@ -0,0 +1,63 @@
+"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
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    options: {
+      label: 'options',
+      boxSizing: 'border-box',
+      wordWrap: 'break-word'
+    },
+    list: {
+      label: 'options__list',
+      listStyleType: 'none',
+      position: 'relative'
+    },
+    label: {
+      label: 'options__label',
+      color: componentTheme.labelColor,
+      cursor: 'default',
+      display: 'block',
+      fontWeight: componentTheme.labelFontWeight,
+      padding: `${componentTheme.nestedLabelPaddingVertical} ${componentTheme.nestedLabelPaddingHorizontal}`
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Options/v2/theme.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionsThemeGenerator = 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$contrasts, _colors$contrasts2;
+  const colors = theme.colors,
+    typography = theme.typography,
+    spacing = theme.spacing;
+  const componentVariables = {
+    labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
+    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+    labelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`,
+    nestedLabelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
+  };
+  return {
+    ...componentVariables
+  };
+};
+exports.optionsThemeGenerator = generateComponentTheme;
+var _default = exports.default = generateComponentTheme;