diff --git a/common/changes/pcln-design-system/chore-update-types_2024-06-24-22-12.json b/common/changes/pcln-design-system/chore-update-types_2024-06-24-22-12.json
new file mode 100644
index 0000000000..039129315b
--- /dev/null
+++ b/common/changes/pcln-design-system/chore-update-types_2024-06-24-22-12.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Update typings for several components",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
\ No newline at end of file
diff --git a/packages/core/src/BackgroundImage/BackgroundImage.tsx b/packages/core/src/BackgroundImage/BackgroundImage.tsx
index e6d5977a55..b94d18ae72 100644
--- a/packages/core/src/BackgroundImage/BackgroundImage.tsx
+++ b/packages/core/src/BackgroundImage/BackgroundImage.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled, { css } from 'styled-components'
 import {
   BorderRadiusProps,
@@ -33,7 +33,7 @@ const image = (props) => (props.image ? { backgroundImage: `url(${props.image})`
 export type BackgroundImageProps = WidthProps &
   HeightProps &
   BorderRadiusProps &
-  Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height'> & {
+  Omit<ComponentPropsWithoutRef<'img'>, 'width' | 'height'> & {
     variation?: 'parallax' | 'static'
     image?: string
     borderRadius?: string
diff --git a/packages/core/src/Box/Box.tsx b/packages/core/src/Box/Box.tsx
index 734a1f9dc1..1679d7fee6 100644
--- a/packages/core/src/Box/Box.tsx
+++ b/packages/core/src/Box/Box.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject } from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled from 'styled-components'
 import {
   BorderRadiusProps,
@@ -10,6 +10,7 @@ import {
   MinHeightProps,
   MinWidthProps,
   OverflowProps,
+  type ResponsiveValue,
   SizeProps,
   SpaceProps,
   TextAlignProps,
@@ -29,7 +30,7 @@ import {
   textAlign,
   width,
 } from 'styled-system'
-import type { ColorSchemeName } from '../theme/theme'
+import type { BorderRadius, BoxShadowSize, ColorSchemeName } from '../theme/theme'
 import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs'
 import { boxShadowAttrs } from '../utils/attrs/boxShadowAttrs'
 import { applyVariations, color, colorScheme } from '../utils/utils'
@@ -37,7 +38,7 @@ import { applyVariations, color, colorScheme } from '../utils/utils'
 /**
  * @public
  */
-export type BoxProps = BorderRadiusProps &
+export type BoxProps = Omit<BorderRadiusProps, 'borderRadius'> &
   BoxShadowProps &
   DisplayProps &
   HeightProps &
@@ -50,27 +51,15 @@ export type BoxProps = BorderRadiusProps &
   SpaceProps &
   TextAlignProps &
   WidthProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode | string
+  ComponentPropsWithRef<'div'> & {
+    children?: React.ReactNode
     as?: unknown
     role?: string
     bg?: string
     color?: string
     className?: string
-    borderRadiusSize?:
-      | 'none'
-      | 'xsm'
-      | 'sm'
-      | 'md'
-      | 'lg'
-      | 'xl'
-      | '2xl'
-      | '3xl'
-      | 'full'
-      | 'action-sm'
-      | 'action-md'
-      | 'action-lg'
-    boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'
+    borderRadius?: ResponsiveValue<BorderRadius> | BorderRadiusProps['borderRadius']
+    boxShadowSize?: ResponsiveValue<BoxShadowSize>
     boxShadowColor?:
       | 'primary'
       | 'secondary'
@@ -89,9 +78,16 @@ export type BoxProps = BorderRadiusProps &
       | 'border'
       | 'background'
     colorScheme?: ColorSchemeName
-    onClick?: (unknown) => unknown
-    ref?: MutableRefObject<HTMLDivElement>
-    rounded?: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'
+    rounded?:
+      | 'round'
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'left'
+      | 'topLeft'
+      | 'topRight'
+      | 'bottomRight'
+      | 'bottomLeft'
   }
 
 /**
diff --git a/packages/core/src/Breadcrumbs/BreadcrumbLink.tsx b/packages/core/src/Breadcrumbs/BreadcrumbLink.tsx
index e68aa49005..3cce7b06c5 100644
--- a/packages/core/src/Breadcrumbs/BreadcrumbLink.tsx
+++ b/packages/core/src/Breadcrumbs/BreadcrumbLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Flex } from '../Flex/Flex'
-import { Link } from '../Link/Link'
+import { Link, LinkProps } from '../Link/Link'
 import { Text } from '../Text/Text'
 
 /**
@@ -12,13 +12,13 @@ export type BreadcrumbLinkProps = React.RefAttributes<unknown> & {
   href?: string
   icon?: React.ReactNode
   label?: string
-  onClick?: (unknown) => unknown
+  onClick?: LinkProps['onClick']
 }
 
 /**
  * @public
  */
-export const BreadcrumbLink: React.FC<BreadcrumbLinkProps> = React.forwardRef(
+export const BreadcrumbLink: React.FC<BreadcrumbLinkProps> = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
   ({ className, isLastChild, href, icon, label, onClick }, ref) => {
     const linkColor = isLastChild ? 'text.dark' : 'text.light'
 
diff --git a/packages/core/src/Button/Button.spec.tsx b/packages/core/src/Button/Button.spec.tsx
index 5fdb1bb661..9651c00d3a 100644
--- a/packages/core/src/Button/Button.spec.tsx
+++ b/packages/core/src/Button/Button.spec.tsx
@@ -160,11 +160,7 @@ describe('Button', () => {
 
     expect(button).toHaveStyleRule('border-radius', borderRadius['action-md'])
 
-    rerender(
-      <Button size='small' borderRadius=''>
-        BUTTON
-      </Button>
-    )
+    rerender(<Button size='small'>BUTTON</Button>)
     expect(button).toHaveStyleRule('border-radius', borderRadius['action-sm'])
 
     rerender(
diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
index 5247d209e7..48a7d63f33 100644
--- a/packages/core/src/Button/Button.tsx
+++ b/packages/core/src/Button/Button.tsx
@@ -1,9 +1,10 @@
 import { themeGet } from '@styled-system/theme-get'
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import {
   BoxShadowProps,
   HeightProps,
+  type ResponsiveValue,
   SpaceProps,
   WidthProps,
   borderRadius,
@@ -17,6 +18,7 @@ import {
 import { Flex, type FlexProps } from '../Flex/Flex'
 import { boxShadowAttrs } from '../utils/attrs/boxShadowAttrs'
 import { applySizes, applyVariations, borders, getPaletteColor, getTextColorOn } from '../utils/utils'
+import { type BorderRadius, type BoxShadowSize } from '../theme'
 
 /**
  * @public
@@ -213,20 +215,16 @@ export type ButtonProps = WidthProps &
   HeightProps &
   SpaceProps &
   BoxShadowProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-  React.RefAttributes<unknown> & {
+  ComponentPropsWithRef<'button'> & {
     color?: string
     variation?: ButtonVariations
     size?: ButtonSizes | ButtonSizes[]
-    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''
-    boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'
+    borderRadius?: BorderRadius
+    boxShadowSize?: ResponsiveValue<BoxShadowSize>
     autoFocus?: boolean
-    IconLeft?: React.Component
-    IconRight?: React.Component
+    IconLeft?: React.Component | React.FC
+    IconRight?: React.Component | React.FC
     flexProps?: FlexProps
-    onClick?: (unknown) => unknown
-    onFocus?: (unknown) => unknown
-    onMouseEnter?: (unknown) => unknown
   }
 
 export const buttonStyles = css`
@@ -357,7 +355,7 @@ const ButtonIcon = ({ Component, ...props }) => {
 /**
  * @public
  */
-export const Button = React.forwardRef((props: ButtonProps, ref) => {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { children, ...restProps } = props
   const { IconLeft, IconRight, size = 'medium', flexProps = {} } = props
   const hasChildren = React.Children.toArray(children).length > 0
diff --git a/packages/core/src/Checkbox/Checkbox.tsx b/packages/core/src/Checkbox/Checkbox.tsx
index 1885fd32db..a797fdb431 100644
--- a/packages/core/src/Checkbox/Checkbox.tsx
+++ b/packages/core/src/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
 import { BoxChecked, BoxEmpty, BoxMinus } from 'pcln-icons'
-import React, { useEffect, useState } from 'react'
+import React, { type ComponentPropsWithRef, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { applyVariations, getPaletteColor } from '../utils/utils'
 
@@ -100,16 +100,14 @@ const StyledInput = styled.input`
 /**
  * @public
  */
-export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  id: string
+export type CheckboxProps = ComponentPropsWithRef<'input'> & {
+  id?: string
   indeterminate?: boolean
   size?: number
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   color?: string
   checked?: boolean
   defaultChecked?: boolean
   disabled?: boolean
-  ref?: React.Ref<HTMLInputElement>
   unselectedColor?: string
 }
 
diff --git a/packages/core/src/Chip/ButtonChip/ButtonChip.tsx b/packages/core/src/Chip/ButtonChip/ButtonChip.tsx
index c0997e5e07..f419f319a3 100644
--- a/packages/core/src/Chip/ButtonChip/ButtonChip.tsx
+++ b/packages/core/src/Chip/ButtonChip/ButtonChip.tsx
@@ -1,10 +1,9 @@
 import { ChevronDown } from 'pcln-icons'
 import React from 'react'
 import styled from 'styled-components'
-import { FontSizeProps, SpaceProps } from 'styled-system'
-import { Button } from '../../Button/Button'
+import { Button, type ButtonProps } from '../../Button/Button'
 import { getPaletteColor } from '../../utils/utils'
-import { ChipContent, type IconComponent } from '../ChipContent/ChipContent'
+import { ChipContent, type ChipContentProps } from '../ChipContent/ChipContent'
 import { ChipContentWrapper } from '../ChipContentWrapper'
 
 const ChipButton = styled(Button)`
@@ -34,29 +33,18 @@ export type ButtonChipVariation = 'outline' | 'shadow'
 /**
  * @public
  */
-export type ButtonChipProps = SpaceProps &
-  FontSizeProps & {
-    BridgeIcon?: IconComponent
-    bridgeLabel?: string
-    children?: React.ReactNode
-    color?: string
-    disabled?: boolean
-    expanded?: boolean
-    facet?: string
-    Icon?: IconComponent
-    id?: string
-    label?: string
-    selected?: boolean
-    showActionIcon?: boolean
-    onClick?: (unknown) => unknown
-    width?: string
-    variation?: ButtonChipVariation
-  }
+export type ButtonChipProps = Omit<ChipContentProps, 'action' | 'ref'> & {
+  expanded?: boolean
+  id?: string
+  showActionIcon?: boolean
+  onClick?: ButtonProps['onClick']
+  variation?: ButtonChipVariation
+}
 
 /**
  * @public
  */
-export const ButtonChip: React.FC<ButtonChipProps> = React.forwardRef(
+export const ButtonChip: React.FC<ButtonChipProps> = React.forwardRef<HTMLButtonElement, ButtonChipProps>(
   (
     {
       color,
diff --git a/packages/core/src/Chip/FilterChip/FilterChip.tsx b/packages/core/src/Chip/FilterChip/FilterChip.tsx
index 775faa5a53..b4264b7874 100644
--- a/packages/core/src/Chip/FilterChip/FilterChip.tsx
+++ b/packages/core/src/Chip/FilterChip/FilterChip.tsx
@@ -27,7 +27,7 @@ export type FilterChipProps = SpaceProps &
     actionTitle?: string
     value?: string | number
     color?: string
-    children?: React.ReactNode | string
+    children?: React.ReactNode
     variation?: FilterChipVariation
   }
 
diff --git a/packages/core/src/CloseButton/CloseButton.styled.tsx b/packages/core/src/CloseButton/CloseButton.styled.tsx
index 97cfa5cacd..147b7e75bf 100644
--- a/packages/core/src/CloseButton/CloseButton.styled.tsx
+++ b/packages/core/src/CloseButton/CloseButton.styled.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 import { ComposedStyleFns } from '../theme/theme'
 import { getPaletteColor } from '../utils/utils'
-import type { CloseButtonProps } from './CloseButton'
+import { type MotionButtonProps } from './CloseButton'
 
 /** @public */
 export const closeButtonSizes = ['sm', 'md', 'lg'] as const
@@ -13,9 +13,6 @@ export const closeButtonSizes = ['sm', 'md', 'lg'] as const
 /** @public */
 export type CloseButtonSize = (typeof closeButtonSizes)[number] | number
 
-/** @public */
-export type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps
-
 export const closeButtonIconSizes: Record<CloseButtonSize, number> = {
   sm: 20,
   md: 24,
@@ -38,7 +35,7 @@ export const closeButtonVariants = ['filled', 'white'] as const
 /** @public */
 export type CloseButtonVariant = (typeof closeButtonVariants)[number]
 
-export const closeButtonVariantProps: Record<CloseButtonVariant, Omit<CloseButtonProps, 'variant'>> = {
+export const closeButtonVariantProps = {
   filled: { bgColor: 'background.lightest', boxShadowSize: 'sm', color: 'primary.base' },
   white: { color: 'text.lightest' },
 } as const
diff --git a/packages/core/src/CloseButton/CloseButton.tsx b/packages/core/src/CloseButton/CloseButton.tsx
index ef6ebdc082..0c3a65d40f 100644
--- a/packages/core/src/CloseButton/CloseButton.tsx
+++ b/packages/core/src/CloseButton/CloseButton.tsx
@@ -1,4 +1,5 @@
 import React, { MouseEventHandler, useState } from 'react'
+import { type HTMLMotionProps } from 'framer-motion'
 import { Relative } from '../Relative/Relative'
 import { type BoxShadowSize, type IStyledSystemProps, type PaletteColor } from '../theme/theme'
 import {
@@ -25,6 +26,9 @@ export type CloseButtonProps = IStyledSystemProps & {
   variant?: CloseButtonVariant
 }
 
+/** @public */
+export type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps
+
 /**
  * @public
  */
@@ -39,7 +43,7 @@ export const CloseButton = ({
   title = 'close',
   variant,
   ...props
-}: CloseButtonProps) => {
+}: MotionButtonProps) => {
   const [hover, setHover] = useState(false)
 
   return (
diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx
index 1a6163c460..dfcaa39d3b 100644
--- a/packages/core/src/Dialog/Dialog.styled.tsx
+++ b/packages/core/src/Dialog/Dialog.styled.tsx
@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import themeGet from '@styled-system/theme-get'
-import { HTMLMotionProps, Transition, motion } from 'framer-motion'
+import { Transition, motion } from 'framer-motion'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 import { overflowX, overflowY, zIndex } from 'styled-system'
@@ -35,7 +35,7 @@ const scrimStyles = {
 
 const enterTransition: Transition = { duration: 0.25, ease: 'easeOut' }
 const exitTransition: Transition = { duration: 0.15, ease: 'easeIn' }
-const animationStyles: Record<'default' | 'sheet' | 'overlay', HTMLMotionProps<'div'>> = {
+const animationStyles = {
   default: {
     initial: { opacity: 0, scale: 0.9, translateY: 64 },
     animate: { opacity: 1, scale: 1, translateY: 0, transition: enterTransition },
diff --git a/packages/core/src/Hug/Hug.tsx b/packages/core/src/Hug/Hug.tsx
index 4a05ba9d58..f893598a38 100644
--- a/packages/core/src/Hug/Hug.tsx
+++ b/packages/core/src/Hug/Hug.tsx
@@ -10,7 +10,7 @@ export type HugProps = CardProps & {
   children?: React.ReactNode
   iconDisplay?: string[]
   icon?: React.ReactNode
-  text?: React.ReactNode | React.ReactNode[] | string
+  text?: React.ReactNode
   color?: string
   fontSize?: string | number
 }
diff --git a/packages/core/src/Image/Image.tsx b/packages/core/src/Image/Image.tsx
index ff9ac17f3a..b59802630e 100644
--- a/packages/core/src/Image/Image.tsx
+++ b/packages/core/src/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled from 'styled-components'
 import {
   BorderRadiusProps,
@@ -42,7 +42,7 @@ export type ImageProps = BorderRadiusProps &
   MinWidthProps &
   SpaceProps &
   WidthProps &
-  Partial<Omit<HTMLImageElement, 'width' | 'height'>> & {
+  Omit<ComponentPropsWithoutRef<'img'>, 'width' | 'height'> & {
     borderRadiusSize?: string
     rounded?: string
     boxShadowSize?: string
diff --git a/packages/core/src/Input/Input.tsx b/packages/core/src/Input/Input.tsx
index 79ecf6b0c4..99d90179f3 100644
--- a/packages/core/src/Input/Input.tsx
+++ b/packages/core/src/Input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { ForwardRefExoticComponent, RefAttributes } from 'react'
+import React, { type ComponentPropsWithRef, ForwardRefExoticComponent, RefAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import {
   FontSizeProps,
@@ -77,10 +77,8 @@ export type InputHelperTextProps = TextProps & {
 export type InputProps = SpaceProps &
   FontSizeProps &
   ZIndexProps &
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> &
-  React.RefAttributes<HTMLInputElement> & {
+  Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     children?: React.ReactNode
-    onChange?: (unknown) => unknown
     helperText?: React.ReactElement<
       InputHelperTextProps,
       string | React.JSXElementConstructor<InputHelperTextProps>
@@ -101,7 +99,7 @@ export type InputWithRef = ForwardRefExoticComponent<Omit<InputProps, 'ref'> & R
 /**
  * @public
  */
-export const Input = React.forwardRef((props: InputProps, ref) => {
+export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { helperText, color, ...restProps } = props
   return (
     <>
diff --git a/packages/core/src/Label/Label.tsx b/packages/core/src/Label/Label.tsx
index b9642fcd74..62bea2def3 100644
--- a/packages/core/src/Label/Label.tsx
+++ b/packages/core/src/Label/Label.tsx
@@ -55,7 +55,7 @@ export type LabelProps = SpaceProps &
   TextStyleProps &
   WidthProps &
   Partial<Omit<HTMLLabelElement, 'children'>> & {
-    children?: React.ReactNode | string
+    children?: React.ReactNode
     color?: string
     autoHide?: boolean
     nowrap?: boolean
diff --git a/packages/core/src/Layout/Layout.tsx b/packages/core/src/Layout/Layout.tsx
index fc7edb4bce..22b2852b63 100644
--- a/packages/core/src/Layout/Layout.tsx
+++ b/packages/core/src/Layout/Layout.tsx
@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { zIndex } from 'styled-system'
 import { Box } from '../Box/Box'
-import { Grid } from '../Grid/Grid'
+import { Grid, type GridProps } from '../Grid/Grid'
 import { spaceValues } from '../theme'
 
-const getWidthsForVariation = (variation: string) => {
+const getWidthsForVariation = (variation: string | undefined) => {
   return (
     variation &&
     variation
@@ -102,13 +102,13 @@ export type LayoutGap = (typeof ALLOWED_GAP_VALUES)[number] | Array<(typeof ALLO
  */
 export type LayoutVariation =
   | (typeof ALLOWED_LAYOUT_VALUES)[number]
-  | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]>
+  | Array<(typeof ALLOWED_LAYOUT_VALUES)[number] | undefined>
 
 /**
  * @public
  */
-export type LayoutProps = {
-  children: React.ReactElement | React.ReactElement[]
+export type LayoutProps = GridProps & {
+  children: React.ReactNode
   gap?: LayoutGap
   rowGap?: LayoutGap
   variation?: LayoutVariation
diff --git a/packages/core/src/Link/Link.tsx b/packages/core/src/Link/Link.tsx
index f4b9328997..06df0ab0ef 100644
--- a/packages/core/src/Link/Link.tsx
+++ b/packages/core/src/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { SpaceProps, WidthProps, compose, space, width } from 'styled-system'
 import { buttonStyles, type ButtonSizes, type ButtonVariations } from '../Button/Button'
@@ -81,17 +81,14 @@ const variations = {
  */
 export type LinkProps = WidthProps &
   SpaceProps &
-  React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  React.RefAttributes<unknown> & {
-    children?: React.ReactNode | string
+  ComponentPropsWithRef<'a'> & {
+    children?: React.ReactNode
     color?: string
     disabled?: boolean
     href?: string
     size?: ButtonSizes | ButtonSizes[]
     target?: string
     variation?: ButtonVariations
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>
-    onFocus?: React.FocusEventHandler<HTMLAnchorElement>
   }
 
 /**
diff --git a/packages/core/src/List/List.tsx b/packages/core/src/List/List.tsx
index e3077c438f..84afb90e3d 100644
--- a/packages/core/src/List/List.tsx
+++ b/packages/core/src/List/List.tsx
@@ -1,5 +1,5 @@
 import themeGet from '@styled-system/theme-get'
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled, { css } from 'styled-components'
 import { compose, fontSize, space, width, type FontSizeProps, type SpaceProps } from 'styled-system'
 import { type PaletteColor, type PaletteFamilyName } from '../theme/theme'
@@ -45,7 +45,7 @@ export type ListListStyle = (typeof listStyles)[number]
  */
 export type ListProps = FontSizeProps &
   SpaceProps &
-  React.HTMLAttributes<HTMLOListElement | HTMLUListElement> & {
+  ComponentPropsWithoutRef<'ul' | 'ol'> & {
     children?: React.ReactNode
     listStyle?: ListListStyle
     indentSize?: ListIndentSize
diff --git a/packages/core/src/PlaceholderImage/PlaceholderImage.tsx b/packages/core/src/PlaceholderImage/PlaceholderImage.tsx
index ec22325299..336327d3d2 100644
--- a/packages/core/src/PlaceholderImage/PlaceholderImage.tsx
+++ b/packages/core/src/PlaceholderImage/PlaceholderImage.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled from 'styled-components'
 import { Image } from '../Image/Image'
 
@@ -27,7 +27,7 @@ const determineSRC = (blur, chooseSrc, height, width) => {
 /**
  * @public
  */
-export type PlaceholderImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+export type PlaceholderImageProps = ComponentPropsWithoutRef<'img'> & {
   ariaHidden?: boolean
   blur?: boolean
   chooseSrc?: string
diff --git a/packages/core/src/Radio/Radio.tsx b/packages/core/src/Radio/Radio.tsx
index 4165601fed..e7b5b4c500 100644
--- a/packages/core/src/Radio/Radio.tsx
+++ b/packages/core/src/Radio/Radio.tsx
@@ -1,5 +1,5 @@
 import { RadioChecked, RadioEmpty } from 'pcln-icons'
-import React from 'react'
+import React, { type ComponentPropsWithoutRef } from 'react'
 import styled from 'styled-components'
 import { type PaletteFamilyName } from '../theme/theme'
 import { applyVariations, getPaletteColor } from '../utils/utils'
@@ -67,16 +67,15 @@ const RadioIcon = ({ checked, ...props }: RadioIconProps) => {
 /**
  * @public
  */
-export type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type RadioProps = ComponentPropsWithoutRef<'input'> & {
   size?: number
   color?: PaletteFamilyName
-  onClick?: (unknown) => unknown
 }
 
 /**
  * @public
  */
-export const Radio: React.FC<RadioProps> = React.forwardRef((props, ref) => {
+export const Radio: React.FC<RadioProps> = React.forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { checked, disabled, size } = props
 
   const borderAdjustedSize = size + 4
diff --git a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
index ccc91ca860..2edb373852 100644
--- a/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
+++ b/packages/core/src/RadioCheckToggleCard/RadioCheckToggleCard.tsx
@@ -41,7 +41,7 @@ export type TVPositions = (typeof RadioCheckToggleCardVPositions)[number]
  * @public
  */
 export type RadioCheckToggleCardProps = {
-  children?: React.ReactNode | string
+  children?: React.ReactNode
   cardType?: TCardTypes
   hPosition?: THPositions
   vPosition?: TVPositions
diff --git a/packages/core/src/Select/Select.tsx b/packages/core/src/Select/Select.tsx
index 0a626af48b..9345553a68 100644
--- a/packages/core/src/Select/Select.tsx
+++ b/packages/core/src/Select/Select.tsx
@@ -1,6 +1,6 @@
 import themeGet from '@styled-system/theme-get'
 import { ChevronDown } from 'pcln-icons'
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { FontSizeProps, SpaceProps, borderRadius, compose, fontSize, space } from 'styled-system'
 import { Flex } from '../Flex/Flex'
@@ -78,12 +78,11 @@ export type SelectVariations = 'input' | 'subtle'
  */
 export type SelectProps = SpaceProps &
   FontSizeProps &
-  Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
+  Omit<ComponentPropsWithRef<'select'>, 'size'> & {
     children?: React.ReactNode
     color?: PaletteColor
     borderRadius?: BorderRadius
     size?: SelectSizes
-    ref?: React.Ref<React.ForwardedRef<unknown>>
     variation?: SelectVariations
   }
 
diff --git a/packages/core/src/SlideBox/SlideBox.tsx b/packages/core/src/SlideBox/SlideBox.tsx
index 656645711c..57b480c828 100644
--- a/packages/core/src/SlideBox/SlideBox.tsx
+++ b/packages/core/src/SlideBox/SlideBox.tsx
@@ -12,9 +12,10 @@ import { useSlideBoxNav } from './useSlideBoxNav'
  * @public
  */
 export type SlideBoxProps = {
-  children?: React.ReactNode | string
+  children?: React.ReactNode
   visibleSlides?: Array<number> | number
-  onSlideChange?: (unknown) => unknown
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onSlideChange?: (e: any) => unknown
   slideSpacing?: number
   stretchHeight?: boolean
   layout?: string
diff --git a/packages/core/src/Step/Step.tsx b/packages/core/src/Step/Step.tsx
index d760078cbb..0f54592f9c 100644
--- a/packages/core/src/Step/Step.tsx
+++ b/packages/core/src/Step/Step.tsx
@@ -1,7 +1,7 @@
 import { Check } from 'pcln-icons'
 import React from 'react'
 import styled from 'styled-components'
-import { Button } from '../Button/Button'
+import { Button, type ButtonProps } from '../Button/Button'
 import { Text } from '../Text/Text'
 import { getPaletteColor } from '../utils/utils'
 
@@ -25,8 +25,8 @@ export type StepProps = {
   className?: string
   active?: boolean
   completed?: boolean
-  children?: React.ReactNode | string
-  onClick?: (unknown) => unknown
+  children?: React.ReactNode
+  onClick?: ButtonProps['onClick']
 }
 
 /**
diff --git a/packages/core/src/TextArea/TextArea.tsx b/packages/core/src/TextArea/TextArea.tsx
index bcd9a55821..d5c662923f 100644
--- a/packages/core/src/TextArea/TextArea.tsx
+++ b/packages/core/src/TextArea/TextArea.tsx
@@ -1,5 +1,5 @@
 import themeGet from '@styled-system/theme-get'
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled from 'styled-components'
 import { space, SpaceProps } from 'styled-system'
 import { applyVariations, borders, getPaletteColor } from '../utils/utils'
@@ -8,8 +8,7 @@ import { applyVariations, borders, getPaletteColor } from '../utils/utils'
  * @public
  */
 export type TextAreaProps = SpaceProps &
-  React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-  React.RefAttributes<HTMLTextAreaElement> & { isField?: boolean }
+  ComponentPropsWithRef<'textarea'> & { isField?: boolean }
 
 /**
  * @public
diff --git a/packages/core/src/Toggle/Toggle.tsx b/packages/core/src/Toggle/Toggle.tsx
index fb061a3936..4e747232ca 100644
--- a/packages/core/src/Toggle/Toggle.tsx
+++ b/packages/core/src/Toggle/Toggle.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Absolute } from '../Absolute/Absolute'
-import { Box } from '../Box/Box'
+import { Box, type BoxProps } from '../Box/Box'
 import { getPaletteColor } from '../utils/utils'
 
 const alphaColor = (color: string, props) => `${getPaletteColor(color)(props)}4C`
@@ -60,7 +60,7 @@ const WrapperBox = styled(Box)`
 export type ToggleProps = {
   isOn?: boolean
   label?: string
-  onToggle?: (unknown) => unknown
+  onToggle?: BoxProps['onClick']
   disabled?: boolean
   width?: string
   height?: number
diff --git a/packages/core/src/ToggleBadge/ToggleBadge.tsx b/packages/core/src/ToggleBadge/ToggleBadge.tsx
index 3b4186d81c..6a12545482 100644
--- a/packages/core/src/ToggleBadge/ToggleBadge.tsx
+++ b/packages/core/src/ToggleBadge/ToggleBadge.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import styled from 'styled-components'
 import { FontSizeProps, SpaceProps, borderRadius, compose, fontSize, space } from 'styled-system'
 import { borderRadiusAttrs } from '../utils/attrs'
@@ -15,8 +15,7 @@ export type ToggleBadgeProps = {
   unSelectedBg?: string
 } & SpaceProps &
   FontSizeProps &
-  React.HTMLAttributes<HTMLInputElement> &
-  React.RefAttributes<HTMLInputElement>
+  ComponentPropsWithRef<'button'>
 
 /**
  * @public
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3418bf3e87..78f1ede705 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -54,7 +54,7 @@ export {
   type FilterChipProps,
   type FilterChipVariation,
 } from './Chip/FilterChip/FilterChip'
-export { CloseButton, type CloseButtonProps } from './CloseButton/CloseButton'
+export { CloseButton, type CloseButtonProps, type MotionButtonProps } from './CloseButton/CloseButton'
 export {
   closeButtonSizes,
   closeButtonVariants,
@@ -168,7 +168,7 @@ export * from './utils'
 export { createTheme } from './utils/createTheme'
 
 export * from './theme'
-export type { PaletteColorPaletteFamily, PaletteColorPaletteFamilyOption, PaletteFamily } from './theme/theme'
+export type { PaletteFamily } from './theme/theme'
 
 // DocsUtils
 export { DoDont, type DoDontProps } from './DocsUtils/DoDont/DoDont'
diff --git a/packages/core/src/theme/theme.ts b/packages/core/src/theme/theme.ts
index bfb07de905..0ecce2b9bc 100644
--- a/packages/core/src/theme/theme.ts
+++ b/packages/core/src/theme/theme.ts
@@ -629,21 +629,8 @@ export type PaletteFamilies = Record<PaletteFamilyName, PaletteFamily>
 /**
  * @public
  */
-export type PaletteColorPaletteFamily = Array<keyof PaletteFamilies>[number]
+export type PaletteColor = `${PaletteFamilyName}.${PaletteFamilyVariation}`
 
-/**
- * @public
- */
-export type PaletteColorPaletteFamilyOption = Array<keyof PaletteFamily>[number]
-
-/**
- * @public
- */
-export type PaletteColor = `${PaletteColorPaletteFamily}.${PaletteColorPaletteFamilyOption}`
-
-/**
- * @public
- */
 export const paletteColors = paletteFamilyNames.flatMap((family) =>
   paletteFamilyVariations.map((variation) => `${family}.${variation}`)
 )
diff --git a/packages/core/src/utils/utils.ts b/packages/core/src/utils/utils.ts
index b4e5df0b97..d398a4cb56 100644
--- a/packages/core/src/utils/utils.ts
+++ b/packages/core/src/utils/utils.ts
@@ -1,6 +1,6 @@
 import themeGet from '@styled-system/theme-get'
 import { css } from 'styled-components'
-import { mediaQueries } from '../theme'
+import { mediaQueries, type PaletteFamilyName, type PaletteColor, PaletteFamilyVariation } from '../theme'
 
 /**
  * Checks if the given color prop is a valid palette color
@@ -249,9 +249,13 @@ export const applyVariations =
  *
  * @public
  */
-export const getPaletteColor =
-  (...args) =>
-  (props) => {
+export function getPaletteColor(
+  ...args: [
+    PaletteColor | PaletteFamilyName | PaletteFamilyVariation | string,
+    (PaletteColor | PaletteFamilyVariation)?
+  ]
+) {
+  return (props) => {
     let color = args.length === 2 ? args[0] : props.color
     let shade = args.length === 2 ? args[1] : args[0]
 
@@ -262,13 +266,12 @@ export const getPaletteColor =
       shade = colorShade[1]
     }
 
-    return (
-      themeGet(`palette.${color}.${shade}`)(props) ||
+    return (themeGet(`palette.${color}.${shade}`)(props) ||
       themeGet(`palette.${color}`)(props) ||
       themeGet(`colors.${color}`)(props) ||
-      color
-    )
+      color) as string
   }
+}
 
 /**
  * @public