refactor: use explicit import for lodash (to reduce bundling whole lib)

react/.storybook/foundations/Colours/ColourTable.tsx

@@ -8,7 +8,7 @@ import {
   Tr,
   useTheme,
 } from '@chakra-ui/react'
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 export interface ColourTableProps {
   label: string

react/.storybook/foundations/Typography/Typography.tsx

@@ -10,7 +10,7 @@ import {
   Text,
   useTheme,
 } from '@chakra-ui/react'
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 export const Typography: FC = () => {
   const theme = useTheme()

react/.storybook/introduction/Principles/Principles.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 
 import { Principles as Component } from './Principles'
 
@@ -10,5 +10,5 @@ export default {
   },
 } as Meta
 
-export const Principles: Story = () => <Component />
+export const Principles: StoryFn = () => <Component />
 Principles.storyName = 'Guiding principles'

react/package.json

@@ -5,6 +5,7 @@
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",
   "license": "SEE LICENSE IN LICENSE.md",
+  "sideEffects": false,
   "files": [
     "build/main",
     "build/module",

react/src/Attachment/Attachment.tsx

@@ -16,7 +16,7 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 import { dataAttr } from '@chakra-ui/utils'
-import { omit } from 'lodash'
+import omit from 'lodash/omit'
 import type { Promisable } from 'type-fest'
 
 import { getErrorMessage } from './utils/getErrorMessage'

react/src/AvatarMenu/AvatarMenu.tsx

@@ -8,7 +8,7 @@ import {
   MenuProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { Menu, MenuButtonProps } from '~/Menu'
 

react/src/Calendar/CalendarBase/CalendarContext.tsx

@@ -15,7 +15,7 @@ import {
   startOfDay,
 } from 'date-fns'
 import { Props as DayzedProps, RenderProps, useDayzed } from 'dayzed'
-import { inRange } from 'lodash'
+import inRange from 'lodash/inRange'
 import { customAlphabet } from 'nanoid/non-secure'
 import { useKey } from 'rooks'
 

react/src/Calendar/CalendarBase/DayOfMonth.tsx

@@ -20,7 +20,7 @@ import {
   isSunday,
 } from 'date-fns'
 import { DateObj } from 'dayzed'
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 import { useCalendar } from './CalendarContext'
 

react/src/DatePicker/utils/pickCalendarProps.ts

@@ -1,4 +1,4 @@
-import { pick } from 'lodash'
+import pick from 'lodash/pick'
 
 import { DatePickerProps } from '../DatePicker'
 

react/src/FormControl/FormHelperText/FormHelperText.tsx

@@ -6,7 +6,7 @@ import {
   ThemingProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { BxsCheckCircle } from '~/icons'
 

react/src/FormControl/FormLabel/FormLabel.tsx

@@ -16,7 +16,7 @@ import {
   useMultiStyleConfig,
   VisuallyHidden,
 } from '@chakra-ui/react'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { BxsHelpCircle } from '~/icons/BxsHelpCircle'
 import { Tooltip } from '~/Tooltip'

react/src/Input/Input.tsx

@@ -8,7 +8,8 @@ import {
   InputRightElement,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { merge, omit } from 'lodash'
+import merge from 'lodash/merge'
+import omit from 'lodash/omit'
 
 import { BxsCheckCircle } from '~/icons/BxsCheckCircle'
 

react/src/Pagination/usePaginationRange.ts

@@ -5,7 +5,7 @@
  */
 
 import { useMemo } from 'react'
-import { range } from 'lodash'
+import range from 'lodash/range'
 
 interface UsePaginationRangeProps<T = string> {
   /**

react/src/Sidebar/SidebarItem.tsx

@@ -7,7 +7,7 @@ import {
   Icon,
 } from '@chakra-ui/react'
 import { dataAttr, isFunction } from '@chakra-ui/utils'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { useSidebarNestContext, useSidebarStyles } from './SidebarContext'
 import type { BaseSidebarItemProps } from './types'

react/src/Sidebar/SidebarList.tsx

@@ -11,7 +11,7 @@ import {
   type UseDisclosureReturn,
 } from '@chakra-ui/react'
 import { dataAttr, isFunction } from '@chakra-ui/utils'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { ToggleChevron } from '~/icons'
 

react/src/Tile/Tile.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { ListItem, Stack, UnorderedList } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
-import { values } from 'lodash'
+import values from 'lodash/values'
 
 import { Badge } from '~/Badge'
 import { BxLockAlt, BxMailSend } from '~/icons'

react/src/Tile/Tile.tsx

@@ -13,7 +13,7 @@ import {
   ThemingProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 const [TileStylesProvider, useTileStyles] = createStylesContext('Tile')
 

react/src/Toast/useToast.ts

@@ -4,7 +4,7 @@ import {
   useToast as useChakraToast,
   UseToastOptions as ChakraUseToastOptions,
 } from '@chakra-ui/react'
-import { omit } from 'lodash'
+import omit from 'lodash/omit'
 
 import { Toast } from './Toast'
 

react/src/icons/BxCheckAnimated.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import { omit } from 'lodash'
+import omit from 'lodash/omit'
 
 // icon:bx-check | Boxicons https://boxicons.com/ | Atisa
 /**

react/src/theme/components/Button.ts

@@ -1,7 +1,7 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
 import { getColor, StyleFunctionProps } from '@chakra-ui/theme-tools'
 import { memoizedGet as get } from '@chakra-ui/utils'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { layerStyles } from '../layerStyles'
 import { getContrastColor } from '../utils'

react/src/theme/components/MultiSelect.ts

@@ -3,7 +3,8 @@ import {
   mergeThemeOverride,
 } from '@chakra-ui/react'
 import { anatomy } from '@chakra-ui/theme-tools'
-import { omit, pick } from 'lodash'
+import omit from 'lodash/omit'
+import pick from 'lodash/pick'
 
 import { Input } from './Input'
 import { comboboxParts, SingleSelect } from './SingleSelect'

react/src/theme/components/SingleSelect.ts

@@ -1,6 +1,6 @@
 import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'
 import { anatomy } from '@chakra-ui/theme-tools'
-import { merge } from 'lodash'
+import merge from 'lodash/merge'
 
 import { Input } from './Input'
 import { Menu } from './Menu'