@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/ActionList2/Description.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Description = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
+  const styles = {
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId,
+    disabled
+  }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    id: inlineDescriptionId,
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+
+exports.Description = Description;
+Description.displayName = "Description";

package/lib/ActionList2/Divider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "li",
+    role: "separator",
+    sx: {
+      height: 1,
+      backgroundColor: 'actionListItem.inlineDivider',
+      marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
+      marginBottom: 2,
+      listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+
+    },
+    "data-component": "ActionList.Divider"
+  });
+}
+
+Divider.displayName = "Divider";

package/lib/ActionList2/Group.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = exports.GroupContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _List = require("./List");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const GroupContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.GroupContext = GroupContext;
+
+const Group = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "li",
+    sx: {
+      '&:not(:first-child)': {
+        marginTop: 2
+      },
+      listStyle: 'none',
+      // hide the ::marker inserted by browser's stylesheet
+      ...sx
+    }
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
+    title: title,
+    variant: variant,
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
+  }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
+    value: {
+      selectionVariant
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "ul",
+    sx: {
+      paddingInlineStart: 0
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
+  }, props.children)));
+};
+
+exports.Group = Group;
+Group.displayName = "Group";
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({
+  variant,
+  title,
+  auxiliaryText,
+  labelId,
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib/ActionList2/Item.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = exports.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = _interopRequireWildcard(require("../sx"));
+
+var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
+
+var _List = require("./List");
+
+var _Selection = require("./Selection");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const getVariantStyles = (variant, disabled) => {
+  if (disabled) {
+    return {
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: 'danger.fg',
+        iconColor: 'danger.fg',
+        annotationColor: 'fg.muted',
+        hoverColor: 'actionListItem.danger.hoverText'
+      };
+
+    default:
+      return {
+        color: 'fg.default',
+        iconColor: 'fg.muted',
+        annotationColor: 'fg.muted',
+        hoverColor: 'fg.default'
+      };
+  }
+};
+
+exports.getVariantStyles = getVariantStyles;
+const {
+  Slots,
+  Slot
+} = (0, _createSlots.default)(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
+exports.Slot = Slot;
+
+const LiBox = _styledComponents.default.li.withConfig({
+  displayName: "Item__LiBox",
+  componentId: "c3scat-0"
+})(_sx.default);
+
+const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
+
+exports.TEXT_ROW_HEIGHT = TEXT_ROW_HEIGHT;
+
+const Item = /*#__PURE__*/_react.default.forwardRef(({
+  variant = 'default',
+  disabled = false,
+  selected = undefined,
+  onSelect,
+  sx: sxProp = {},
+  id,
+  _PrivateItemWrapper,
+  ...props
+}, forwardedRef) => {
+  const {
+    variant: listVariant,
+    showDividers
+  } = _react.default.useContext(_List.ListContext);
+
+  const {
+    theme
+  } = (0, _ThemeProvider.useTheme)();
+  const styles = {
+    display: 'flex',
+    paddingX: 2,
+    fontSize: 1,
+    paddingY: '6px',
+    // custom value off the scale
+    lineHeight: TEXT_ROW_HEIGHT,
+    minHeight: 5,
+    marginX: listVariant === 'inset' ? 2 : 0,
+    borderRadius: listVariant === 'inset' ? 2 : 0,
+    transition: 'background 33.333ms linear',
+    color: getVariantStyles(variant, disabled).color,
+    cursor: 'pointer',
+    '&[aria-disabled]': {
+      cursor: 'not-allowed'
+    },
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.hoverBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
+      },
+      ':focus:not([data-focus-visible-added])': {
+        backgroundColor: `actionListItem.${variant}.selectedBg`,
+        color: getVariantStyles(variant, disabled).hoverColor,
+        outline: 'none'
+      },
+      '&[data-focus-visible-added]': {
+        // we don't use :focus-visible because not all browsers (safari) have it yet
+        outline: 'none',
+        border: `2 solid`,
+        boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
+      },
+      ':active:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.activeBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
+      }
+    },
+
+    /** Divider styles */
+    '[data-component="ActionList.Item--DividerContainer"]': {
+      position: 'relative'
+    },
+    '[data-component="ActionList.Item--DividerContainer"]::before': {
+      content: '" "',
+      display: 'block',
+      position: 'absolute',
+      width: '100%',
+      top: '-7px',
+      border: '0 solid',
+      borderTopWidth: showDividers ? `1px` : '0',
+      borderColor: 'var(--divider-color, transparent)'
+    },
+    // show between 2 items
+    ':not(:first-of-type)': {
+      '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
+    },
+    // hide divider after dividers & group header, with higher importance!
+    '[data-component="ActionList.Divider"] + &': {
+      '--divider-color': 'transparent !important'
+    },
+    // hide border on current and previous item
+    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
+      '--divider-color': 'transparent'
+    },
+    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+      '--divider-color': 'transparent'
+    }
+  };
+
+  const clickHandler = _react.default.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
+    if (disabled) return;
+    if (!event.defaultPrevented) onSelect(event);
+  }, [onSelect, disabled]);
+
+  const keyPressHandler = _react.default.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
+    if (disabled) return;
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onSelect(event);
+    }
+  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+
+
+  const labelId = (0, _ssr.useSSRSafeId)(id);
+  const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
+  const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
+  const ItemWrapper = _PrivateItemWrapper || _react.default.Fragment;
+  return /*#__PURE__*/_react.default.createElement(Slots, {
+    context: {
+      variant,
+      disabled,
+      inlineDescriptionId,
+      blockDescriptionId
+    }
+  }, slots => /*#__PURE__*/_react.default.createElement(LiBox, _extends({
+    ref: forwardedRef,
+    sx: (0, _sx.merge)(styles, sxProp),
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler,
+    "aria-selected": selected,
+    "aria-disabled": disabled ? true : undefined,
+    tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
+    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
+  }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
+    selected: selected
+  }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    "data-component": "ActionList.Item--DividerContainer",
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
+    if: Boolean(slots.TrailingVisual),
+    sx: {
+      display: 'flex',
+      flexGrow: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(ConditionalBox, {
+    if: Boolean(slots.InlineDescription),
+    sx: {
+      display: 'flex',
+      flexGrow: 1,
+      alignItems: 'baseline',
+      minWidth: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    id: labelId,
+    sx: {
+      flexGrow: slots.InlineDescription ? 0 : 1
+    }
+  }, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription))));
+});
+
+exports.Item = Item;
+Item.displayName = 'ActionList.Item';
+
+const ConditionalBox = props => {
+  const {
+    if: condition,
+    ...rest
+  } = props;
+  if (condition) return /*#__PURE__*/_react.default.createElement(_Box.default, rest, props.children);else return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+};

package/lib/ActionList2/LinkItem.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _sx = require("../sx");
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const LinkItem = /*#__PURE__*/_react.default.forwardRef(({
+  sx = {},
+  as: Component,
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    // occupy full size of Item
+    paddingX: 2,
+    paddingY: '6px',
+    // custom value off the scale
+    display: 'flex',
+    flexGrow: 1,
+    // full width
+    borderRadius: 2,
+    // inherit Item styles
+    color: 'inherit',
+    '&:hover': {
+      color: 'inherit',
+      textDecoration: 'none'
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Item, {
+    sx: {
+      paddingY: 0,
+      paddingX: 0
+    },
+    _PrivateItemWrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_Link.default, _extends({
+      as: Component,
+      sx: (0, _sx.merge)(styles, sx)
+    }, props, {
+      ref: forwardedRef
+    }), children)
+  }, props.children);
+});
+
+exports.LinkItem = LinkItem;

package/lib/ActionList2/List.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.ListContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireWildcard(require("../sx"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ListContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.ListContext = ListContext;
+
+const ListBox = _styledComponents.default.ul.withConfig({
+  displayName: "List__ListBox",
+  componentId: "cvbq60-0"
+})(_sx.default);
+
+const List = /*#__PURE__*/_react.default.forwardRef(({
+  variant = 'inset',
+  selectionVariant,
+  showDividers = false,
+  sx: sxProp = {},
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    margin: 0,
+    paddingInlineStart: 0,
+    // reset ul styles
+    paddingY: variant === 'inset' ? 2 : 0
+  };
+  return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
+    sx: (0, _sx.merge)(styles, sxProp)
+  }, props, {
+    ref: forwardedRef
+  }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
+    value: {
+      variant,
+      selectionVariant,
+      showDividers
+    }
+  }, props.children));
+});
+
+exports.List = List;
+List.displayName = 'ActionList';

package/lib/ActionList2/Selection.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Selection = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Visuals = require("./Visuals");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Selection = ({
+  selected
+}) => {
+  const {
+    selectionVariant: listSelectionVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const {
+    selectionVariant: groupSelectionVariant
+  } = _react.default.useContext(_Group.GroupContext);
+  /** selectionVariant in Group can override the selectionVariant in List root */
+
+
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
+
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+    return null;
+  }
+
+  if (selectionVariant === 'single') {
+    return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
+  }
+  /**
+   * selectionVariant is multiple
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, {
+    sx: {
+      rect: {
+        fill: selected ? 'accent.fg' : 'canvas.default',
+        stroke: selected ? 'accent.fg' : 'border.default',
+        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+
+      },
+      path: {
+        fill: 'fg.onEmphasis',
+        boxShadow: 'shadow.small',
+        opacity: selected ? 1 : 0
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  })));
+};
+
+exports.Selection = Selection;
+Selection.displayName = "Selection";