diff --git a/blocks/core/src/Source/Source.stories.tsx b/blocks/core/src/Source/Source.stories.tsx
index 0aa9ff04d..73f6bd882 100644
--- a/blocks/core/src/Source/Source.stories.tsx
+++ b/blocks/core/src/Source/Source.stories.tsx
@@ -50,7 +50,7 @@ simpleSource.story = {
     controls: {
       language: { type: 'options', options: languages, value: 'jsx' },
       dark: { type: 'boolean' },
-      source: {
+      children: {
         type: 'text',
         rows: 10,
         value: `export const sample = () => {
diff --git a/blocks/core/src/Source/Source.tsx b/blocks/core/src/Source/Source.tsx
index 9783cacb1..321005a32 100644
--- a/blocks/core/src/Source/Source.tsx
+++ b/blocks/core/src/Source/Source.tsx
@@ -14,11 +14,13 @@ import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 
 import { BlockContainer, BlockContainerProps } from '../BlockContainer';
 
+type RenderProps = Parameters<Highlight['props']['children']>[0];
+
 export interface SourceOwnProps {
   /**
    * source code to display
    */
-  source: string;
+  children?: string;
   /**
    * optional theme provided to the component
    */
@@ -30,7 +32,10 @@ export interface SourceOwnProps {
   /**
    * custom function to render the source code
    */
-  children?: (props: any) => React.ReactNode;
+  renderFn?: (
+    props: RenderProps,
+    other: { theme: PrismTheme },
+  ) => ReturnType<Highlight['props']['children']>;
   /**
    * used to specify a "dark" color theme - applcable only if no custom theme prop is provided
    */
@@ -43,10 +48,10 @@ export type SourceProps = SourceOwnProps & BlockContainerProps;
  *
  */
 export const Source: FC<SourceProps> = ({
-  source = '',
+  children = '',
   language = 'jsx',
   theme: customTheme,
-  children,
+  renderFn,
   actions,
   dark = false,
 }) => {
@@ -55,7 +60,7 @@ export const Source: FC<SourceProps> = ({
   const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setCopied(true);
-    copy(source);
+    copy(children);
     window.setTimeout(() => setCopied(false), 1500);
   };
 
@@ -64,12 +69,12 @@ export const Source: FC<SourceProps> = ({
   actionsItems.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });
   const theme = customTheme ? customTheme : dark ? duotoneDark : duotoneLight;
   const renderProps =
-    typeof children === 'function'
-      ? (props: any) => children({ ...props, theme })
+    typeof renderFn === 'function'
+      ? (props: RenderProps) => renderFn(props, { theme })
       : ({ className, style, tokens, getLineProps, getTokenProps }: any) => (
           <Styled.pre
             className={`${className}`}
-            style={{ ...style, padding: '0px 10px', margin: 0 }}
+            style={{ ...style, padding: '10px 10px', margin: 0 }}
           >
             {tokens.map((line: string[], i: number) => (
               <div {...getLineProps({ line, key: i })}>
@@ -87,7 +92,7 @@ export const Source: FC<SourceProps> = ({
 
   return (
     <BlockContainer actions={actionsItems}>
-      <Highlight {...props} code={source} language={language}>
+      <Highlight {...props} code={children} language={language}>
         {renderProps}
       </Highlight>
     </BlockContainer>
diff --git a/blocks/core/src/StorySource/StorySource.tsx b/blocks/core/src/StorySource/StorySource.tsx
index 980b0b558..a3e5859b5 100644
--- a/blocks/core/src/StorySource/StorySource.tsx
+++ b/blocks/core/src/StorySource/StorySource.tsx
@@ -140,10 +140,11 @@ export const StorySource: FC<StorySourceProps> = ({
   return (
     <TaggedSource
       args={viewStyle === 'tags' && !showFileSource ? args : undefined}
-      source={source}
       theme={prismTheme}
       language={language}
       actions={actions}
-    />
+    >
+      {source}
+    </TaggedSource>
   );
 };
diff --git a/blocks/core/src/StorySource/TaggedSource.tsx b/blocks/core/src/StorySource/TaggedSource.tsx
index 2e62cc554..bd1569229 100644
--- a/blocks/core/src/StorySource/TaggedSource.tsx
+++ b/blocks/core/src/StorySource/TaggedSource.tsx
@@ -49,8 +49,13 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
     ? getArgumentsLocations(args)
     : undefined;
   return (
-    <Source theme={theme} {...rest}>
-      {({ className, style, tokens, getLineProps, getTokenProps, theme }) => {
+    <Source
+      theme={theme}
+      {...rest}
+      renderFn={(
+        { className, style, tokens, getLineProps, getTokenProps },
+        { theme },
+      ) => {
         if (tags) {
           tags.forEach((tag, index) => {
             let color: string;
@@ -63,9 +68,9 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
         return (
           <Styled.pre
             className={`${className}`}
-            style={{ ...style, padding: '0px 10px', margin: 0 }}
+            style={{ ...style, padding: '10px 10px', margin: 0 }}
           >
-            {tokens.map((line: { content: string }[], i: number) => (
+            {tokens.map((line, i: number) => (
               <div {...getLineProps({ line, key: i })}>
                 {(() => {
                   let column = 0;
@@ -88,7 +93,7 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
 
                     column += token.content.length;
                     if (param) {
-                      const splitToken: string[] = getTokenProps({
+                      const splitToken = getTokenProps({
                         token,
                         key,
                       }).children.split(/(\s+)/);
@@ -129,6 +134,6 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
           </Styled.pre>
         );
       }}
-    </Source>
+    />
   );
 };
diff --git a/integrations/storybook/src/blocks/ImportSource.tsx b/integrations/storybook/src/blocks/ImportSource.tsx
index 91e445d7c..003c7e686 100644
--- a/integrations/storybook/src/blocks/ImportSource.tsx
+++ b/integrations/storybook/src/blocks/ImportSource.tsx
@@ -15,9 +15,9 @@ export const ImportSource: FC<SourceProps> = ({ id, name }) => {
   });
   return (
     <ThemeProvider>
-      <SourceBlock
-        source={component && component.import ? component.import : ''}
-      />
+      <SourceBlock>
+        {component && component.import ? component.import : ''}
+      </SourceBlock>
     </ThemeProvider>
   );
 };