@workday/canvas-kit-react 7.0.0-alpha.106-next.2 → 7.0.0-alpha.129-next.3

package/layout/lib/utils/position.ts

@@ -3,14 +3,14 @@ import {
   PartialEmotionCanvasTheme,
   useTheme,
 } from '@workday/canvas-kit-react/common';
-import {PropertyPosition, PropertyZIndex} from './types';
+import {Property} from 'csstype';
 
 /** style props to for standard position properties */
 export type PositionStandardProps = {
   /** sets `position` property  */
-  position?: PropertyPosition;
+  position?: Property.Position;
   /** sets `zIndex` property  */
-  zIndex?: PropertyZIndex;
+  zIndex?: Property.ZIndex;
   /** sets `top` property  */
   top?: number | string;
   /** sets `right` property (no bidirectional support) */

package/layout/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/layout",
   "module": "../dist/es6/layout",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/layout"
 }

package/loading-animation/index.ts

@@ -1,5 +1,3 @@
-import LoadingDots from './lib/LoadingDots';
+import {LoadingDots} from './lib/LoadingDots';
 
-export {LoadingDots as LoadingAnimation, LoadingDots};
-export default LoadingDots;
-export * from './lib/LoadingDots';
+export {LoadingDots as LoadingAnimation};

package/loading-animation/lib/LoadingDots.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/react';
-import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 
 /**
@@ -60,7 +60,7 @@ const Container = styled('div')({
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
+export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
   const {...elemProps} = props;
 
   return (

package/loading-animation/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/loading-animation",
   "module": "../dist/es6/loading-animation",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/loading-animation"
 }

package/menu/lib/MenuList.tsx

@@ -11,11 +11,12 @@ import {Stack} from '@workday/canvas-kit-react/layout';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+export interface MenuListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
 }
 
 export const useMenuList = createElemPropsHook(useMenuModel)(model => {

package/menu/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/menu",
   "module": "../dist/es6/menu",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/menu"
 }

package/modal/lib/ModalOverlay.tsx

@@ -14,9 +14,7 @@ import styled from '@emotion/styled';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
 
-export interface ModalOverlayProps extends BoxProps {
-  children: React.ReactNode;
-}
+export interface ModalOverlayProps extends BoxProps {}
 
 const fadeIn = keyframes`
   from {
@@ -86,7 +84,7 @@ const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
   modelHook: useModalModel,
   elemPropsHook: useModalOverlay,
-})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
+})<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
 
   const content = (

package/modal/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/modal",
   "module": "../dist/es6/modal",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/modal"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.106-next.2+ab2883e3",
+  "version": "7.0.0-alpha.129-next.3+f4cdec5a",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/react"
   },
   "files": [
     "*/package.json",
@@ -40,7 +41,7 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^17.0 || ^18.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -48,13 +49,13 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.106-next.2+ab2883e3",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.106-next.2+ab2883e3",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.106-next.2+ab2883e3",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.129-next.3+f4cdec5a",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/design-assets-types": "^0.2.4",
+    "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
+    "csstype": "^3.0.2",
     "element-closest": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
@@ -69,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "ab2883e3305013c8a9048ea7b67d4012659c2516"
+  "gitHead": "f4cdec5aa17c18b03695a3c99417e384fd9aecdc"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -6,7 +6,7 @@ import {PaginationModel} from './types';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
-export interface AdditionalDetailsProps extends FlexProps {
+export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
   children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
   model: PaginationModel;
   shouldAnnounceToScreenReader?: boolean;

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -4,7 +4,8 @@ import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 import {PaginationModel} from '../types';
 import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
-export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface GoToLabelProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
   model: PaginationModel;
   /**
    * Accepts child elements or a render prop.

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
+import {EmotionCanvasTheme, styled, useTheme} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
@@ -19,22 +19,27 @@ const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   }
 );
 
-const getPaginationButtonColors = (toggled: boolean) => {
+const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
   return {
     default: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     hover: {
-      background: toggled ? colors.blueberry400 : colors.soap300,
+      background: toggled ? themePrimary.main : colors.soap300,
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     active: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     focus: {
-      background: toggled ? colors.blueberry400 : 'transparent',
+      background: toggled ? themePrimary.main : 'transparent',
       label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
     },
     disabled: {
@@ -56,6 +61,7 @@ export const PageButton = ({
   ...elemProps
 }: PageButtonProps) => {
   const isCurrentPage = pageNumber === model.state.currentPage;
+  const theme = useTheme();
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClick?.(e);
@@ -65,7 +71,7 @@ export const PageButton = ({
   return (
     <StyledPageButton
       aria-current={isCurrentPage ? 'page' : undefined}
-      colors={getPaginationButtonColors(isCurrentPage)}
+      colors={getPaginationButtonColors(isCurrentPage, theme)}
       aria-pressed={undefined}
       onClick={handleClick}
       toggled={isCurrentPage}

package/pagination/lib/Pagination/PageList.tsx

@@ -4,7 +4,7 @@ import {PaginationModel} from './types';
 import {ListItem, ListItemProps} from './common/List';
 import {HStack, HStackProps} from '@workday/canvas-kit-react/layout';
 
-export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing' | 'children'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }

package/pagination/lib/Pagination/common/useLiveRegion.tsx

@@ -1,7 +1,6 @@
 type UseLiveRegionConfig = {
   'aria-atomic'?: React.AriaAttributes['aria-atomic'];
   'aria-live'?: 'polite' | 'assertive';
-  'aria-relevant'?: React.AriaAttributes['aria-relevant'];
   role?: 'status' | 'alert' | 'log';
   shouldAnnounceToScreenReader?: boolean;
 };
@@ -12,7 +11,6 @@ export function useLiveRegion(config = {} as UseLiveRegionConfig) {
     return {
       'aria-atomic': true,
       'aria-live': 'polite',
-      'aria-relevant': true,
       role: 'status',
       ...restConfig,
     } as UseLiveRegionConfig;

package/pagination/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/pagination",
   "module": "../dist/es6/pagination",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/pagination"
 }

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -12,7 +12,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen) {
         model.events.hide(event);
       }

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -16,7 +16,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -15,7 +15,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/popup/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/popup",
   "module": "../dist/es6/popup",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/popup"
 }

package/radio/index.ts

@@ -1,7 +1,2 @@
-import Radio from './lib/Radio';
-
-export default Radio;
-export {Radio};
-export {default as RadioGroup} from './lib/RadioGroup';
 export * from './lib/Radio';
 export * from './lib/RadioGroup';

package/radio/lib/Radio.tsx

@@ -8,7 +8,8 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
+import {
+  canvas,
   borderRadius,
   colors,
   inputColors,
@@ -48,6 +49,7 @@ export interface RadioProps extends Themeable {
    * The value of the Radio button.
    */
   value?: string;
+  variant?: 'inverse' | undefined;
 }
 
 const radioBorderRadius = 9;
@@ -77,16 +79,20 @@ const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   width: radioWidth,
 });
 
-const RadioRipple = styled('span')<Pick<RadioProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: radioHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: radioWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: radioHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: radioWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 const RadioInput = styled('input')<RadioProps & StyledType>(
   {
@@ -105,6 +111,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {
@@ -134,34 +141,68 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // input (which is visually hidden)
     '&:hover ~ div:first-of-type': {
       backgroundColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.frenchVanilla100
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.background
         : 'white',
       borderColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.soap300
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
         : inputColors.hoverBorder,
       borderWidth: '1px',
     },
     '&:focus, &focus:hover': {
       '& ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : themeFocusOutline,
         borderWidth: '2px',
+        borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
+        boxShadow: 'none',
+        ...focusRing({
+          width: variant === 'inverse' ? 2 : 0,
+          separation: 0,
+          animate: false,
+          innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+        }),
       },
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({separation: 2, outerColor: themeFocusOutline}),
+      ...focusRing({
+        separation: 2,
+        width: 2,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderWidth: '2px',
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        ...focusRing({width: 0, outerColor: themeFocusOutline}),
+        ...focusRing({
+          width: 0,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderWidth: '1px',
-        borderColor: checked ? themePrimary.main : inputColors.border,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : variant === 'inverse'
+          ? colors.soap300
+          : inputColors.hoverBorder,
       },
     }),
   })
@@ -187,6 +228,7 @@ const RadioBackground = styled('div')<RadioProps>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {primary: themePrimary},
@@ -194,19 +236,26 @@ const RadioBackground = styled('div')<RadioProps>(
     },
   }) => ({
     borderColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.soap300
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.border
+      : variant === 'inverse'
+      ? colors.soap300
       : inputColors.border,
     backgroundColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.frenchVanilla100
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.background
       : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
   })
 );
 
-const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
+const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   {
     borderRadius: radioBorderRadius,
     display: 'flex',
@@ -216,8 +265,11 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,
@@ -225,18 +277,35 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean}>(
+const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: radioLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Radio = createComponent('input')({
   displayName: 'Radio',
   Component: (
-    {checked = false, id, label = '', disabled, name, onChange, value, ...elemProps}: RadioProps,
+    {
+      checked = false,
+      id,
+      label = '',
+      disabled,
+      name,
+      onChange,
+      value,
+      variant,
+      ...elemProps
+    }: RadioProps,
     ref,
     Element
   ) => {
@@ -255,15 +324,16 @@ export const Radio = createComponent('input')({
             type="radio"
             value={value}
             aria-checked={checked}
+            variant={variant}
             {...elemProps}
           />
-          <RadioRipple />
-          <RadioBackground checked={checked} disabled={disabled}>
-            <RadioCheck checked={checked} />
+          <RadioRipple variant={variant} />
+          <RadioBackground checked={checked} disabled={disabled} variant={variant}>
+            <RadioCheck checked={checked} variant={variant} />
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled}>
+          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
             {label}
           </RadioLabel>
         )}
@@ -271,5 +341,3 @@ export const Radio = createComponent('input')({
     );
   },
 });
-
-export default Radio;

package/radio/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Radio, {RadioProps} from './Radio';
+import {Radio, RadioProps} from './Radio';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {
   ErrorType,
@@ -42,8 +42,12 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
     margin: `-${space.xxxs} -${space.xs}`,
     '& > div': {
       margin: `${space.xxs} ${space.zero}`,
+      alignItems: 'flex-start',
+      '> div': {
+        flex: '0 0 auto',
+      },
       '&:first-of-type': {
-        marginTop: space.xxxs,
+        marginTop: '6px',
       },
       '&:last-child': {
         marginBottom: space.xxxs,
@@ -117,4 +121,4 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 
 RadioGroup.ErrorType = ErrorType;
 
-export default RadioGroup;
+export {RadioGroup};

package/radio/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/radio",
   "module": "../dist/es6/radio",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/radio"
 }

package/segmented-control/index.ts

@@ -1,5 +1 @@
-import SegmentedControl from './lib/SegmentedControl';
-
-export default SegmentedControl;
-export {SegmentedControl};
 export * from './lib/SegmentedControl';

package/segmented-control/lib/SegmentedControl.tsx

@@ -78,5 +78,3 @@ export const SegmentedControl = createComponent('div')({
     Button: SegmentedControlButton,
   },
 });
-
-export default SegmentedControl;

package/segmented-control/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/segmented-control",
   "module": "../dist/es6/segmented-control",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/segmented-control"
 }

package/select/index.ts

@@ -1,7 +1,2 @@
-import Select from './lib/Select';
-
-export default Select;
-export {Select};
-export {default as SelectOption} from './lib/SelectOption';
 export * from './lib/Select';
 export * from './lib/SelectOption';