@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8

package/stories/Radio/Radio.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
+import React from 'react'
 
-import { Radio, StackView, Typography } from '../../lib'
+import { Radio, RadioGroup, Typography } from '../../lib'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {
@@ -55,40 +55,27 @@ WithDescription.args = {
   description: 'This is a description'
 }
 
-export const RadioGroup = (args) => {
-  const [value, setValue] = useState(1)
-  const handleChange = (val) => () => setValue(val)
-
-  return (
-    <Container>
-      <StackView accessibilityRole="radiogroup">
-        <Radio
-          {...args}
-          checked={value === 1}
-          label="Radio1"
-          onChange={handleChange(1)}
-          name="group"
-          value={1}
-        />
-        <Radio
-          {...args}
-          checked={value === 2}
-          label="Radio2"
-          onChange={handleChange(2)}
-          name="group"
-          value={2}
-        />
-        <Radio
-          {...args}
-          checked={value === 3}
-          label="Radio3"
-          onChange={handleChange(3)}
-          name="group"
-          value={3}
-        />
-      </StackView>
-    </Container>
-  )
+export const RadioGroupStory = (args) => <RadioGroup {...args} />
+RadioGroupStory.storyName = 'RadioGroup'
+RadioGroupStory.args = {
+  items: [
+    {
+      label: 'Radio Card 1'
+    },
+    {
+      label: 'Radio Card 2'
+    },
+    {
+      label: 'Radio Card 3'
+    },
+    {
+      label: 'Radio Card 4'
+    }
+  ],
+  legend: 'Choose a radio button.',
+  hint: 'Of the radio buttons below, choose one.',
+  tooltip: 'Decide which radio button you like best, then press it.',
+  name: 'example'
 }
 
 export const ParentTypes = (args) => (

package/stories/RadioCard/RadioCard.stories.jsx

@@ -0,0 +1,98 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { RadioCard, RadioCardGroup, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/RadioCard',
+  component: RadioCard
+}
+
+const additionalContent = (
+  <>
+    <Typography>First line</Typography>
+    <Typography>Second line</Typography>
+  </>
+)
+
+export const Default = (args) => <RadioCard {...args} />
+Default.args = {
+  title: 'Radio card',
+  children: additionalContent
+}
+Default.storyName = 'RadioCard'
+
+export const RadioCardGroupStory = (args) => <RadioCardGroup {...args} />
+RadioCardGroupStory.storyName = 'RadioCardGroup'
+RadioCardGroupStory.args = {
+  items: [
+    {
+      title: 'Radio Card 1',
+      content: (
+        <>
+          <Typography>First line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 2',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 3',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+          <Typography>Third line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 4',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+        </>
+      )
+    },
+    {
+      title: 'Radio Card 5',
+      content: (
+        <>
+          <Typography>First line</Typography>
+          <Typography>Second line</Typography>
+          <Typography>Third line</Typography>
+          <Typography>Fourth line</Typography>
+        </>
+      )
+    }
+  ],
+  legend: 'Choose a radio card.',
+  hint: 'Of the radio cards below, choose one.',
+  tooltip: 'Decide which radio card you like best, then press it.',
+  name: 'example'
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Radio" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <RadioCard {...args} variant={variant} title={label}>
+          {additionalContent}
+        </RadioCard>
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = {
+  defaultChecked: undefined
+}

package/stories/Search/Search.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Search } from '../../lib'
+
+export default {
+  title: 'Base/Search',
+  component: Search
+}
+
+const Template = (args) => <Search {...args} />
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Inactive = Template.bind({})
+Inactive.args = { inactive: true }

package/stories/StepTracker/StepTracker.stories.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+
+import { Box, Button, StackView, StepTracker } from '../../lib'
+
+const steps = [
+  'Plans & Addons',
+  'Account Creation',
+  'Payment Setup',
+  'Shipping Address',
+  'Billing Address',
+  'Submit'
+]
+const longTitle = 'Example of a really long step title that wraps'
+
+export default {
+  title: 'Base/StepTracker',
+  component: StepTracker,
+  args: {
+    steps
+  },
+  argTypes: { current: { control: { type: 'range', max: steps.length } } }
+}
+
+const Template = (args) => <StepTracker {...args} />
+
+export const Default = Template.bind({})
+
+export const WithoutStepLabels = Template.bind({})
+WithoutStepLabels.args = {
+  tokens: { showStepTrackerLabel: true, showStepLabel: false }
+}
+
+export const WithHiddenStepName = Template.bind({})
+WithHiddenStepName.args = {
+  tokens: { showStepTrackerLabel: false, showStepLabel: true, showStepName: false }
+}
+
+export const WithLongStepTitle = Template.bind({})
+WithLongStepTitle.args = {
+  steps: Object.values({ ...steps, 2: longTitle }),
+  tokens: { showStepTrackerLabel: false, showStepLabel: true }
+}
+
+export const WithControls = (args) => {
+  const [current, setCurrent] = useState(0)
+  const isFirst = current === 0
+  const isLast = current === steps.length - 1
+  const handlePrev = () => {
+    if (!isFirst) setCurrent(current - 1)
+  }
+  const handleNext = () => {
+    if (!isLast) setCurrent(current + 1)
+  }
+
+  return (
+    <StackView>
+      <StepTracker {...args} current={current} />
+      <Box top={4}>
+        <StackView direction="row" tokens={{ justifyContent: 'space-around' }}>
+          <Button onPress={handlePrev} disabled={isFirst}>
+            Previous
+          </Button>
+          <Button onPress={handleNext} disabled={isLast}>
+            Next
+          </Button>
+        </StackView>
+      </Box>
+    </StackView>
+  )
+}

package/stories/Tabs/Tabs.stories.jsx

@@ -0,0 +1,97 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { Platform } from 'react-native'
+
+import { Link, StackView, Tabs, Typography } from '../../lib'
+
+export default {
+  title: 'Base/Tabs',
+  component: Tabs
+}
+
+export const Default = (args) => <Tabs {...args} />
+Default.storyName = 'Tabs'
+Default.args = {
+  items: [
+    { label: 'First item' },
+    { label: 'Second item' },
+    { label: 'Much longer third item' },
+    { label: 'Fourth item' },
+    { label: 'Fifth item' },
+    { label: 'Sixth item' },
+    { label: 'Seventh item' },
+    { label: 'Eighth item' },
+    { label: 'Ninth item' }
+  ]
+}
+
+export const TabsWithHref = (args) => <Tabs {...args} />
+TabsWithHref.args = {
+  items: [
+    { href: 'https://telus.com', label: 'First item' },
+    { href: 'https://telus.com', label: 'Second item' },
+    { href: 'https://telus.com', label: 'Much longer third item' },
+    { href: 'https://telus.com', label: 'Fourth item' },
+    { href: 'https://telus.com', label: 'Fifth item' },
+    { href: 'https://telus.com', label: 'Sixth item' },
+    { href: 'https://telus.com', label: 'Seventh item' },
+    { href: 'https://telus.com', label: 'Eighth item' },
+    { href: 'https://telus.com', label: 'Ninth item' }
+  ]
+}
+
+const loremIpsumArray = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. '
+  .repeat(5)
+  .split('. ')
+
+export const TabsControlled = (args) => {
+  const [page, setPage] = useState('1')
+
+  return (
+    <StackView space={4}>
+      <Tabs {...args} value={page} onChange={setPage} />
+      <Typography>This is some sample content for page {page}.</Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlled.args = {
+  items: [
+    { id: '1', label: 'First item' },
+    { id: '2', label: 'Second item' },
+    { id: '3', label: 'Much longer third item' },
+    { id: '4', label: 'Fourth item' },
+    { id: '5', label: 'Fifth item' },
+    { id: '6', label: 'Sixth item' },
+    { id: '7', label: 'Seventh item' },
+    { id: '8', label: 'Eighth item' },
+    { id: '9', label: 'Ninth item' }
+  ]
+}
+
+export const TabsControlledHashes = ({ items, ...args }) => {
+  const [page, setPage] = useState('1')
+  if (Platform.OS !== 'web') return <Typography>Hashes are only supported on Web.</Typography>
+  const linkTarget = Number(page) >= items.length ? '#item1' : `#item${Number(page) + 1}`
+  return (
+    <StackView space={4}>
+      <Tabs {...args} items={items} value={page} onChange={setPage} />
+      <Typography>
+        This is some sample content for page {page}. Try this ordinary hash link to{' '}
+        <Link href={linkTarget}>{linkTarget}</Link>.
+      </Typography>
+      <Typography>
+        {`${loremIpsumArray.slice(Number(page) - 1, Number(page) + 3).join('. ')}...`}
+      </Typography>
+    </StackView>
+  )
+}
+TabsControlledHashes.propTypes = Tabs.propTypes
+TabsControlledHashes.args = {
+  items: TabsControlled.args.items.map((item) => ({
+    ...item,
+    href: `#item${item.id}`
+  }))
+}

package/__fixtures__/accessible.icon.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24">
-  <path
-    d="M4.2311 12.2566L4.8931 12.9186C4.2651 13.8746 3.9111 14.9836 3.9111 16.1536C3.9111 17.7386 4.5291 19.2316 5.6511 20.3536C6.7731 21.4746 8.2641 22.0926 9.8501 22.0926C10.9235 22.0926 11.9432 21.7951 12.842 21.2619L13.0841 21.1106L13.7311 21.7556C12.5641 22.5666 11.2141 22.9996 9.8501 22.9996C8.0961 22.9996 6.3411 22.3316 5.0061 20.9966C3.7121 19.7026 2.9991 17.9826 2.9991 16.1536C2.9991 14.8388 3.37676 13.586 4.06644 12.5034L4.2311 12.2566ZM10.0407 2.26661C10.2191 2.26661 10.3994 2.30373 10.5683 2.37899L10.743 2.4718C11.3183 2.80605 16.6402 5.89799 16.6497 5.90461C16.9567 6.09661 17.1567 6.39661 17.2287 6.72661C17.3529 7.16041 17.2827 7.64038 17.0086 8.02655L16.9097 8.15161L14.2287 10.8896C14.3347 10.9776 14.4398 11.0683 14.5423 11.1634L14.7084 11.3251L14.7217 11.3406L19.8577 10.7376L19.9287 10.7356C20.2777 10.7356 20.6147 10.8766 20.8597 11.1286C21.0898 11.364 21.2204 11.6759 21.228 12.0008L21.2237 12.1406L20.8337 18.8506C20.7837 19.6246 20.1427 20.2196 19.3787 20.2196L19.2847 20.2166C18.5271 20.1677 17.9457 19.55 17.9233 18.8064L17.9257 18.6656L18.2627 14.2006C18.2707 14.1446 18.2257 14.0976 18.1737 14.0976L16.4637 14.3986C16.9377 16.196 16.6627 18.145 15.6541 19.7655L15.4887 20.0186L14.8287 19.3596C15.4437 18.4086 15.7897 17.3106 15.7897 16.1526C15.7897 14.5676 15.1717 13.0746 14.0507 11.9536C12.9277 10.8316 11.4367 10.2136 9.8497 10.2136C8.78912 10.2136 7.77727 10.5043 6.88425 11.0257L6.6437 11.1736L5.9957 10.5256C6.89297 9.90834 7.89686 9.51172 8.93523 9.36958L9.2477 9.33461L11.7547 6.55661L10.2547 5.68061L8.3307 7.30961C8.0417 7.59861 7.6647 7.74361 7.2887 7.74361C6.9127 7.74361 6.5377 7.59961 6.2497 7.31161C5.70782 6.76973 5.69593 5.8886 6.17199 5.30432L6.2737 5.19161L9.1757 2.59561C9.4197 2.37861 9.7277 2.26661 10.0407 2.26661ZM20.2817 12.6526C20.3768 11.8055 19.8748 11.6893 19.5319 11.6977L19.4697 11.7006L15.4947 12.1676C15.7179 12.506 15.9053 12.8694 16.0711 13.2408L16.1917 13.5206L17.9407 13.2126L18.0177 13.1906L18.1737 13.1866C18.4617 13.1866 18.7357 13.3116 18.9277 13.5276C19.0777 13.7009 19.1638 13.9187 19.1739 14.1445L19.1707 14.2806L18.8337 18.7346C18.8247 18.8706 18.8727 19.0136 18.9697 19.1236C19.0457 19.2108 19.1454 19.2698 19.257 19.2951L19.3427 19.3076C19.6316 19.3076 19.8517 19.1283 19.9104 18.8861L19.9247 18.7926L20.2817 12.6526ZM10.0407 3.17761C9.9687 3.17761 9.89895 3.1973 9.83862 3.23414L9.7817 3.27661L6.9047 5.84961C6.6897 6.07961 6.6827 6.45661 6.8927 6.66661C7.0007 6.77361 7.1397 6.83261 7.2887 6.83261C7.4071 6.83261 7.52166 6.79485 7.61753 6.72445L7.6857 6.66561L7.7127 6.63861L10.1567 4.56861L13.1807 6.33461L10.5177 9.28661C11.4555 9.38172 12.3648 9.67199 13.2008 10.1371L13.5107 10.3196L16.2377 7.53561C16.3452 7.40644 16.393 7.24116 16.3729 7.07565L16.3527 6.97661L16.3397 6.92261C16.3267 6.86361 16.2887 6.75661 16.1747 6.68161L10.2347 3.23061C10.1757 3.19561 10.1087 3.17761 10.0407 3.17761ZM17.7427 0.999908C18.9037 0.999908 19.8487 1.94491 19.8487 3.10591C19.8487 4.26691 18.9037 5.21291 17.7427 5.21291C16.5817 5.21291 15.6367 4.26691 15.6367 3.10591C15.6367 1.94491 16.5817 0.999908 17.7427 0.999908ZM17.7427 1.91091C17.0837 1.91091 16.5477 2.44691 16.5477 3.10591C16.5477 3.76491 17.0837 4.30191 17.7427 4.30191C18.4017 4.30191 18.9377 3.76491 18.9377 3.10591C18.9377 2.44691 18.4017 1.91091 17.7427 1.91091Z"
-    fillRule="evenodd"
-  />
-</svg>

package/babel.config.json

@@ -1,8 +0,0 @@
-{
-  "presets": [["@babel/preset-react", { "useBuiltIns": true }]],
-  "env": {
-    "test": {
-      "presets": ["module:metro-react-native-babel-preset"]
-    }
-  }
-}

package/lib/ActivityIndicator/Spinner.web.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
-const animationProps = {
-  begin: '0s',
-  dur: `${DURATION}ms`,
-  fill: 'freeze',
-  repeatCount: 'indefinite'
-};
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-
-const Spinner = ({
-  size,
-  color,
-  thickness,
-  label
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: `${size}px`,
-  height: `${size}px`,
-  viewBox: "0 0 48 48",
-  "aria-valuetext": label,
-  role: "progressbar",
-  "aria-busy": true
-}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("animateTransform", Object.assign({
-  attributeName: "transform",
-  type: "rotate",
-  values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`
-}, animationProps)), /*#__PURE__*/React.createElement("circle", {
-  fill: "none",
-  stroke: color,
-  strokeWidth: thickness * 48 / size,
-  strokeLinecap: "round",
-  cx: "24",
-  cy: "24",
-  r: "20",
-  strokeDasharray: [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-  strokeDashoffset: 0
-}, /*#__PURE__*/React.createElement("animate", Object.assign({
-  attributeName: "stroke-dashoffset",
-  values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`
-}, animationProps, bezierProps)), /*#__PURE__*/React.createElement("animate", Object.assign({
-  attributeName: "stroke-dasharray",
-  values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`
-}, animationProps, bezierProps)))));
-
-Spinner.propTypes = propTypes;
-export default Spinner;

package/lib/Checkbox/CheckboxInput.web.js

@@ -1,57 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-/**
- * On Web we need to include an actual input but hide it.
- */
-
-const CheckboxInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
-  const handleClick = event => {
-    // Cancel the click dispatched via the label tag, since it's already wrapped
-    // in <Pressable>
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  return /*#__PURE__*/React.createElement("input", {
-    checked: isControlled ? checked : undefined,
-    defaultChecked: isControlled ? undefined : defaultChecked,
-    disabled: disabled,
-    hidden: true,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onClick: handleClick,
-    ref: ref,
-    type: "checkbox",
-    value: value
-  });
-});
-CheckboxInput.displayName = 'CheckboxInput';
-CheckboxInput.propTypes = {
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  isControlled: PropTypes.bool.isRequired,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string
-};
-CheckboxInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
-export default CheckboxInput;

package/lib/InputLabel/LabelContent.web.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function LabelContent({
-  children,
-  forId
-}) {
-  return /*#__PURE__*/React.createElement("label", {
-    htmlFor: forId
-  }, children);
-}
-
-export default LabelContent;
-LabelContent.propTypes = {
-  children: PropTypes.string,
-  forId: PropTypes.string
-};

package/lib/Link/InlinePressable.web.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-/**
- * @typedef {import('react-native').PressableProps} PressableProps
- */
-
-/**
- * InlinePressable is an alternative to React Native's Pressable that works better when nested
- * inline inside Text. It accepts the same props as React Native's Pressable.
- *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
- * @param {PressableProps} PressableProps
- */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-
-const InlinePressable = ({
-  children,
-  style,
-  ...props
-}) => /*#__PURE__*/React.createElement(Pressable, Object.assign({
-  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style]
-}, props), pressState => typeof children === 'function' ? children(pressState) : children);
-
-const staticStyles = StyleSheet.create({
-  inline: {
-    // Stop Pressable defaulting to (block) flex
-    display: 'inline-flex'
-  }
-});
-export default InlinePressable;

package/lib/Radio/RadioInput.web.js

@@ -1,59 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-/**
- * On Web we need to include an actual input but hide it.
- */
-
-const RadioInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
-  const handleClick = event => {
-    // Cancel the click dispatched via the label tag, since it's already wrapped
-    // in <Pressable>
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  return /*#__PURE__*/React.createElement("input", {
-    checked: isControlled ? checked : undefined,
-    defaultChecked: isControlled ? undefined : defaultChecked,
-    disabled: disabled,
-    hidden: true,
-    id: id,
-    name: name,
-    onChange: onChange,
-    onClick: handleClick,
-    ref: ref,
-    type: "radio",
-    value: value
-  });
-});
-RadioInput.displayName = 'Radio';
-RadioInput.propTypes = {
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  isControlled: PropTypes.bool,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-};
-export default RadioInput;

package/lib/Select/Group.web.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-
-const Group = ({
-  children,
-  label
-}) => {
-  return /*#__PURE__*/React.createElement("optgroup", {
-    label: label
-  }, children);
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

package/lib/Select/Item.web.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Item = ({
-  children,
-  value
-}) => /*#__PURE__*/React.createElement("option", {
-  value: value
-}, children);
-
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};