diff --git a/.gitignore b/.gitignore
index ec02ef2a..af2bc790 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ packages/**/dist
 .npmrc
 .vercel
 demo/build
-.netlify
\ No newline at end of file
+.netlify
+.idea/
diff --git a/packages/react-code-blocks/package.json b/packages/react-code-blocks/package.json
index 2818447b..6f361c40 100644
--- a/packages/react-code-blocks/package.json
+++ b/packages/react-code-blocks/package.json
@@ -9,7 +9,7 @@
   ],
   "author": "rajinwonderland",
   "maintainers": [],
-  "version": "0.1.6",
+  "version": "0.1.7",
   "homepage": "https://react-code-blocks.rajinwonderland.vercel.app",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/packages/react-code-blocks/src/components/CopyBlock.tsx b/packages/react-code-blocks/src/components/CopyBlock.tsx
index 20198139..2a06dc5d 100644
--- a/packages/react-code-blocks/src/components/CopyBlock.tsx
+++ b/packages/react-code-blocks/src/components/CopyBlock.tsx
@@ -15,9 +15,11 @@ export interface CopyBlockProps extends CodeBlockProps {
   onCopy?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-type CascadedProps = Partial<CopyBlockProps> & { theme: Theme };
-
-const Button = styled.button<CascadedProps>`
+type ButtonStyledProps = {
+    $copied?: boolean
+    theme: Theme
+};
+const Button = styled.button<ButtonStyledProps>`
   position: absolute;
   top: 0.5em;
   right: 0.75em;
@@ -25,14 +27,14 @@ const Button = styled.button<CascadedProps>`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  background: ${(p: CascadedProps) => p.theme.backgroundColor as string};
+  background: ${(p: ButtonStyledProps) => p.theme.backgroundColor as string};
   margin-top: 0.15rem;
   border-radius: 0.25rem;
   max-height: 2rem;
   max-width: 2rem;
   padding: 0.25rem;
   &:hover {
-    opacity: ${(p: CascadedProps) => (p.copied ? 1 : 0.5)};
+    opacity: ${(p: ButtonStyledProps) => (p.$copied ? 1 : 0.5)};
   }
   &:focus {
     outline: none;
@@ -44,11 +46,15 @@ const Button = styled.button<CascadedProps>`
   }
 `;
 
-const Snippet = styled.div<CascadedProps>`
+type SnippetStyledProps = {
+    $codeBlock?: boolean
+    theme: Theme
+};
+const Snippet = styled.div<SnippetStyledProps>`
   position: relative;
-  background: ${(p: CascadedProps) => p.theme.backgroundColor as string};
+  background: ${(p: SnippetStyledProps) => p.theme.backgroundColor as string};
   border-radius: 0.25rem;
-  padding: ${(p: CascadedProps) => (p.codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`)};
+  padding: ${(p: SnippetStyledProps) => (p.$codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`)};
 `;
 
 export default function CopyBlock({
@@ -68,7 +74,7 @@ export default function CopyBlock({
   };
 
   return (
-    <Snippet {...{ codeBlock }} style={customStyle} theme={theme}>
+    <Snippet {...{ $codeBlock: codeBlock }} style={customStyle} theme={theme}>
       {codeBlock ? (
         // @ts-ignore
         <CodeBlock text={text} theme={theme} {...rest} />
@@ -76,7 +82,7 @@ export default function CopyBlock({
         // @ts-ignore
         <Code text={text} theme={theme} {...rest} />
       )}
-      <Button aria-label="Copy Code" type="button" onClick={handler} {...{ theme, copied }}>
+      <Button aria-label="Copy Code" type="button" onClick={handler} {...{ theme, $copied: copied }}>
         <Copy
           color={copied ? theme?.stringColor : theme?.textColor}
           copied={copied}
diff --git a/packages/react-code-blocks/src/components/CopyIcon.tsx b/packages/react-code-blocks/src/components/CopyIcon.tsx
index 94dd09a6..d3c225ed 100644
--- a/packages/react-code-blocks/src/components/CopyIcon.tsx
+++ b/packages/react-code-blocks/src/components/CopyIcon.tsx
@@ -5,7 +5,7 @@ export interface IconProps {
   color: any;
   [x: string]: any;
 }
-const ClipboardListIcon = ({ size, color, ...props }: IconProps) => (
+const ClipboardListIcon = ({ size = '16pt', color = 'currentcolor', ...props }: IconProps) => (
   <svg {...props} viewBox="0 0 384 512" width={size} height={size} fill={color}>
     <path d="M280 240H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zM112 232c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336z" />
   </svg>
@@ -13,12 +13,8 @@ const ClipboardListIcon = ({ size, color, ...props }: IconProps) => (
 
 ClipboardListIcon.displayName = `ClipboardListIcon`;
 
-ClipboardListIcon.defaultProps = {
-  size: '16pt',
-  color: `currentcolor`,
-};
 
-const ClipboardCheckIcon = ({ size, color, ...props }: IconProps) => (
+const ClipboardCheckIcon = ({ size = '16pt', color = 'currentcolor', ...props }: IconProps) => (
   <svg {...props} viewBox="0 0 384 512" width={size} height={size} fill={color}>
     <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z" />
   </svg>
@@ -26,10 +22,6 @@ const ClipboardCheckIcon = ({ size, color, ...props }: IconProps) => (
 
 ClipboardCheckIcon.displayName = `ClipboardCheckIcon`;
 
-ClipboardCheckIcon.defaultProps = {
-  size: '16pt',
-  color: `currentcolor`,
-};
 export default function({
   size,
   color,