@agility/plenum-ui 2.1.27 → 2.2.1

package/dist/tailwind.css

@@ -67985,6 +67985,34 @@ select {
   line-height: 3.75rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[20px\] {
+  font-size: 20px;
+}
+
+.text-\[24px\] {
+  font-size: 24px;
+}
+
+.text-\[28px\] {
+  font-size: 28px;
+}
+
+.text-\[32px\] {
+  font-size: 32px;
+}
+
+.text-\[36px\] {
+  font-size: 36px;
+}
+
+.text-\[40px\] {
+  font-size: 40px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -68031,7 +68059,7 @@ select {
 }
 
 .font-medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .font-normal {
@@ -68058,10 +68086,46 @@ select {
   line-height: 1.25rem;
 }
 
+.leading-\[14px\] {
+  line-height: 14px;
+}
+
+.leading-\[20px\] {
+  line-height: 20px;
+}
+
+.leading-\[28px\] {
+  line-height: 28px;
+}
+
+.leading-\[32px\] {
+  line-height: 32px;
+}
+
+.leading-\[36px\] {
+  line-height: 36px;
+}
+
+.leading-\[40px\] {
+  line-height: 40px;
+}
+
+.leading-\[44px\] {
+  line-height: 44px;
+}
+
+.leading-\[48px\] {
+  line-height: 48px;
+}
+
 .leading-none {
   line-height: 1;
 }
 
+.tracking-\[-0\.8px\] {
+  letter-spacing: -0.8px;
+}
+
 .\!text-gray-500 {
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important;
@@ -79050,6 +79114,11 @@ select {
   background-color: rgb(88 0 212 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-red-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
@@ -79216,6 +79285,16 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:\!ring-red-500:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) !important;
+}
+
+.focus-visible\:\!ring-yellow-500:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity, 1)) !important;
+}
+
 .focus-visible\:ring-purple-600:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));
@@ -79250,6 +79329,11 @@ select {
   background-color: rgb(188 153 238 / var(--tw-bg-opacity, 1));
 }
 
+.active\:bg-red-100:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .active\:bg-violet-800:active {
   --tw-bg-opacity: 1;
   background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
@@ -79276,6 +79360,11 @@ select {
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));
 }
 
+.active\:ring-red-500:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
+}
+
 .active\:ring-offset-2:active {
   --tw-ring-offset-width: 2px;
 }
@@ -79315,6 +79404,11 @@ select {
   background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
 }
 
+.disabled\:bg-white:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .disabled\:bg-yellow-300:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(255 224 126 / var(--tw-bg-opacity, 1));
@@ -79340,6 +79434,11 @@ select {
   color: rgb(188 153 238 / var(--tw-text-opacity, 1));
 }
 
+.disabled\:text-red-300:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
+
 .disabled\:text-transparent-black-30:disabled {
   color: rgba(0, 0, 0, 0.3);
 }
@@ -79353,6 +79452,12 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.disabled\:\!ring-0:disabled {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
 .disabled\:focus-visible\:ring-0:focus-visible:disabled {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/dist/types/stories/atoms/Typography/Heading/Heading.d.ts

@@ -0,0 +1,8 @@
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+    level: HeadingLevel;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/atoms/Typography/Heading/Heading.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Heading from "./Heading";
+declare const meta: Meta<typeof Heading>;
+type Story = StoryObj<typeof Heading>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const HeadingWithCustomClassName: Story;
+export default meta;

package/dist/types/stories/atoms/Typography/Heading/index.d.ts

@@ -0,0 +1,3 @@
+import Heading, { HeadingProps } from "./Heading";
+export { Heading };
+export type { HeadingProps };

package/dist/types/stories/atoms/Typography/Label/Label.d.ts

@@ -0,0 +1,10 @@
+type LabelAs = "span" | "p" | "label" | "strong" | "em";
+type LabelSize = "xl" | "lg" | "md" | "sm" | "xs";
+export interface LabelProps {
+    as?: LabelAs;
+    size?: LabelSize;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Label({ as, size, children, className }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/atoms/Typography/Label/Label.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+declare const meta: Meta<typeof Label>;
+type Story = StoryObj<typeof Label>;
+export declare const DefaultLabel: Story;
+export declare const ExtraLargeLabel: Story;
+export declare const LargeLabel: Story;
+export declare const MediumLabel: Story;
+export declare const SmallLabel: Story;
+export declare const ExtraSmallLabel: Story;
+export declare const LabelWithCustomStyle: Story;
+export default meta;

package/dist/types/stories/atoms/Typography/Label/index.d.ts

@@ -0,0 +1,3 @@
+import Label, { LabelProps } from "./Label";
+export { Label };
+export type { LabelProps };

package/dist/types/stories/atoms/Typography/Paragraph/Paragraph.d.ts

@@ -0,0 +1,10 @@
+type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
+type ParagraphSize = "lg" | "md" | "sm" | "xs";
+export interface ParagraphProps {
+    as?: ParagraphAs;
+    size?: ParagraphSize;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Paragraph({ as, size, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/atoms/Typography/Paragraph/Paragraph.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Paragraph from "./Paragraph";
+declare const meta: Meta<typeof Paragraph>;
+type Story = StoryObj<typeof Paragraph>;
+export declare const DefaultParagraph: Story;
+export declare const LargeParagraph: Story;
+export declare const MediumParagraph: Story;
+export declare const SmallParagraph: Story;
+export declare const ExtraSmallParagraph: Story;
+export declare const ParagraphWithCustomStyle: Story;
+export default meta;

package/dist/types/stories/atoms/Typography/Paragraph/index.d.ts

@@ -0,0 +1,3 @@
+import Paragraph, { ParagraphProps } from "./Paragraph";
+export { Paragraph };
+export type { ParagraphProps };

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
-export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "warning";
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "danger-secondary" | "warning";
 export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
     /** Is the button a Primary CTA, alternative or danger button? */
     actionType?: BTNActionType;

package/dist/types/stories/atoms/buttons/Button/DangerSecondary/DangerSecondary.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "../Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const DangerSecondary: Story;
+export declare const DangerSecondaryDisabled: Story;
+export declare const DangerSecondaryTrailingIcon: Story;
+export declare const DangerSecondaryLeadingIcon: Story;
+export declare const DangerSecondarySimpleIconName: Story;
+export declare const DangerSecondaryExtraSmall: Story;
+export declare const DangerSecondarySmall: Story;
+export declare const DangerSecondaryMedium: Story;
+export declare const DangerSecondaryLarge: Story;
+export declare const DangerSecondaryExtraLarge: Story;

package/dist/types/stories/atoms/index.d.ts

@@ -3,5 +3,8 @@ import Badge, { IBadgeProps } from "./badges";
 import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import { DynamicIcon, FAIconName, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./icons";
 import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
-export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
+import { Heading, HeadingProps } from "./Typography/Heading";
+import { Label, LabelProps } from "./Typography/Label";
+import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
+export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
-import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./atoms";
+import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } from "./atoms";
 import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "./molecules";
 import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons, DropdownWithMultiSelect, MultiSelectItemProps } from "./organisms";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect };
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };

package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts

@@ -34,6 +34,10 @@ export interface ITextInputProps {
     /**Placeholder input text*/
     placeholder?: string;
     className?: string;
+    /** Callback on focus */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Callback on blur */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 declare const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default _TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.27",
+	"version": "2.2.1",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/atoms/Typography/Heading/Heading.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Heading from "./Heading";
+
+const meta: Meta<typeof Heading> = {
+	title: "Design System/atoms/Typography/Heading",
+	component: Heading,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Heading>;
+
+export const Heading1: Story = {
+	args: { level: 1, children: "Heading 1", className: "" }
+};
+
+export const Heading2: Story = {
+	args: { level: 2, children: "Heading 2", className: "" }
+};
+
+export const Heading3: Story = {
+	args: { level: 3, children: "Heading 3", className: "" }
+};
+
+export const Heading4: Story = {
+	args: { level: 4, children: "Heading 4", className: "" }
+};
+
+export const Heading5: Story = {
+	args: { level: 5, children: "Heading 5", className: "" }
+};
+
+export const Heading6: Story = {
+	args: { level: 6, children: "Heading 6", className: "" }
+};
+
+export const HeadingWithCustomClassName: Story = {
+	args: { level: 1, children: "Heading 1", className: "text-red-500" }
+};
+
+export default meta;

package/stories/atoms/Typography/Heading/Heading.tsx

@@ -0,0 +1,26 @@
+import { default as cn } from "classnames";
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface HeadingProps {
+	level: HeadingLevel;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const headingStyles: Record<HeadingLevel, string> = {
+	1: "text-[40px] leading-[48px]",
+	2: "text-[36px] leading-[44px]",
+	3: "text-[32px] leading-[40px]",
+	4: "text-[28px] leading-[36px]",
+	5: "text-[24px] leading-[32px]",
+	6: "text-[20px] leading-[28px]"
+};
+
+export default function Heading({ level, children, className }: HeadingProps) {
+	const Tag = `h${level}` as const;
+
+	return (
+		<Tag className={cn("gray-900 font-medium tracking-[-0.8px]", headingStyles[level], className)}>{children}</Tag>
+	);
+}

package/stories/atoms/Typography/Heading/index.ts

@@ -0,0 +1,3 @@
+import Heading, { HeadingProps } from "./Heading";
+export { Heading };
+export type { HeadingProps };

package/stories/atoms/Typography/Label/Label.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+
+const meta: Meta<typeof Label> = {
+	title: "Design System/atoms/Typography/Label",
+	component: Label,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Label>;
+
+export const DefaultLabel: Story = {
+	args: { children: "Default Label" }
+};
+
+export const ExtraLargeLabel: Story = {
+	args: { children: "Extra Large Label", size: "xl" }
+};
+
+export const LargeLabel: Story = {
+	args: { children: "Large Label", size: "lg" }
+};
+
+export const MediumLabel: Story = {
+	args: { children: "Medium Label", size: "md" }
+};
+
+export const SmallLabel: Story = {
+	args: { children: "Small Label", size: "sm" }
+};
+
+export const ExtraSmallLabel: Story = {
+	args: { children: "Extra Small Label", size: "xs" }
+};
+
+export const LabelWithCustomStyle: Story = {
+	args: { children: "Label With Custom Style", className: "text-red-500" }
+};
+
+export default meta;

package/stories/atoms/Typography/Label/Label.tsx

@@ -0,0 +1,25 @@
+import { default as cn } from "classnames";
+
+type LabelAs = "span" | "p" | "label" | "strong" | "em";
+type LabelSize = "xl" | "lg" | "md" | "sm" | "xs";
+
+export interface LabelProps {
+	as?: LabelAs;
+	size?: LabelSize;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const labelStyles: Record<LabelSize, string> = {
+	xl: "text-lg tracking[-0.36px]",
+	lg: "text-base tracking[-0.32px]",
+	md: "text-sm tracking[-0.28px]",
+	sm: "text-xs tracking[-0.24px]",
+	xs: "text-[10px] leading-[14px] tracking[-0.2px]"
+};
+
+export default function Label({ as = "span", size = "md", children, className }: LabelProps) {
+	const Tag = as;
+
+	return <Tag className={cn("gray-900 font-medium", labelStyles[size], className)}>{children}</Tag>;
+}

package/stories/atoms/Typography/Label/index.ts

@@ -0,0 +1,3 @@
+import Label, { LabelProps } from "./Label";
+export { Label };
+export type { LabelProps };

package/stories/atoms/Typography/Paragraph/Paragraph.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Paragraph from "./Paragraph";
+
+const meta: Meta<typeof Paragraph> = {
+	title: "Design System/atoms/Typography/Paragraph",
+	component: Paragraph,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Paragraph>;
+
+export const DefaultParagraph: Story = {
+	args: { children: "Default Paragraph" }
+};
+
+export const LargeParagraph: Story = {
+	args: { children: "Large Paragraph", size: "lg" }
+};
+
+export const MediumParagraph: Story = {
+	args: { children: "Medium Paragraph", size: "md" }
+};
+
+export const SmallParagraph: Story = {
+	args: { children: "Small Paragraph", size: "sm" }
+};
+
+export const ExtraSmallParagraph: Story = {
+	args: { children: "Extra Small Paragraph", size: "xs" }
+};
+
+export const ParagraphWithCustomStyle: Story = {
+	args: { children: "Paragraph With Custom Style", className: "text-red-500" }
+};
+
+export default meta;

package/stories/atoms/Typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,24 @@
+import { default as cn } from "classnames";
+
+type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
+type ParagraphSize = "lg" | "md" | "sm" | "xs";
+
+export interface ParagraphProps {
+	as?: ParagraphAs;
+	size?: ParagraphSize;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const paragraphStyles: Record<ParagraphSize, string> = {
+	lg: "text-lg",
+	md: "text-base",
+	sm: "text-sm",
+	xs: "text-xs leading-[20px]"
+};
+
+export default function Paragraph({ as = "p", size = "md", children, className }: ParagraphProps) {
+	const Tag = as;
+
+	return <Tag className={cn("gray-900 font-normal", paragraphStyles[size], className)}>{children}</Tag>;
+}

package/stories/atoms/Typography/Paragraph/index.ts

@@ -0,0 +1,3 @@
+import Paragraph, { ParagraphProps } from "./Paragraph";
+export { Paragraph };
+export type { ParagraphProps };