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

package/es/Options/v2/Item/index.js

@@ -0,0 +1,127 @@
+var _dec, _dec2, _class, _Item;
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyles from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+parent: Options
+id: Options.Item
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = (_Item = class Item extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._descriptionId = void 0;
+    this._descriptionId = props.deterministicId('OptionsItem-description');
+  }
+  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);
+  }
+  renderContent(renderLabel, contentVariant) {
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      variant = _this$props3.variant,
+      as = _this$props3.as,
+      role = _this$props3.role,
+      children = _this$props3.children;
+    return _jsx("span", {
+      css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
+      role: "presentation",
+      "aria-hidden": "true",
+      children: callRenderProp(renderLabel, {
+        variant,
+        as,
+        role,
+        children
+      })
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      as = _this$props4.as,
+      href = _this$props4.href,
+      role = _this$props4.role,
+      styles = _this$props4.styles,
+      description = _this$props4.description,
+      descriptionRole = _this$props4.descriptionRole,
+      renderBeforeLabel = _this$props4.renderBeforeLabel,
+      renderAfterLabel = _this$props4.renderAfterLabel,
+      elementRef = _this$props4.elementRef,
+      children = _this$props4.children,
+      voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
+    const ElementType = getElementType(Item, this.props, () => as);
+    const InnerElementType = href ? 'a' : 'span';
+    const passthroughProps = omitProps(this.props, Item.allowedProps);
+    const childrenContent = callRenderProp(children);
+    const descriptionContent = callRenderProp(description);
+    const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
+    return _jsxs(ElementType, {
+      role: voiceoverRoleBugWorkaround ? role : 'none',
+      "data-cid": "Options.Item",
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      ref: element => {
+        this.ref = element;
+        if (typeof elementRef === 'function') {
+          elementRef(element);
+        }
+      },
+      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
+      children: [_jsxs(InnerElementType, {
+        ...passthroughProps,
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        role: href || voiceoverRoleBugWorkaround ? void 0 : role,
+        href: href,
+        "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
+        children: [childrenContent, descriptionContent && _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.description,
+          role: descriptionRole,
+          id: this._descriptionId,
+          children: descriptionContent
+        })]
+      }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter)]
+    });
+  }
+}, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
+  as: 'span',
+  variant: 'default',
+  role: 'listitem',
+  voiceoverRoleBugWorkaround: false,
+  beforeLabelContentVAlign: 'center',
+  afterLabelContentVAlign: 'center',
+  isSelected: false
+}, _Item)) || _class) || _class);
+export default Item;
+export { Item };

package/es/Options/v2/Item/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children', 'isSelected'];
+export { allowedProps };

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

@@ -0,0 +1,189 @@
+/*
+ * 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.
+ */
+
+import { matchComponentTypes } from '@instructure/ui-react-utils';
+/**
+ * ---
+ * 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 = 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
+    }
+  };
+};
+export default generateStyle;

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

@@ -0,0 +1,72 @@
+/*
+ * 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]
+  };
+};
+export { generateComponentTheme as optionsItemThemeGenerator };
+export default generateComponentTheme;

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

@@ -0,0 +1,69 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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.
+ */
+
+import { Component } from 'react';
+import { getElementType, omitProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyles from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+parent: Options
+id: Options.Separator
+---
+@module Separator
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let Separator = (_dec = withStyle(generateStyles), _dec(_class = (_Separator = class Separator extends 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 = _objectWithoutProperties(_this$props3, _excluded);
+    const ElementType = getElementType(Separator, this.props, () => as);
+    return _jsx(ElementType, {
+      role: "none",
+      children: _jsx("div", {
+        ...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 = allowedProps, _Separator.defaultProps = {
+  as: 'span'
+}, _Separator)) || _class);
+export default Separator;
+export { Separator };

package/es/Options/v2/Separator/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['as'];
+export { allowedProps };

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

@@ -0,0 +1,46 @@
+/*
+ * 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
+    }
+  };
+};
+export default generateStyle;

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

@@ -0,0 +1,45 @@
+/*
+ * 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
+  };
+};
+export { generateComponentTheme as optionsSeparatorThemeGenerator };
+export default generateComponentTheme;