diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 07bd22d90..0d5316be8 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,6 +1,6 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
-    <option name="WRAP_WHEN_TYPING_REACHES_RIGHT_MARGIN" value="true" />
+    <option name="WRAP_WHEN_TYPING_REACHES_RIGHT_MARGIN" value="false" />
     <HTMLCodeStyleSettings>
       <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
       <option name="HTML_ENFORCE_QUOTES" value="true" />
diff --git a/src/components/design-system/atoms/overlay.tsx b/src/components/design-system/atoms/overlay.tsx
index 2692efb0c..a31c83ad2 100644
--- a/src/components/design-system/atoms/overlay.tsx
+++ b/src/components/design-system/atoms/overlay.tsx
@@ -9,9 +9,7 @@ export interface OverlayProps {
   onClick: () => void;
 }
 
-type Props = TransientProps<OverlayProps, "div">;
-
-const StyledOverlay = styled.div<Props>`
+const StyledOverlay = styled.div<TransientProps<OverlayProps, "div">>`
   position: fixed;
   top: 0;
   left: 0;
@@ -28,12 +26,5 @@ const StyledOverlay = styled.div<Props>`
 export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
   useLockBodyScroll();
 
-  return (
-    <StyledOverlay
-      $zIndex={zIndex}
-      onClick={onClick}
-      $delay={delay}
-      data-test={"ciaone"}
-    />
-  );
+  return <StyledOverlay $zIndex={zIndex} onClick={onClick} $delay={delay} />;
 };
diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts
index f4771a09b..6601b29c9 100644
--- a/src/gatsby-types.d.ts
+++ b/src/gatsby-types.d.ts
@@ -1682,6 +1682,7 @@ type Query = {
   readonly allSiteFunction: SiteFunctionConnection;
   readonly allSitePage: SitePageConnection;
   readonly allSitePlugin: SitePluginConnection;
+  readonly allStaticImage: StaticImageConnection;
   readonly directory: Maybe<Directory>;
   readonly file: Maybe<File>;
   readonly imageSharp: Maybe<ImageSharp>;
@@ -1691,6 +1692,7 @@ type Query = {
   readonly siteFunction: Maybe<SiteFunction>;
   readonly sitePage: Maybe<SitePage>;
   readonly sitePlugin: Maybe<SitePlugin>;
+  readonly staticImage: Maybe<StaticImage>;
 };
 
 
@@ -1766,6 +1768,14 @@ type Query_allSitePluginArgs = {
 };
 
 
+type Query_allStaticImageArgs = {
+  filter: InputMaybe<StaticImageFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<StaticImageSortInput>>>;
+};
+
+
 type Query_directoryArgs = {
   absolutePath: InputMaybe<StringQueryOperatorInput>;
   accessTime: InputMaybe<DateQueryOperatorInput>;
@@ -1956,6 +1966,46 @@ type Query_sitePluginArgs = {
   version: InputMaybe<StringQueryOperatorInput>;
 };
 
+
+type Query_staticImageArgs = {
+  absolutePath: InputMaybe<StringQueryOperatorInput>;
+  accessTime: InputMaybe<DateQueryOperatorInput>;
+  atime: InputMaybe<DateQueryOperatorInput>;
+  atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  base: InputMaybe<StringQueryOperatorInput>;
+  birthTime: InputMaybe<DateQueryOperatorInput>;
+  birthtime: InputMaybe<DateQueryOperatorInput>;
+  birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  blksize: InputMaybe<IntQueryOperatorInput>;
+  blocks: InputMaybe<IntQueryOperatorInput>;
+  changeTime: InputMaybe<DateQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  ctime: InputMaybe<DateQueryOperatorInput>;
+  ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  dev: InputMaybe<IntQueryOperatorInput>;
+  dir: InputMaybe<StringQueryOperatorInput>;
+  ext: InputMaybe<StringQueryOperatorInput>;
+  extension: InputMaybe<StringQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  ino: InputMaybe<IntQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  mode: InputMaybe<IntQueryOperatorInput>;
+  modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  mtime: InputMaybe<DateQueryOperatorInput>;
+  mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  name: InputMaybe<StringQueryOperatorInput>;
+  nlink: InputMaybe<IntQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  prettySize: InputMaybe<StringQueryOperatorInput>;
+  rdev: InputMaybe<IntQueryOperatorInput>;
+  relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  relativePath: InputMaybe<StringQueryOperatorInput>;
+  root: InputMaybe<StringQueryOperatorInput>;
+  size: InputMaybe<IntQueryOperatorInput>;
+  sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  uid: InputMaybe<IntQueryOperatorInput>;
+};
+
 type Site = Node & {
   readonly buildTime: Maybe<Scalars['Date']>;
   readonly children: ReadonlyArray<Node>;
@@ -2806,6 +2856,312 @@ type SortOrderEnum =
   | 'ASC'
   | 'DESC';
 
+type StaticImage = Node & {
+  readonly absolutePath: Maybe<Scalars['String']>;
+  readonly accessTime: Maybe<Scalars['Date']>;
+  readonly atime: Maybe<Scalars['Date']>;
+  readonly atimeMs: Maybe<Scalars['Float']>;
+  readonly base: Maybe<Scalars['String']>;
+  readonly birthTime: Maybe<Scalars['Date']>;
+  readonly birthtime: Maybe<Scalars['Date']>;
+  readonly birthtimeMs: Maybe<Scalars['Float']>;
+  readonly blksize: Maybe<Scalars['Int']>;
+  readonly blocks: Maybe<Scalars['Int']>;
+  readonly changeTime: Maybe<Scalars['Date']>;
+  readonly children: ReadonlyArray<Node>;
+  readonly ctime: Maybe<Scalars['Date']>;
+  readonly ctimeMs: Maybe<Scalars['Float']>;
+  readonly dev: Maybe<Scalars['Int']>;
+  readonly dir: Maybe<Scalars['String']>;
+  readonly ext: Maybe<Scalars['String']>;
+  readonly extension: Maybe<Scalars['String']>;
+  readonly id: Scalars['ID'];
+  readonly ino: Maybe<Scalars['Int']>;
+  readonly internal: Internal;
+  readonly mode: Maybe<Scalars['Int']>;
+  readonly modifiedTime: Maybe<Scalars['Date']>;
+  readonly mtime: Maybe<Scalars['Date']>;
+  readonly mtimeMs: Maybe<Scalars['Float']>;
+  readonly name: Maybe<Scalars['String']>;
+  readonly nlink: Maybe<Scalars['Int']>;
+  readonly parent: Maybe<Node>;
+  readonly prettySize: Maybe<Scalars['String']>;
+  readonly rdev: Maybe<Scalars['Int']>;
+  readonly relativeDirectory: Maybe<Scalars['String']>;
+  readonly relativePath: Maybe<Scalars['String']>;
+  readonly root: Maybe<Scalars['String']>;
+  readonly size: Maybe<Scalars['Int']>;
+  readonly sourceInstanceName: Maybe<Scalars['String']>;
+  readonly uid: Maybe<Scalars['Int']>;
+};
+
+
+type StaticImage_accessTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_atimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_birthTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_birthtimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_changeTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_ctimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_modifiedTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type StaticImage_mtimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type StaticImageConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<StaticImageEdge>;
+  readonly group: ReadonlyArray<StaticImageGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<StaticImage>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type StaticImageConnection_distinctArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_groupArgs = {
+  field: StaticImageFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type StaticImageConnection_maxArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_minArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageConnection_sumArgs = {
+  field: StaticImageFieldSelector;
+};
+
+type StaticImageEdge = {
+  readonly next: Maybe<StaticImage>;
+  readonly node: StaticImage;
+  readonly previous: Maybe<StaticImage>;
+};
+
+type StaticImageFieldSelector = {
+  readonly absolutePath: InputMaybe<FieldSelectorEnum>;
+  readonly accessTime: InputMaybe<FieldSelectorEnum>;
+  readonly atime: InputMaybe<FieldSelectorEnum>;
+  readonly atimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly base: InputMaybe<FieldSelectorEnum>;
+  readonly birthTime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly blksize: InputMaybe<FieldSelectorEnum>;
+  readonly blocks: InputMaybe<FieldSelectorEnum>;
+  readonly changeTime: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly ctime: InputMaybe<FieldSelectorEnum>;
+  readonly ctimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly dev: InputMaybe<FieldSelectorEnum>;
+  readonly dir: InputMaybe<FieldSelectorEnum>;
+  readonly ext: InputMaybe<FieldSelectorEnum>;
+  readonly extension: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly ino: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly mode: InputMaybe<FieldSelectorEnum>;
+  readonly modifiedTime: InputMaybe<FieldSelectorEnum>;
+  readonly mtime: InputMaybe<FieldSelectorEnum>;
+  readonly mtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly nlink: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly prettySize: InputMaybe<FieldSelectorEnum>;
+  readonly rdev: InputMaybe<FieldSelectorEnum>;
+  readonly relativeDirectory: InputMaybe<FieldSelectorEnum>;
+  readonly relativePath: InputMaybe<FieldSelectorEnum>;
+  readonly root: InputMaybe<FieldSelectorEnum>;
+  readonly size: InputMaybe<FieldSelectorEnum>;
+  readonly sourceInstanceName: InputMaybe<FieldSelectorEnum>;
+  readonly uid: InputMaybe<FieldSelectorEnum>;
+};
+
+type StaticImageFilterInput = {
+  readonly absolutePath: InputMaybe<StringQueryOperatorInput>;
+  readonly accessTime: InputMaybe<DateQueryOperatorInput>;
+  readonly atime: InputMaybe<DateQueryOperatorInput>;
+  readonly atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly base: InputMaybe<StringQueryOperatorInput>;
+  readonly birthTime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly blksize: InputMaybe<IntQueryOperatorInput>;
+  readonly blocks: InputMaybe<IntQueryOperatorInput>;
+  readonly changeTime: InputMaybe<DateQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly ctime: InputMaybe<DateQueryOperatorInput>;
+  readonly ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly dev: InputMaybe<IntQueryOperatorInput>;
+  readonly dir: InputMaybe<StringQueryOperatorInput>;
+  readonly ext: InputMaybe<StringQueryOperatorInput>;
+  readonly extension: InputMaybe<StringQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly ino: InputMaybe<IntQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly mode: InputMaybe<IntQueryOperatorInput>;
+  readonly modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly nlink: InputMaybe<IntQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly prettySize: InputMaybe<StringQueryOperatorInput>;
+  readonly rdev: InputMaybe<IntQueryOperatorInput>;
+  readonly relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  readonly relativePath: InputMaybe<StringQueryOperatorInput>;
+  readonly root: InputMaybe<StringQueryOperatorInput>;
+  readonly size: InputMaybe<IntQueryOperatorInput>;
+  readonly sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  readonly uid: InputMaybe<IntQueryOperatorInput>;
+};
+
+type StaticImageGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<StaticImageEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<StaticImageGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<StaticImage>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type StaticImageGroupConnection_distinctArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_groupArgs = {
+  field: StaticImageFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type StaticImageGroupConnection_maxArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_minArgs = {
+  field: StaticImageFieldSelector;
+};
+
+
+type StaticImageGroupConnection_sumArgs = {
+  field: StaticImageFieldSelector;
+};
+
+type StaticImageSortInput = {
+  readonly absolutePath: InputMaybe<SortOrderEnum>;
+  readonly accessTime: InputMaybe<SortOrderEnum>;
+  readonly atime: InputMaybe<SortOrderEnum>;
+  readonly atimeMs: InputMaybe<SortOrderEnum>;
+  readonly base: InputMaybe<SortOrderEnum>;
+  readonly birthTime: InputMaybe<SortOrderEnum>;
+  readonly birthtime: InputMaybe<SortOrderEnum>;
+  readonly birthtimeMs: InputMaybe<SortOrderEnum>;
+  readonly blksize: InputMaybe<SortOrderEnum>;
+  readonly blocks: InputMaybe<SortOrderEnum>;
+  readonly changeTime: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly ctime: InputMaybe<SortOrderEnum>;
+  readonly ctimeMs: InputMaybe<SortOrderEnum>;
+  readonly dev: InputMaybe<SortOrderEnum>;
+  readonly dir: InputMaybe<SortOrderEnum>;
+  readonly ext: InputMaybe<SortOrderEnum>;
+  readonly extension: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly ino: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly mode: InputMaybe<SortOrderEnum>;
+  readonly modifiedTime: InputMaybe<SortOrderEnum>;
+  readonly mtime: InputMaybe<SortOrderEnum>;
+  readonly mtimeMs: InputMaybe<SortOrderEnum>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly nlink: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly prettySize: InputMaybe<SortOrderEnum>;
+  readonly rdev: InputMaybe<SortOrderEnum>;
+  readonly relativeDirectory: InputMaybe<SortOrderEnum>;
+  readonly relativePath: InputMaybe<SortOrderEnum>;
+  readonly root: InputMaybe<SortOrderEnum>;
+  readonly size: InputMaybe<SortOrderEnum>;
+  readonly sourceInstanceName: InputMaybe<SortOrderEnum>;
+  readonly uid: InputMaybe<SortOrderEnum>;
+};
+
 type StringQueryOperatorInput = {
   readonly eq: InputMaybe<Scalars['String']>;
   readonly glob: InputMaybe<Scalars['String']>;
diff --git a/src/images/posts/transient-props.png b/src/images/posts/transient-props.png
new file mode 100644
index 000000000..c1bcfa2d8
Binary files /dev/null and b/src/images/posts/transient-props.png differ
diff --git a/src/posts/2018-07-04-react-native-typescript-existing-app.md b/src/posts/2018-07-04-react-native-typescript-existing-app.md
index 5cc4f093d..f3e3f0503 100644
--- a/src/posts/2018-07-04-react-native-typescript-existing-app.md
+++ b/src/posts/2018-07-04-react-native-typescript-existing-app.md
@@ -194,6 +194,8 @@ architecture in the `NasaPhotoComponentPresenter`. As you can see from the code
 similar to other language like Java, C# (and many other :sunglasses:).
 
 ```jsx
+import { OverlayProps } from "./overlay";
+
 export class NasaPhotoService {
   async retrieve(): Promise<any> {
     return fetch('https://api.nasa.gov/planetary/apod?api_key=1cygunHJsSwDug6zJjF3emev3QAP8yFLppohLuxb')
@@ -224,11 +226,11 @@ export class NasaPhotoComponentPresenter {
 
 //...
 
-export class NasaPhotoViewerScreen extends React.Component<Props, State> implements NasaPhotoView {
+export class NasaPhotoViewerScreen extends React.Component<TransientProps<OverlayProps, "div">, State> implements NasaPhotoView {
   private readonly
   presenter: NasaPhotoComponentPresenter
 
-  constructor(props: Props) {
+  constructor(props: TransientProps<OverlayProps, "div">) {
     super(props)
     this.state = {
       photo: NasaPhoto.empty()
@@ -256,7 +258,7 @@ export class NasaPhotoViewerScreen extends React.Component<Props, State> impleme
       <ScrollView style={styles.container}>
         <Image
           style={styles.image}
-          {% raw %}source={{uri: this.state.photo.url}}{% endraw %}
+          {% raw %} source={{ uri: this.state.photo.url }}{% endraw %}
         />
         <NasaPhotoInformationComponent
           title={this.state.photo.title}
@@ -268,11 +270,15 @@ export class NasaPhotoViewerScreen extends React.Component<Props, State> impleme
   }
 }
 
-interface Props {
+interface
+Props
+{
   name: string
 }
 
-interface State {
+interface
+State
+{
   photo: NasaPhoto
 }
 
diff --git a/src/posts/2025-01-03-styled-component-transient-props-type-mapped-type-typescript.md b/src/posts/2025-01-03-styled-component-transient-props-type-mapped-type-typescript.md
new file mode 100644
index 000000000..660591d6b
--- /dev/null
+++ b/src/posts/2025-01-03-styled-component-transient-props-type-mapped-type-typescript.md
@@ -0,0 +1,220 @@
+---
+title: "Styled Components: create a type to define transient props based on the props interface of another component"
+description: "Standard transient props and shouldForwardProp are styled components API let you filter out props that 
+should not be passed to the underlying React node or DOM element. In this post we will see how we can create a type 
+to automatically define props from the interface of props of a parent component."
+date: 2025-01-03
+image: ../images/posts/transient-props.png
+tags: [react, typescript, web development]
+comments: true
+math: false
+authors: [fabrizio_duroni]
+---
+
+*Transient props and shouldForwardProp are styled components API let you filter out props that
+should not be passed to the underlying React node or DOM element. In this post we will see how we can create a type
+to automatically define transient props from the interface (of props) of a parent component.*
+
+---
+
+Styled component propagate by default all the props passed to a component to the underlying React node or DOM 
+element. 
+The framework offers a couple of ways to avoid this behavior. 
+The first one is [Transient props](https://styled-components.com/docs/api#transient-props). By using `$` as a 
+prefix of a prop name it will not be propagated.
+The second one is the `shouldforwardProp`.
+This is a fine-grained way to prevent the prop forward with a specific filter that acts on the name of the 
+props. You can add it using  the `withConfig` api or the `shouldforwardProp` prop as in the example below.
+
+```tsx
+interface BigCardProps {
+  big: boolean;
+}
+
+const PostCardContainer = styled.div<BigCardProps>`
+  /// ...other css rules...
+  
+  /// usage of the "big" prop
+  ${(props) => !props.$big && css` width: 48%; `}}
+  
+  /// ...other csss rules...
+`;
+PostCardContainer.shouldForwardProp = (prop: string) => prop !== "big";
+```
+
+Anyway, both these methods require a manual development specific on the prop names. In particular, it is very 
+tedious when you have a parent component and its children are styled components that should receive the same props. 
+However, you want to avoid forwarding them to the DOM (because their main purpose is styling/logic condition).  
+See, for example, the code below, where there is a parent component that calls a hook and uses a styled component as 
+children to create an overlay effect.
+The `StyledOverlay` component receive all the props of the container component, and we want to:
+
+* avoid the forward for `zIndex` and `delay` because they are not DOM attributes.
+  This is why they are contained again in the `StyledOverlayProps` interface with the `$` transient prop prefix.
+* forward the `onClick` prop to the underling DOM element (and so we don't add the property to the `StyledOverlayProps` but 
+we still pass it to the component).
+
+```tsx
+interface StyledOverlayProps {
+  $zIndex: number;
+  $delay: string;
+}
+
+const StyledOverlay = styled.div<StyledOverlayProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: ${(props) => props.$zIndex};
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  animation: ${opacity} 0.25s linear ${(props) => `${props.$delay}`};
+  animation-fill-mode: forwards;
+  backdrop-filter: blur(4px);
+`;
+
+export interface OverlayProps {
+  zIndex: number;
+  delay: string;
+  onClick: () => void;
+}
+
+export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
+  useLockBodyScroll();
+
+  return (
+    <StyledOverlay
+      $zIndex={zIndex}
+      $delay={delay}
+      onClick={onClick}
+    />
+  );
+};
+```
+
+In the last couple of years, I felt in love with the TypeScript type system.
+It is so powerful and flexible that it allows you to write DSL with validation that other languages would dream of.
+A lot of colleagues still argue that this kind of knowledge on the specific part of TypeScript, but I strongly 
+disagree.
+Why? Because in this post, I will show you a practical application of the knowledge I acquired to solve the 
+problem above.
+In particular, we want to avoid coding two different interfaces,
+but just creating a new one starting from the `OverlayProps`
+that adds the `$` sign to the ones that should be transient props, and skips `$` 
+for the ones that are DOM attributes.
+
+#### Implementation
+
+Based on the description above, we want to define a `TransientProps` type that is able to:
+
+* add the `$` prefix to props that are not DOM attributes, and are defined by ourselves
+* skip the DOM props in some way, because they should still be forwarded
+
+To start ith the implementation, we need first to check some types exposed by React.  
+In particular for our use case it will be useful the [`ComponentProps` type](https://react-typescript-cheatsheet.netlify.app/docs/react-types/ComponentProps). 
+This utility type lets us extract the props of a React component received as generic parameter.  
+The other interesting type is `React.JSX.IntrinsicElements`.
+This is a type that declares which JSX elements are allowed/defined and their props.
+In the case of React DOM, these are the HTML tags.  
+So we can start to define some custom types.
+First a type to convert anything to a string, that we will call `Stringify`.
+Next a type that describe a possible `DOMElement`,
+that in our case will be `React.JSX.IntrinsicElements` or `false`,
+if we don't want to pass/we don't have the need to get the props of the underlying DOM node.
+
+```typescript
+type Stringify<PropName> = PropName extends string ? PropName : never;
+type DomElement = keyof React.JSX.IntrinsicElements | false;
+```
+
+So given a `DomElement`, we could have two cases:
+
+* we want to remap all the properties received because none of them is related to the underlying DOM node
+* we want to remap all the properties received expect the one related to the underlying node
+
+We can create a type that we will call `OmitDomProps`,
+that we will use to select the properties to be remapped into transient props based on the condition above.
+In particular, if we don't have a `DomElement` defined (so it `extends false`),
+we will just return the `CustomProps` received.
+If we have a `DomElement` (so it is inside the `React.JSX.IntrinsicElements` interface),
+we will omit its prop from the original `CustomProps` interface
+
+```typescript
+type OmitDomProps<CustomProps, Component extends DomElement> = Component extends false
+        ? keyof CustomProps
+        : keyof Omit<CustomProps, keyof ComponentProps<Component>>;
+```
+
+Now we are ready to create the `TransientProps` type.
+This type receives two generic parameters:
+
+* the `CustomProps` interface for which we want to remap the properties as transient ones.
+* the `IntrinsicElements` if needed to get the type of the underlying dome element. If not passed it will have a default `false` value and all the props will become transient. 
+
+This type will use TypeScript mapped types to remap the properties of `CustomProps` received.
+The utility types created before are used to conditionally filter out DOM properties if needed.
+We can add our utility type to the `styled-components` module.
+In this way,
+thanks to [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation), 
+we will have the `TransientProps` type exposed as it is a type from the framework itself.
+
+```typescript
+// ...Other imports...
+import React, { ComponentProps } from "react";
+
+declare module "styled-components" {
+  // ...Other needed types for defining styled components themes...
+  
+  type Stringify<PropName> = PropName extends string ? PropName : never;
+  type DomElement = keyof React.JSX.IntrinsicElements | false;
+  type OmitDomProps<CustomProps, Component extends DomElement> = Component extends false
+          ? keyof CustomProps
+          : keyof Omit<CustomProps, keyof ComponentProps<Component>>;
+
+  export type TransientProps<CustomProps, Component extends DomElement = false> = {
+    [Key in OmitDomProps<CustomProps, Component> as `$${Stringify<Key>}`]: CustomProps[Key];
+  };
+}
+```
+
+Below you can see `Overlay` component we saw above refactored with this new type.
+As you can see, no additional interface is needed to define the props of the component.
+In this case we are passing the `div` element to filter out the `onClick` prop (but as we mentioned before you can also 
+skip the second generic parameter so that all the props will become transient).
+
+```tsx
+export interface OverlayProps {
+  zIndex: number;
+  delay: string;
+  onClick: () => void;
+}
+
+const StyledOverlay = styled.div<TransientProps<OverlayProps, "div">>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: ${(props) => props.$zIndex};
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  animation: ${opacity} 0.25s linear ${(props) => `${props.$delay}`};
+  animation-fill-mode: forwards;
+  backdrop-filter: blur(4px);
+`;
+
+export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
+  useLockBodyScroll();
+
+  return <StyledOverlay $zIndex={zIndex} onClick={onClick} $delay={delay} />;
+};
+```
+
+#### Conclusion
+
+I love the TypeScript type system.
+Its flexibility and rich feature set are so vast and intricate that you could spend years
+exploring all its quirks and perks.
+Remember: with great power comes great responsibility. The same goes for the TypeScript type system. 
+So, make sure to read the documentation carefully before going off on a tangent :heart:.