From 75976a9575855ba62f9ace1259550a1210fb9edd Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 12:46:41 +0330
Subject: [PATCH 01/10] add flex

---
 src/components/layout/Flex.tsx | 39 ++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/layout/Flex.tsx

diff --git a/src/components/layout/Flex.tsx b/src/components/layout/Flex.tsx
new file mode 100644
index 0000000..f688011
--- /dev/null
+++ b/src/components/layout/Flex.tsx
@@ -0,0 +1,39 @@
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+
+interface IFlexProps {
+	$flexWrap?: boolean;
+	$alignItems?: CSSProperties['alignItems'];
+	$justifyContent?: CSSProperties['justifyContent'];
+	$flexDirection?: CSSProperties['flexDirection'];
+	gap?: string;
+}
+
+export const Flex = styled.div<IFlexProps>`
+	display: flex;
+	flex-direction: ${props =>
+		props.$flexDirection ? props.$flexDirection : 'initial'};
+	flex-wrap: ${props => (props.$flexWrap ? 'wrap' : 'nowrap')};
+	align-items: ${props =>
+		props.$alignItems ? props.$alignItems : 'initial'};
+	justify-content: ${props =>
+		props.$justifyContent ? props.$justifyContent : 'initial'};
+	gap: ${props => props.gap};
+`;
+
+interface IFlexCenter {
+	gap?: string;
+	direction?: CSSProperties['flexDirection'];
+}
+
+export const FlexCenter = styled.div<IFlexCenter>`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: ${props => props.gap};
+	flex-direction: ${props => props.direction};
+`;
+
+export const FlexSpacer = styled.div`
+	flex: 1;
+`;

From a2c851d820176ef2a624569159b3bdbe09d9076b Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 12:47:03 +0330
Subject: [PATCH 02/10] fix button links

---
 src/components/buttonLinks/ButtonLink.tsx     |  6 ++--
 .../buttonLinks/OutlineButtonLink.tsx         |  6 ++--
 src/components/buttonLinks/type.ts            | 29 +++++++++++--------
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
index 0064fef..a40fcb8 100644
--- a/src/components/buttonLinks/ButtonLink.tsx
+++ b/src/components/buttonLinks/ButtonLink.tsx
@@ -16,7 +16,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	gap: 4px;
 	white-space: nowrap;
 	${props => {
-		switch (props.linkType) {
+		switch (props.$linkType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -110,7 +110,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.linkType) {
+			switch (props.$linkType) {
 				case 'primary':
 					return css`
 						color: ${neutralColors.gray[100]};
@@ -169,7 +169,7 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 				href={href}
 				as={isExternal ? 'a' : 'span'}
 				target={target}
-				linkType={linkType}
+				$linkType={linkType}
 				disabled={disabled}
 				size={size}
 				className={className}
diff --git a/src/components/buttonLinks/OutlineButtonLink.tsx b/src/components/buttonLinks/OutlineButtonLink.tsx
index a1d3542..793527d 100644
--- a/src/components/buttonLinks/OutlineButtonLink.tsx
+++ b/src/components/buttonLinks/OutlineButtonLink.tsx
@@ -18,7 +18,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
 	gap: 4px;
 	white-space: nowrap;
 	${props => {
-		switch (props.linkType) {
+		switch (props.$linkType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -55,7 +55,7 @@ const ButtonLinkContainer = styled.span<IButtonLinkContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.linkType) {
+			switch (props.$linkType) {
 				case 'primary':
 					return css`
 						color: ${brandColors.pinky[500]};
@@ -97,7 +97,7 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 				ref={ref as any}
 				href={href}
 				target={target}
-				linkType={linkType}
+				$linkType={linkType}
 				size={size}
 				disabled={disabled}
 				className={className}
diff --git a/src/components/buttonLinks/type.ts b/src/components/buttonLinks/type.ts
index 80218fe..07f0ad3 100644
--- a/src/components/buttonLinks/type.ts
+++ b/src/components/buttonLinks/type.ts
@@ -1,22 +1,27 @@
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 
+export type ButtonStyleType =
+	| 'primary'
+	| 'secondary'
+	| 'texty'
+	| 'texty-gray'
+	| 'texty-primary'
+	| 'texty-secondary';
+
+export type ButtonSize = 'small' | 'medium' | 'large';
+
 export interface IButtonLinkContainerProps {
-	linkType?:
-		| 'primary'
-		| 'secondary'
-		| 'texty'
-		| 'texty-gray'
-		| 'texty-primary'
-		| 'texty-secondary';
-	size?: 'small' | 'medium' | 'large';
+	$linkType?: ButtonStyleType;
+	size?: ButtonSize;
 	disabled?: boolean;
-	isExternal?: boolean;
 }
 
-export interface IButtonLinkProps
-	extends ComponentPropsWithoutRef<'a'>,
-		IButtonLinkContainerProps {
+export interface IButtonLinkProps extends ComponentPropsWithoutRef<'a'> {
 	icon?: ReactNode;
 	leftIcon?: ReactNode;
 	label: string;
+	linkType?: ButtonStyleType;
+	isExternal?: boolean;
+	size?: ButtonSize;
+	disabled?: boolean;
 }

From 88bd5434ccd2f0a2c3e4fd460bbf517fde6ebbc3 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 12:47:11 +0330
Subject: [PATCH 03/10] fix buttons

---
 src/components/buttons/Button.tsx        | 18 +++++++++---------
 src/components/buttons/OutlineButton.tsx |  8 ++++----
 src/components/buttons/common.tsx        |  4 ++--
 src/components/buttons/type.ts           | 18 +++++++-----------
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 1578964..3174b79 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -19,7 +19,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	user-select: none;
 	${props => {
 		if (props.disabled) {
-			if (props.buttonType === 'texty') {
+			if (props.$buttonType === 'texty') {
 				return css`
 					color: ${brandColors.giv[500]};
 					background-color: unset;
@@ -27,7 +27,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-gray') {
+			if (props.$buttonType === 'texty-gray') {
 				return css`
 					color: ${neutralColors.gray[300]};
 					background-color: unset;
@@ -35,7 +35,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-primary') {
+			if (props.$buttonType === 'texty-primary') {
 				return css`
 					color: ${brandColors.pinky[500]};
 					background-color: unset;
@@ -43,7 +43,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'texty-secondary') {
+			if (props.$buttonType === 'texty-secondary') {
 				return css`
 					color: ${brandColors.giv[500]};
 					background-color: unset;
@@ -51,7 +51,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 					opacity: 0.5;
 				`;
 			}
-			if (props.buttonType === 'primary') {
+			if (props.$buttonType === 'primary') {
 				return css`
 					background-color: ${brandColors.pinky[300]};
 					color: ${brandColors.pinky[200]};
@@ -63,7 +63,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 				opacity: 0.5;
 			`;
 		}
-		switch (props.buttonType) {
+		switch (props.$buttonType) {
 			case 'primary':
 				return css`
 					color: ${neutralColors.gray[100]};
@@ -109,7 +109,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return css`
 						color: ${neutralColors.gray[100]};
@@ -161,7 +161,7 @@ export const Button: FC<IButtonProps> = ({
 }) => {
 	return (
 		<ButtonContainer
-			buttonType={buttonType}
+			$buttonType={buttonType}
 			size={size}
 			disabled={disabled}
 			onClick={onClick}
@@ -170,7 +170,7 @@ export const Button: FC<IButtonProps> = ({
 		>
 			<LoadingContainer loading={+loading}>
 				{loading && (
-					<Loader buttonType={buttonType} disabled={disabled} />
+					<Loader $buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
 			{leftIcon && leftIcon}
diff --git a/src/components/buttons/OutlineButton.tsx b/src/components/buttons/OutlineButton.tsx
index 1be0a02..320be35 100644
--- a/src/components/buttons/OutlineButton.tsx
+++ b/src/components/buttons/OutlineButton.tsx
@@ -20,7 +20,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
 	white-space: nowrap;
 	user-select: none;
 	${props => {
-		switch (props.buttonType) {
+		switch (props.$buttonType) {
 			case 'primary':
 				return props.disabled
 					? css`
@@ -64,7 +64,7 @@ const ButtonContainer = styled.button<IButtonContainerProps>`
   :hover {
 		${props => {
 			if (props.disabled) return '';
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return css`
 						color: ${brandColors.pinky[500]};
@@ -99,7 +99,7 @@ export const OutlineButton: FC<IButtonProps> = ({
 }) => {
 	return (
 		<ButtonContainer
-			buttonType={buttonType}
+			$buttonType={buttonType}
 			disabled={disabled}
 			onClick={onClick}
 			className={className}
@@ -108,7 +108,7 @@ export const OutlineButton: FC<IButtonProps> = ({
 		>
 			<LoadingContainer loading={+loading}>
 				{loading && (
-					<Loader buttonType={buttonType} disabled={disabled} />
+					<Loader $buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
 			{leftIcon && leftIcon}
diff --git a/src/components/buttons/common.tsx b/src/components/buttons/common.tsx
index f061170..0d1fa93 100644
--- a/src/components/buttons/common.tsx
+++ b/src/components/buttons/common.tsx
@@ -13,12 +13,12 @@ export const Loader = styled.div<IButtonContainerProps>`
 	border: 3px solid
 		${props => {
 			if (props.disabled) {
-				switch (props.buttonType) {
+				switch (props.$buttonType) {
 					case 'primary':
 						return brandColors.pinky[400];
 				}
 			}
-			switch (props.buttonType) {
+			switch (props.$buttonType) {
 				case 'primary':
 					return brandColors.pinky[600];
 				case 'secondary':
diff --git a/src/components/buttons/type.ts b/src/components/buttons/type.ts
index 7f541a7..8a9cdf0 100644
--- a/src/components/buttons/type.ts
+++ b/src/components/buttons/type.ts
@@ -1,22 +1,18 @@
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ButtonSize, ButtonStyleType } from '../buttonLinks/type';
 
 export interface IButtonContainerProps {
-	buttonType?:
-		| 'primary'
-		| 'secondary'
-		| 'texty'
-		| 'texty-gray'
-		| 'texty-primary'
-		| 'texty-secondary';
+	$buttonType?: ButtonStyleType;
 	disabled?: boolean;
-	size?: 'small' | 'medium' | 'large';
+	size?: ButtonSize;
 }
 
-export interface IButtonProps
-	extends ComponentPropsWithoutRef<'button'>,
-		IButtonContainerProps {
+export interface IButtonProps extends ComponentPropsWithoutRef<'button'> {
 	loading?: boolean;
 	label: string;
 	icon?: ReactNode;
 	leftIcon?: ReactNode;
+	buttonType?: ButtonStyleType;
+	disabled?: boolean;
+	size?: ButtonSize;
 }

From 73420851d6b646f5ffeb9fbf77c3a0bede5556de Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 12:49:04 +0330
Subject: [PATCH 04/10] fix CSSProperties import

---
 src/components/layout/Flex.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Flex.tsx b/src/components/layout/Flex.tsx
index f688011..587095a 100644
--- a/src/components/layout/Flex.tsx
+++ b/src/components/layout/Flex.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 import styled from 'styled-components';
 
 interface IFlexProps {

From 80a5c94824efdc3f1a5c6cccba525260aec03972 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:19:21 +0330
Subject: [PATCH 05/10] fix D

---
 src/components/typography/displays/D.tsx  | 10 ++++++++++
 src/components/typography/displays/D1.tsx |  8 ++------
 src/components/typography/displays/D2.tsx |  8 ++------
 src/components/typography/displays/D3.tsx |  8 ++------
 4 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 src/components/typography/displays/D.tsx

diff --git a/src/components/typography/displays/D.tsx b/src/components/typography/displays/D.tsx
new file mode 100644
index 0000000..d5bf345
--- /dev/null
+++ b/src/components/typography/displays/D.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const D = styled.div`
+	/* Display/D1 */
+	font-family: TeX Gyre Adventor, sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: -0.04em;
+	color: ${props => (props.color ? props.color : 'inherit')};
+`;
diff --git a/src/components/typography/displays/D1.tsx b/src/components/typography/displays/D1.tsx
index 8e67f6e..b3275df 100644
--- a/src/components/typography/displays/D1.tsx
+++ b/src/components/typography/displays/D1.tsx
@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { mediaQueries } from '../../../common/deviceSize';
+import { D } from './D';
 
-export const D1 = styled.div`
+export const D1 = styled(D)`
 	/* Display/D1 */
-	font-family: TeX Gyre Adventor, sans-serif;
-	font-style: normal;
-	font-weight: 700;
 	font-size: 5rem;
 	line-height: 130%;
-	letter-spacing: -0.04em;
-	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.69rem;
 	}
diff --git a/src/components/typography/displays/D2.tsx b/src/components/typography/displays/D2.tsx
index 82a2747..91442c9 100644
--- a/src/components/typography/displays/D2.tsx
+++ b/src/components/typography/displays/D2.tsx
@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { mediaQueries } from '../../../common/deviceSize';
+import { D } from './D';
 
-export const D2 = styled.div`
+export const D2 = styled(D)`
 	/* Display/D2 */
-	font-family: TeX Gyre Adventor, sans-serif;
-	font-style: normal;
-	font-weight: 700;
 	font-size: 4.625rem;
 	line-height: 130%;
-	letter-spacing: -0.04em;
-	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.06rem;
 	}
diff --git a/src/components/typography/displays/D3.tsx b/src/components/typography/displays/D3.tsx
index 1cc19c7..cc32450 100644
--- a/src/components/typography/displays/D3.tsx
+++ b/src/components/typography/displays/D3.tsx
@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { mediaQueries } from '../../../common/deviceSize';
+import { D } from './D';
 
-export const D3 = styled.div`
+export const D3 = styled(D)`
 	/* Display/D3 */
-	font-family: TeX Gyre Adventor, sans-serif;
-	font-style: normal;
-	font-weight: 700;
 	font-size: 4.25rem;
 	line-height: 120%;
-	letter-spacing: -0.04em;
-	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 5.5rem;
 	}

From 1f9c72489ee21bb0c508c958bf918a243a306496 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:19:37 +0330
Subject: [PATCH 06/10] fix caption

---
 src/components/typography/body/Caption.tsx      | 4 ++--
 src/stories/typography/body/Caption.stories.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx
index 8c5dc56..e5e58d7 100644
--- a/src/components/typography/body/Caption.tsx
+++ b/src/components/typography/body/Caption.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 export interface ICaptionProps {
-	medium?: boolean;
+	$medium?: boolean;
 }
 
 export const Caption = styled.div<ICaptionProps>`
 	/* Body/Caption */
 	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
-	font-weight: ${props => (props.medium ? 500 : 400)};
+	font-weight: ${props => (props.$medium ? 500 : 400)};
 	font-size: 0.875rem;
 	line-height: 150%;
 	color: ${props => (props.color ? props.color : 'inherit')};
diff --git a/src/stories/typography/body/Caption.stories.tsx b/src/stories/typography/body/Caption.stories.tsx
index e379d9e..54a527a 100644
--- a/src/stories/typography/body/Caption.stories.tsx
+++ b/src/stories/typography/body/Caption.stories.tsx
@@ -9,8 +9,11 @@ export default {
 
 const Template: ComponentStory<typeof Caption> = args => (
 	<Caption {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</Caption>
 );
 
 export const Example = Template.bind({});
+Example.args = {
+	$medium: true,
+};

From 3e0b36ceff63cbf9bd38dda0793392da5fa93c8f Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:20:13 +0330
Subject: [PATCH 07/10] fix stories

---
 src/stories/Button.stories.tsx                      | 2 +-
 src/stories/ButtonLink.stories.tsx                  | 2 +-
 src/stories/OutlineButton.stories.tsx               | 2 +-
 src/stories/OutlineButtonLink.stories.tsx           | 2 +-
 src/stories/typography/body/B.stories.tsx           | 2 +-
 src/stories/typography/body/Lead.stories.tsx        | 2 +-
 src/stories/typography/body/P.stories.tsx           | 2 +-
 src/stories/typography/body/SemiTitle.stories.tsx   | 2 +-
 src/stories/typography/body/Subline.stories.tsx     | 2 +-
 src/stories/typography/body/SublineBold.stories.tsx | 2 +-
 src/stories/typography/body/Title.stories.tsx       | 2 +-
 src/stories/typography/displays/D1.stories.tsx      | 2 +-
 src/stories/typography/displays/D2.stories.tsx      | 2 +-
 src/stories/typography/displays/D3.stories.tsx      | 2 +-
 src/stories/typography/headings/H1.stories.tsx      | 2 +-
 src/stories/typography/headings/H2.stories.tsx      | 2 +-
 src/stories/typography/headings/H3.stories.tsx      | 2 +-
 src/stories/typography/headings/H4.stories.tsx      | 2 +-
 src/stories/typography/headings/H5.stories.tsx      | 2 +-
 src/stories/typography/headings/H6.stories.tsx      | 2 +-
 20 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index db67f7a..306557d 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = args => (
-	<Button {...args}>{args.label}</Button>
+	<Button {...args}>{args.title}</Button>
 );
 
 export const Primary = Template.bind({});
diff --git a/src/stories/ButtonLink.stories.tsx b/src/stories/ButtonLink.stories.tsx
index 6c2ad31..23598e7 100644
--- a/src/stories/ButtonLink.stories.tsx
+++ b/src/stories/ButtonLink.stories.tsx
@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof ButtonLink>;
 
 const Template: ComponentStory<typeof ButtonLink> = args => (
-	<ButtonLink {...args}>{args.label}</ButtonLink>
+	<ButtonLink {...args}>{args.title}</ButtonLink>
 );
 
 export const Primary = Template.bind({});
diff --git a/src/stories/OutlineButton.stories.tsx b/src/stories/OutlineButton.stories.tsx
index 3cbce9f..138c375 100644
--- a/src/stories/OutlineButton.stories.tsx
+++ b/src/stories/OutlineButton.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof OutlineButton>;
 
 const Template: ComponentStory<typeof OutlineButton> = args => (
-	<OutlineButton {...args}>{args.label}</OutlineButton>
+	<OutlineButton {...args}>{args.title}</OutlineButton>
 );
 
 export const OutlinePrimary = Template.bind({});
diff --git a/src/stories/OutlineButtonLink.stories.tsx b/src/stories/OutlineButtonLink.stories.tsx
index 51c9ccb..7f410c5 100644
--- a/src/stories/OutlineButtonLink.stories.tsx
+++ b/src/stories/OutlineButtonLink.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof OutlineLinkButton>;
 
 const Template: ComponentStory<typeof OutlineLinkButton> = args => (
-	<OutlineLinkButton {...args}>{args.label}</OutlineLinkButton>
+	<OutlineLinkButton {...args}>{args.title}</OutlineLinkButton>
 );
 
 export const OutlinePrimary = Template.bind({});
diff --git a/src/stories/typography/body/B.stories.tsx b/src/stories/typography/body/B.stories.tsx
index f73e4c1..4d10ea3 100644
--- a/src/stories/typography/body/B.stories.tsx
+++ b/src/stories/typography/body/B.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof B> = args => (
 	<B {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</B>
 );
 
diff --git a/src/stories/typography/body/Lead.stories.tsx b/src/stories/typography/body/Lead.stories.tsx
index e1a5b05..decb51a 100644
--- a/src/stories/typography/body/Lead.stories.tsx
+++ b/src/stories/typography/body/Lead.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof Lead> = args => (
 	<Lead {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</Lead>
 );
 
diff --git a/src/stories/typography/body/P.stories.tsx b/src/stories/typography/body/P.stories.tsx
index ae52382..bede8ad 100644
--- a/src/stories/typography/body/P.stories.tsx
+++ b/src/stories/typography/body/P.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof P> = args => (
 	<P {...args} color='red'>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</P>
 );
 
diff --git a/src/stories/typography/body/SemiTitle.stories.tsx b/src/stories/typography/body/SemiTitle.stories.tsx
index a3d0798..d8710ac 100644
--- a/src/stories/typography/body/SemiTitle.stories.tsx
+++ b/src/stories/typography/body/SemiTitle.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof SemiTitle> = args => (
 	<SemiTitle {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</SemiTitle>
 );
 
diff --git a/src/stories/typography/body/Subline.stories.tsx b/src/stories/typography/body/Subline.stories.tsx
index a014175..685722d 100644
--- a/src/stories/typography/body/Subline.stories.tsx
+++ b/src/stories/typography/body/Subline.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof Subline> = args => (
 	<Subline {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</Subline>
 );
 
diff --git a/src/stories/typography/body/SublineBold.stories.tsx b/src/stories/typography/body/SublineBold.stories.tsx
index 085b653..033cb3b 100644
--- a/src/stories/typography/body/SublineBold.stories.tsx
+++ b/src/stories/typography/body/SublineBold.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof SublineBold> = args => (
 	<SublineBold {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</SublineBold>
 );
 
diff --git a/src/stories/typography/body/Title.stories.tsx b/src/stories/typography/body/Title.stories.tsx
index a35481d..4ce8590 100644
--- a/src/stories/typography/body/Title.stories.tsx
+++ b/src/stories/typography/body/Title.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: ComponentStory<typeof Title> = args => (
 	<Title {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</Title>
 );
 
diff --git a/src/stories/typography/displays/D1.stories.tsx b/src/stories/typography/displays/D1.stories.tsx
index ef9108a..2a0a690 100644
--- a/src/stories/typography/displays/D1.stories.tsx
+++ b/src/stories/typography/displays/D1.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 const Template: ComponentStory<typeof D1> = args => (
 	<D1 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</D1>
 );
 
diff --git a/src/stories/typography/displays/D2.stories.tsx b/src/stories/typography/displays/D2.stories.tsx
index 8c272b3..9603952 100644
--- a/src/stories/typography/displays/D2.stories.tsx
+++ b/src/stories/typography/displays/D2.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 const Template: ComponentStory<typeof D2> = args => (
 	<D2 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</D2>
 );
 
diff --git a/src/stories/typography/displays/D3.stories.tsx b/src/stories/typography/displays/D3.stories.tsx
index 4d10a22..c881d23 100644
--- a/src/stories/typography/displays/D3.stories.tsx
+++ b/src/stories/typography/displays/D3.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 const Template: ComponentStory<typeof D3> = args => (
 	<D3 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</D3>
 );
 
diff --git a/src/stories/typography/headings/H1.stories.tsx b/src/stories/typography/headings/H1.stories.tsx
index a1f429b..c451cce 100644
--- a/src/stories/typography/headings/H1.stories.tsx
+++ b/src/stories/typography/headings/H1.stories.tsx
@@ -16,7 +16,7 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof H1> = args => (
 	<H1 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H1>
 );
 
diff --git a/src/stories/typography/headings/H2.stories.tsx b/src/stories/typography/headings/H2.stories.tsx
index fbb9f5e..a43928d 100644
--- a/src/stories/typography/headings/H2.stories.tsx
+++ b/src/stories/typography/headings/H2.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const Template: ComponentStory<typeof H2> = args => (
 	<H2 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H2>
 );
 
diff --git a/src/stories/typography/headings/H3.stories.tsx b/src/stories/typography/headings/H3.stories.tsx
index 38bf86d..849a128 100644
--- a/src/stories/typography/headings/H3.stories.tsx
+++ b/src/stories/typography/headings/H3.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const Template: ComponentStory<typeof H3> = args => (
 	<H3 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H3>
 );
 
diff --git a/src/stories/typography/headings/H4.stories.tsx b/src/stories/typography/headings/H4.stories.tsx
index 0e3529b..a5433cc 100644
--- a/src/stories/typography/headings/H4.stories.tsx
+++ b/src/stories/typography/headings/H4.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const Template: ComponentStory<typeof H4> = args => (
 	<H4 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H4>
 );
 
diff --git a/src/stories/typography/headings/H5.stories.tsx b/src/stories/typography/headings/H5.stories.tsx
index c56c864..6c154bc 100644
--- a/src/stories/typography/headings/H5.stories.tsx
+++ b/src/stories/typography/headings/H5.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const Template: ComponentStory<typeof H5> = args => (
 	<H5 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H5>
 );
 
diff --git a/src/stories/typography/headings/H6.stories.tsx b/src/stories/typography/headings/H6.stories.tsx
index 77faf2c..46bdf05 100644
--- a/src/stories/typography/headings/H6.stories.tsx
+++ b/src/stories/typography/headings/H6.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const Template: ComponentStory<typeof H6> = args => (
 	<H6 {...args}>
-		{args.label || 'Was he a beast if music could move him so?'}
+		{args.title || 'Was he a beast if music could move him so?'}
 	</H6>
 );
 

From 39a8e8b1b005adce2dc6f8dcf32178cde846c47d Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:22:42 +0330
Subject: [PATCH 08/10] change styleType tp $styleType

---
 src/components/typography/Overline.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx
index 3460c24..1ef88d8 100644
--- a/src/components/typography/Overline.tsx
+++ b/src/components/typography/Overline.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export interface IOverlineProps {
-	styleType?: 'Small' | 'Regular' | 'Italic';
+	$styleType?: 'Small' | 'Regular' | 'Italic';
 }
 
 export const Overline = styled.span<IOverlineProps>`
@@ -10,7 +10,7 @@ export const Overline = styled.span<IOverlineProps>`
 	line-height: 132%;
 	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
-		switch (props.styleType) {
+		switch (props.$styleType) {
 			case 'Small':
 				return 'font-size: 0.625rem;font-style: normal;font-weight: 500;';
 			case 'Regular':

From 7251911614940b5f65487bf30674547dd6d79b81 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:23:03 +0330
Subject: [PATCH 09/10] fix: add flex

---
 src/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/index.ts b/src/components/index.ts
index 68945ab..f36a83d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -30,6 +30,7 @@ export * from './buttonLinks/ButtonLink';
 export * from './buttonLinks/OutlineButtonLink';
 
 export * from './layout/Grid';
+export * from './layout/Flex';
 
 export * from './icons';
 export * from './icons/type';

From 15127f472ff38c17e351d3a4fe0cb1e6bbaeff4b Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 25 Feb 2024 13:36:26 +0330
Subject: [PATCH 10/10] update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 65f1a89..2bcf597 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.21",
+	"version": "1.11.22",
 	"files": [
 		"/lib"
 	],