@julseb-lib/react 0.1.3 → 0.1.4

package/dist/lib/Mixins.tsx

@@ -1,990 +0,0 @@
-import { css, type DefaultTheme } from "styled-components"
-import type { Property } from "csstype"
-import { stringifyPx } from "@julseb-lib/utils"
-import { overlaysMap } from "./lib-utils"
-import {
-	COLORS_LIGHT,
-	COLORS_DARK,
-	RADIUSES,
-	SHADOWS,
-	SPACERS,
-	TRANSITIONS,
-	FONT_SIZES,
-	FONT_WEIGHTS,
-} from "./Variables"
-import { designTokens } from "./design-tokens"
-import {
-	type LibAllColors,
-	type LibColorsShort,
-	type LibColorsHover,
-	type LibOverlays,
-	type ILibRadius,
-	type LibShadows,
-	type ILibBoxShadow,
-	type LibSpacers,
-	type ILibPadding,
-	type LibTransitions,
-	type LibRadiuses,
-	type CssJustifyItems,
-	type CssAlignItems,
-	type CssJustifyContent,
-	type CssAlignContent,
-	type CssFlexDirection,
-	type CssFlexWrap,
-	type LibFontSizes,
-	type LibFontWeights,
-	type ILibMargin,
-	type ILibBorder,
-	type LibAllColorsAndOverlays,
-	type ILibOutline,
-	type LibColorsHoverAndCurrent,
-	type LibThemeNames,
-	type LibPositionExtract,
-} from "./types"
-
-type ILibIconMixin = {
-	$name: string
-	$color?: LibAllColors
-	$size?: number
-	$isLibIcon?: boolean
-}
-
-const getColorMixinFromTheme = (
-	theme: DefaultTheme | null = COLORS_LIGHT,
-	themeName?: LibThemeNames
-) => {
-	let THEME: DefaultTheme
-
-	if (themeName) {
-		THEME = (
-			themeName === "dark" ? COLORS_DARK : COLORS_LIGHT
-		) as DefaultTheme
-	} else if (theme === null) {
-		THEME = COLORS_LIGHT
-	} else {
-		THEME = theme
-	}
-
-	const colorsShortMap = new Map<LibColorsShort, keyof typeof THEME>([
-		["primary", "PRIMARY_500"],
-		["secondary", "SECONDARY_500"],
-		["success", "SUCCESS_500"],
-		["danger", "DANGER_500"],
-		["warning", "WARNING_500"],
-		["gray", "GRAY_500"],
-		["black", "BLACK"],
-		["white", "WHITE"],
-	])
-
-	const allColorsMap = new Map<LibAllColors, keyof typeof THEME>([
-		...Array.from(colorsShortMap.entries()),
-		["gray-50", "GRAY_50"],
-		["gray-100", "GRAY_100"],
-		["gray-200", "GRAY_200"],
-		["gray-300", "GRAY_300"],
-		["gray-400", "GRAY_400"],
-		["gray-500", "GRAY_500"],
-		["gray-600", "GRAY_600"],
-		["gray-700", "GRAY_700"],
-		["gray-800", "GRAY_800"],
-		["gray-900", "GRAY_900"],
-		["primary-50", "PRIMARY_50"],
-		["primary-100", "PRIMARY_100"],
-		["primary-200", "PRIMARY_200"],
-		["primary-300", "PRIMARY_300"],
-		["primary-400", "PRIMARY_400"],
-		["primary-500", "PRIMARY_500"],
-		["primary-600", "PRIMARY_600"],
-		["primary-700", "PRIMARY_700"],
-		["primary-800", "PRIMARY_800"],
-		["primary-900", "PRIMARY_900"],
-		["secondary-50", "SECONDARY_50"],
-		["secondary-100", "SECONDARY_100"],
-		["secondary-200", "SECONDARY_200"],
-		["secondary-300", "SECONDARY_300"],
-		["secondary-400", "SECONDARY_400"],
-		["secondary-500", "SECONDARY_500"],
-		["secondary-600", "SECONDARY_600"],
-		["secondary-700", "SECONDARY_700"],
-		["secondary-800", "SECONDARY_800"],
-		["secondary-900", "SECONDARY_900"],
-		["success-50", "SUCCESS_50"],
-		["success-100", "SUCCESS_100"],
-		["success-200", "SUCCESS_200"],
-		["success-300", "SUCCESS_300"],
-		["success-400", "SUCCESS_400"],
-		["success-500", "SUCCESS_500"],
-		["success-600", "SUCCESS_600"],
-		["success-700", "SUCCESS_700"],
-		["success-800", "SUCCESS_800"],
-		["success-900", "SUCCESS_900"],
-		["danger-50", "DANGER_50"],
-		["danger-100", "DANGER_100"],
-		["danger-200", "DANGER_200"],
-		["danger-300", "DANGER_300"],
-		["danger-400", "DANGER_400"],
-		["danger-500", "DANGER_500"],
-		["danger-600", "DANGER_600"],
-		["danger-700", "DANGER_700"],
-		["danger-800", "DANGER_800"],
-		["danger-900", "DANGER_900"],
-		["warning-50", "WARNING_50"],
-		["warning-100", "WARNING_100"],
-		["warning-200", "WARNING_200"],
-		["warning-300", "WARNING_300"],
-		["warning-400", "WARNING_400"],
-		["warning-500", "WARNING_500"],
-		["warning-600", "WARNING_600"],
-		["warning-700", "WARNING_700"],
-		["warning-800", "WARNING_800"],
-		["warning-900", "WARNING_900"],
-		["background", "BACKGROUND"],
-		["font", "FONT"],
-		["currentColor", "CURRENT_COLOR"],
-		["transparent", "TRANSPARENT"],
-	])
-
-	const ColorsShort = ($color: LibColorsShort = "primary") =>
-		THEME[colorsShortMap.get($color) as keyof typeof THEME]
-
-	const AllColors = ($color: LibAllColors) =>
-		THEME[allColorsMap.get($color) as keyof typeof THEME]
-
-	const ColorsAndOverlays = ($color: LibAllColorsAndOverlays | undefined) => {
-		if (!$color) return null as any
-
-		const overlayColors = Object.keys(
-			designTokens.overlays
-		) as Array<LibOverlays>
-
-		if (overlayColors.find(c => c === $color)) {
-			return Mixins.Overlay($color as LibOverlays)
-		}
-
-		return Mixins.AllColors($color as LibAllColors, theme, themeName)
-	}
-
-	const ColorsHoverDefault = (
-		$color: LibColorsHoverAndCurrent = "primary"
-	) => {
-		if ($color === "currentColor") return "currentColor"
-
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_500],
-			["secondary", THEME.SECONDARY_500],
-			["success", THEME.SUCCESS_500],
-			["danger", THEME.DANGER_500],
-			["warning", THEME.WARNING_500],
-			["white", THEME.WHITE],
-			["gray", THEME.GRAY_500],
-			["font", THEME.LINK_FONT_DEFAULT],
-			["background", THEME.LINK_BACKGROUND_DEFAULT],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const ColorsHoverHover = ($color: LibColorsHoverAndCurrent = "primary") => {
-		if ($color === "currentColor") return "currentColor"
-
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_300],
-			["secondary", THEME.SECONDARY_300],
-			["success", THEME.SUCCESS_300],
-			["danger", THEME.DANGER_300],
-			["warning", THEME.WARNING_300],
-			["white", THEME.GRAY_300],
-			["gray", THEME.GRAY_300],
-			["font", THEME.LINK_FONT_HOVER],
-			["background", THEME.LINK_BACKGROUND_HOVER],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const ColorsHoverActive = (
-		$color: LibColorsHoverAndCurrent = "primary"
-	) => {
-		if ($color === "currentColor") return "currentColor"
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_600],
-			["secondary", THEME.SECONDARY_600],
-			["success", THEME.SUCCESS_600],
-			["danger", THEME.DANGER_600],
-			["warning", THEME.WARNING_600],
-			["white", THEME.GRAY_100],
-			["gray", THEME.GRAY_600],
-			["font", THEME.LINK_FONT_ACTIVE],
-			["background", THEME.LINK_BACKGROUND_ACTIVE],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const ColorsGhostDefault = (
-		$color: LibColorsHoverAndCurrent = "primary"
-	) => {
-		if ($color === "currentColor") return "currentColor"
-
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_50],
-			["secondary", THEME.SECONDARY_50],
-			["success", THEME.SUCCESS_50],
-			["danger", THEME.DANGER_50],
-			["warning", THEME.WARNING_50],
-			["white", THEME.GRAY_50],
-			["gray", THEME.GRAY_50],
-			["font", THEME.FONT_GHOST_DEFAULT],
-			["background", THEME.BACKGROUND_GHOST_DEFAULT],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const ColorsGhostHover = ($color: LibColorsHoverAndCurrent = "primary") => {
-		if ($color === "currentColor") return "currentColor"
-
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_200],
-			["secondary", THEME.SECONDARY_200],
-			["success", THEME.SUCCESS_200],
-			["danger", THEME.DANGER_200],
-			["warning", THEME.WARNING_200],
-			["white", THEME.GRAY_200],
-			["gray", THEME.GRAY_200],
-			["font", THEME.FONT_GHOST_HOVER],
-			["background", THEME.BACKGROUND_GHOST_HOVER],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const ColorsGhostActive = (
-		$color: LibColorsHoverAndCurrent = "primary"
-	) => {
-		if ($color === "currentColor") return "currentColor"
-
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_100],
-			["secondary", THEME.SECONDARY_100],
-			["success", THEME.SUCCESS_100],
-			["danger", THEME.DANGER_100],
-			["warning", THEME.WARNING_100],
-			["white", THEME.GRAY_100],
-			["gray", THEME.GRAY_100],
-			["font", THEME.FONT_GHOST_ACTIVE],
-			["background", THEME.BACKGROUND_GHOST_ACTIVE],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	const Colors50 = (
-		$color: Exclude<LibColorsShort, "black" | "white"> = "primary"
-	) => {
-		// @ts-ignore
-		const colorsMap = new Map<LibColorsShort, keyof typeof THEME>([
-			["primary", THEME.PRIMARY_50],
-			["secondary", THEME.SECONDARY_50],
-			["success", THEME.SUCCESS_50],
-			["danger", THEME.DANGER_50],
-			["warning", THEME.WARNING_50],
-			["gray", THEME.GRAY_50],
-		])
-
-		return colorsMap.get($color)
-	}
-
-	return {
-		ColorsShort,
-		AllColors,
-		ColorsAndOverlays,
-		ColorsHoverDefault,
-		ColorsHoverHover,
-		ColorsHoverActive,
-		ColorsGhostDefault,
-		ColorsGhostHover,
-		ColorsGhostActive,
-		Colors50,
-	}
-}
-
-class mixins {
-	/**
-	 * @description Returns any color from the library
-	 * @param $color: Any color from the library
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.AllColors("primary", theme)}
-	 */
-	AllColors = (
-		$color: LibAllColors,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).AllColors($color)
-
-	/**
-	 * @description Returns a color by short name
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsShort("secondary", theme)}
-	 */
-	ColorsShort = (
-		$color: LibColorsShort,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsShort($color)
-
-	/**
-	 * @description Returns any color or overlay from the library
-	 * @param $color: Any color or overlay from the library
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsAndOverlays("gray-200", theme)}
-	 */
-	ColorsAndOverlays = (
-		$color: LibAllColorsAndOverlays | undefined,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsAndOverlays($color)
-
-	/**
-	 * @description Returns a color for components changing on hover, default state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsHoverDefault("success", theme)}
-	 */
-	ColorsHoverDefault = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsHoverDefault($color)
-
-	/**
-	 * @description Returns a color for components changing on hover, hover state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsHoverHover("success", theme)}
-	 */
-	ColorsHoverHover = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsHoverHover($color)
-
-	/**
-	 * @description Returns a color for components changing on hover, active state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsHoverActive("success", theme)}
-	 */
-	ColorsHoverActive = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsHoverActive($color)
-
-	/**
-	 * @description Returns a color for components changing on hover with ghost colors, default state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsGhostDefault("danger", theme)}
-	 */
-	ColorsGhostDefault = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsGhostDefault($color)
-
-	/**
-	 * @description Returns a color for components changing on hover with ghost colors, hover state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsGhostHover("danger", theme)}
-	 */
-	ColorsGhostHover = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsGhostHover($color)
-
-	/**
-	 * @description Returns a color for components changing on hover with ghost colors, active state
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color:  ${({ theme }) => Mixins.ColorsGhostActive("danger", theme)}
-	 */
-	ColorsGhostActive = (
-		$color: LibColorsHoverAndCurrent,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).ColorsGhostActive($color)
-
-	/**
-	 * @description Returns one of the colors 50
-	 * @param $color: "primary" | "secondary" | "success" | "danger" | "warning" | "gray"
-	 * @param theme?: Default theme
-	 * @param themeName?: "light" | "dark"
-	 * @example background-color: ${({ theme }) => Mixins.Colors50("secondary", theme)}
-	 */
-	Colors50 = (
-		$color: Exclude<LibColorsShort, "black" | "white">,
-		theme: DefaultTheme | null = COLORS_LIGHT,
-		themeName?: LibThemeNames
-	) => getColorMixinFromTheme(theme, themeName).Colors50($color)
-
-	/**
-	 * @description Returns an icon mixin component
-	 * @prop $name: string
-	 * @prop $color?: Any color from the library
-	 * @prop $size?: number
-	 */
-	Icon = ({
-		$name,
-		$color = "currentColor",
-		$size = 16,
-		$isLibIcon,
-	}: ILibIconMixin) => {
-		const iconURL = $isLibIcon ? $name : `/icons/${$name}.svg`
-
-		return css`
-			content: "";
-			background-color: ${({ theme }) => Mixins.AllColors($color, theme)};
-			-webkit-mask-image: url(${iconURL});
-			-webkit-mask-size: cover;
-			mask-image: url(${$isLibIcon ? $name : `/icons/${$name}.svg`});
-			mask-size: cover;
-			width: ${$size}px;
-			height: ${$size}px;
-			display: inline-block;
-		`
-	}
-
-	/**
-	 * @description Returns an overlay from the library
-	 * @param $overlay?: "black-50" | "black-80" | "white-50" | "white-80" | "gradient-black" | "gradient-white"
-	 */
-	Overlay = ($overlay: LibOverlays | undefined) => {
-		if (!$overlay) return null
-
-		return overlaysMap.get($overlay)
-	}
-
-	/**
-	 * @description Returns a border radius with the radiuses from the library
-	 * @param $borderRadius: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
-	 */
-	BorderRadius = ($borderRadius: ILibRadius | undefined) => {
-		if (!$borderRadius) return null
-
-		const radiusMap = new Map<ILibRadius, RADIUSES>([
-			["xxl", RADIUSES.XXL],
-			["xl", RADIUSES.XL],
-			["l", RADIUSES.L],
-			["m", RADIUSES.M],
-			["s", RADIUSES.S],
-			["xs", RADIUSES.XS],
-			["round", RADIUSES.ROUND],
-			["circle", RADIUSES.CIRCLE],
-		])
-
-		const getRadius = ($radius: LibRadiuses) =>
-			typeof $radius === "number"
-				? stringifyPx($radius)
-				: radiusMap.get($radius)
-
-		if (
-			typeof $borderRadius === "number" ||
-			typeof $borderRadius === "string"
-		)
-			return css`
-				border-radius: ${getRadius($borderRadius)};
-			`
-
-		const { topLeft, topRight, bottomLeft, bottomRight } = $borderRadius
-
-		return css`
-			border-top-left-radius: ${topLeft && getRadius(topLeft)};
-			border-top-right-radius: ${topRight && getRadius(topRight)};
-			border-bottom-left-radius: ${bottomLeft && getRadius(bottomLeft)};
-			border-bottom-right-radius: ${bottomRight &&
-			getRadius(bottomRight)};
-		`
-	}
-
-	/**
-	 * @description Returns a transition from the library
-	 * @param $transition: "short" | "long" | "bezier"
-	 */
-	Transition = ($transition: LibTransitions | undefined) => {
-		if (!$transition) return null
-
-		const transitionsMap = new Map<LibTransitions, TRANSITIONS>([
-			["short", TRANSITIONS.SHORT],
-			["long", TRANSITIONS.LONG],
-			["bezier", TRANSITIONS.BEZIER],
-		])
-
-		return transitionsMap.get($transition)
-	}
-
-	/**
-	 * @description Returns a shadow from the library
-	 * @param $shadow "xxl" | "xl" | "l" | "m" | "s" | "xs"
-	 */
-	Shadow = ($shadow: LibShadows | undefined) => {
-		if (!$shadow) return null
-
-		const shadowMap = new Map<LibShadows, SHADOWS>([
-			["xxl", SHADOWS.XXL],
-			["xl", SHADOWS.XL],
-			["l", SHADOWS.L],
-			["m", SHADOWS.M],
-			["s", SHADOWS.S],
-			["xs", SHADOWS.XS],
-		])
-
-		return shadowMap.get($shadow)
-	}
-
-	/**
-	 * @description Returns a box shadow
-	 * @param $boxShadow "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: LibShadows; hover: LibShadows; active: LibShadows }
-	 */
-	BoxShadow = ($boxShadow?: ILibBoxShadow) => {
-		if (!$boxShadow) return null
-
-		if (typeof $boxShadow === "string")
-			return css`
-				box-shadow: ${Mixins.Shadow($boxShadow)};
-			`
-
-		return css`
-			box-shadow: ${Mixins.Shadow($boxShadow.default)};
-
-			&:hover {
-				box-shadow: ${Mixins.Shadow($boxShadow.hover)};
-			}
-
-			&:active {
-				box-shadow: ${Mixins.Shadow($boxShadow.active)};
-			}
-		`
-	}
-
-	/**
-	 * @description Returns a font size from the library
-	 * @param $fontSize "display-h1" | "display-h2" | "display-h3" | "display-h4" | "display-h5" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small" | "inherit" | number
-	 */
-	FontSize = (
-		$fontSize: LibFontSizes | "inherit" | number | undefined = "body"
-	) => {
-		if (!$fontSize) return null
-
-		if (typeof $fontSize === "number") return stringifyPx($fontSize)
-
-		const fontSizesMap = new Map<
-			LibFontSizes | "inherit",
-			FONT_SIZES | "inherit"
-		>([
-			["display-h1", FONT_SIZES.DISPLAY_H1],
-			["display-h2", FONT_SIZES.DISPLAY_H2],
-			["display-h3", FONT_SIZES.DISPLAY_H3],
-			["display-h4", FONT_SIZES.DISPLAY_H4],
-			["display-h5", FONT_SIZES.DISPLAY_H5],
-			["h1", FONT_SIZES.H1],
-			["h2", FONT_SIZES.H2],
-			["h3", FONT_SIZES.H3],
-			["h4", FONT_SIZES.H4],
-			["h5", FONT_SIZES.H5],
-			["h6", FONT_SIZES.H6],
-			["body", FONT_SIZES.BODY],
-			["small", FONT_SIZES.SMALL],
-			["inherit", "inherit"],
-		])
-
-		return fontSizesMap.get($fontSize)
-	}
-
-	/**
-	 * @description Returns a font weight from the library
-	 * @param $fontWeight: "regular" | "bold" | "black"
-	 */
-	FontWeight = ($fontWeight: LibFontWeights = "regular") => {
-		if (!$fontWeight) return null
-
-		const fontWeightsMap = new Map<LibFontWeights, FONT_WEIGHTS>([
-			["regular", FONT_WEIGHTS.REGULAR],
-			["bold", FONT_WEIGHTS.BOLD],
-			["black", FONT_WEIGHTS.BLACK],
-		])
-
-		return fontWeightsMap.get($fontWeight)
-	}
-
-	/**
-	 * @description Returns a spacer from the library
-	 * @param $spacer: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto"
-	 */
-	Spacer = ($spacer: LibSpacers | "auto" | undefined) => {
-		if (!$spacer) return null
-
-		if (typeof $spacer === "number") return stringifyPx($spacer)
-
-		if ($spacer === "0px") return "0px"
-
-		const spacersMap = new Map<LibSpacers | "auto", SPACERS | "auto">([
-			["xxl", SPACERS.XXL],
-			["xl", SPACERS.XL],
-			["l", SPACERS.L],
-			["m", SPACERS.M],
-			["s", SPACERS.S],
-			["xs", SPACERS.XS],
-			["xxs", SPACERS.XXS],
-			["auto", "auto"],
-		])
-
-		return spacersMap.get($spacer)
-	}
-
-	/**
-	 * @description Shorthand to hide a scroolbar in CSS
-	 */
-	HideScrollbar = css`
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-	`
-
-	/**
-	 * @description Shorthand to stretch all the tags inside the Wrapper / Wain / Aside compoents
-	 */
-	StretchTags = css`
-		& > div,
-		& > h1,
-		& > h2,
-		& > h3,
-		& > h4,
-		& > h5,
-		& > h6,
-		& > p,
-		& > ul,
-		& > ol,
-		& > dl,
-		& > section,
-		& > input,
-		& > article,
-		& > hr,
-		& > pre,
-		& > table,
-		& > header,
-		& > footer,
-		& > iframe,
-		& > nav,
-		& > noscript,
-		& > picture,
-		& > select,
-		& > textarea,
-		& > form {
-			align-self: stretch;
-		}
-	`
-
-	/**
-	 * @description Adds padding to element
-	 * @argument $padding: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
-	 */
-	Padding = ($padding: ILibPadding | undefined) => {
-		if (!$padding) return null
-
-		if (typeof $padding === "string" || typeof $padding === "number")
-			return css`
-				padding: ${Mixins.Spacer($padding)};
-			`
-
-		return css`
-			padding-left: ${($padding?.left || $padding?.leftRight) &&
-			Mixins.Spacer($padding?.left || $padding?.leftRight)};
-			padding-top: ${($padding?.top || $padding?.topBottom) &&
-			Mixins.Spacer($padding?.top || $padding?.topBottom)};
-			padding-right: ${($padding?.right || $padding?.leftRight) &&
-			Mixins.Spacer($padding?.right || $padding?.leftRight)};
-			padding-bottom: ${($padding?.bottom || $padding?.topBottom) &&
-			Mixins.Spacer($padding?.bottom || $padding?.topBottom)};
-		`
-	}
-
-	/**
-	 * @description Adds margins to element
-	 * @argument $margin: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
-	 */
-	Margin = ($margin: ILibMargin) => {
-		if (!$margin) return null
-
-		if ($margin === "0 auto")
-			return css`
-				margin: 0 auto;
-			`
-
-		if (typeof $margin === "string" || typeof $margin === "number")
-			return css`
-				margin: ${Mixins.Spacer($margin)};
-			`
-
-		return css`
-			margin-left: ${($margin?.left || $margin?.leftRight) &&
-			Mixins.Spacer($margin?.left || $margin?.leftRight)};
-			margin-top: ${($margin?.top || $margin?.topBottom) &&
-			Mixins.Spacer($margin?.top || $margin?.topBottom)};
-			margin-right: ${($margin?.right || $margin?.leftRight) &&
-			Mixins.Spacer($margin?.right || $margin?.leftRight)};
-			margin-bottom: ${($margin?.bottom || $margin?.topBottom) &&
-			Mixins.Spacer($margin?.bottom || $margin?.topBottom)};
-		`
-	}
-
-	/**
-	 * @description Mixin for components using CSS Grid
-	 * @prop $inline?: boolean
-	 * @prop $col?: number | string
-	 * @prop $gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $justifyItems?: CssJustifyItems
-	 * @prop $alignItems?: CssAlignItems
-	 * @prop $justifyContent?: CssJustifyContent
-	 * @prop $alignContent?: CssAlignContent
-	 */
-	Grid = ({
-		$inline,
-		$col,
-		$gap,
-		$columnGap,
-		$rowGap,
-		$justifyItems,
-		$alignItems,
-		$justifyContent,
-		$alignContent,
-		$padding,
-	}: {
-		$inline?: boolean
-		$col?: number | string
-		$gap?: LibSpacers
-		$columnGap?: LibSpacers
-		$rowGap?: LibSpacers
-		$justifyItems?: CssJustifyItems
-		$alignItems?: CssAlignItems
-		$justifyContent?: CssJustifyContent
-		$alignContent?: CssAlignContent
-		$padding?: ILibPadding
-	}) => css`
-		display: ${$inline ? "inline-grid" : "grid"};
-		grid-template-columns: ${$col && typeof $col === "number"
-			? `repeat(${$col}, 1fr)`
-			: $col};
-		gap: ${$gap && Mixins.Spacer($gap)};
-		column-gap: ${$columnGap && Mixins.Spacer($columnGap)};
-		row-gap: ${$rowGap && Mixins.Spacer($rowGap)};
-		justify-content: ${$justifyContent};
-		justify-items: ${$justifyItems};
-		align-items: ${$alignItems};
-		align-content: ${$alignContent};
-		${Mixins.Padding($padding)}
-	`
-
-	/**
-	 * @description Mixin for components using CSS Flexbox
-	 * @prop $inline?: boolean
-	 * @prop $flexDirection?: CssFlexDirection
-	 * @prop $flexWrap?: CssFlexWrap
-	 * @prop $justifyContent?: CssJustifyContent
-	 * @prop $alignItems?: CssAlignItems
-	 * @prop $justifyItems?: CssJustifyItems
-	 * @prop $alignContent?: CssAlignContent
-	 * @prop $gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 */
-	Flexbox = ({
-		$inline,
-		$flexDirection,
-		$flexWrap,
-		$justifyContent,
-		$alignItems,
-		$justifyItems,
-		$alignContent,
-		$gap,
-		$columnGap,
-		$rowGap,
-		$padding,
-	}: {
-		$inline?: boolean
-		$flexDirection?: CssFlexDirection
-		$flexWrap?: CssFlexWrap
-		$justifyContent?: CssJustifyContent
-		$alignItems?: CssAlignItems
-		$justifyItems?: CssJustifyItems
-		$alignContent?: CssAlignContent
-		$gap?: LibSpacers
-		$columnGap?: LibSpacers
-		$rowGap?: LibSpacers
-		$padding?: ILibPadding
-	}) => css`
-		display: ${$inline ? "inline-flex" : "flex"};
-		flex-direction: ${$flexDirection};
-		flex-wrap: ${$flexWrap};
-		justify-content: ${$justifyContent};
-		justify-items: ${$justifyItems};
-		align-items: ${$alignItems};
-		align-content: ${$alignContent};
-		gap: ${$gap && Mixins.Spacer($gap)};
-		column-gap: ${$columnGap && Mixins.Spacer($columnGap)};
-		row-gap: ${$rowGap && Mixins.Spacer($rowGap)};
-		${Mixins.Padding($padding)}
-	`
-
-	/**
-	 * @description Adds border to element
-	 * @prop style?: CssBorderStyle
-	 * @prop width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop color?: Any color from the library
-	 */
-	Border = ($border?: ILibBorder) => {
-		if (!$border) return null
-
-		const { style, width, color } = $border
-
-		const borderValues: ILibBorder = {
-			style: style || "solid",
-			width: width || 1,
-			color: color || "gray-200",
-		}
-
-		return css`
-			border-style: ${borderValues.style};
-			border-width: ${Mixins.Spacer(borderValues.width)};
-			border-color: ${({ theme }) =>
-				Mixins.AllColors(borderValues.color as LibAllColors, theme)};
-		`
-	}
-
-	/**
-	 * @description Adds outline to element
-	 * @prop style?: CssOutlineStyle
-	 * @prop width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop color?: Any color from the library
-	 */
-	Outline = ($outline?: ILibOutline) => {
-		if (!$outline) return null
-
-		const { style, width, color } = $outline
-
-		const outlineValues: ILibBorder = {
-			style: style || "solid",
-			width: width || 1,
-			color: color || "white",
-		}
-
-		return css`
-			outline-style: ${outlineValues.style};
-			outline-width: ${Mixins.Spacer(outlineValues.width)};
-			outline-color: ${({ theme }) =>
-				Mixins.AllColors(outlineValues.color as LibAllColors, theme)};
-		`
-	}
-
-	/**
-	 * @description Adds background-image to element
-	 * @prop img: string
-	 * @prop clip?: CssBackgroundClip
-	 * @prop origin?: CssBackgroundOrigin
-	 * @prop position?: CssBackgroundPosition
-	 * @prop repeat?: CssBackgroundRepeat
-	 * @prop size?: CssBackgroundSize
-	 */
-	BackgroundImage = ({
-		$img,
-		$clip,
-		$origin = "border-box",
-		$position = "center",
-		$repeat = "no-repeat",
-		$size = "cover",
-	}: {
-		$img: string
-		$clip?: Property.BackgroundClip
-		$origin?: Property.BackgroundOrigin
-		$position?: Property.BackgroundPosition
-		$repeat?: Property.BackgroundRepeat
-		$size?: Property.BackgroundSize
-	}) => {
-		if (!$img) return null
-
-		return css`
-			background-image: url(${$img});
-			background-origin: ${$origin};
-			background-position: ${$position};
-			background-repeat: ${$repeat};
-			background-size: ${$size};
-
-			${$clip &&
-			($clip === "text"
-				? css`
-						background-clip: text;
-						-webkit-background-clip: text;
-						color: transparent;
-				  `
-				: css`
-						background-clip: ${$clip};
-				  `)}
-		`
-	}
-
-	/**
-	 * @description Adds position to element
-	 * @prop $position?: "relative" | "absolute" | "fixed"
-	 * @prop $left?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $top?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $right?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 * @prop $bottom?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
-	 */
-	Position = ({
-		$position,
-		$left,
-		$top,
-		$right,
-		$bottom,
-		$zIndex,
-	}: {
-		$position?: LibPositionExtract
-		$left?: LibSpacers | "unset"
-		$top?: LibSpacers | "unset"
-		$right?: LibSpacers | "unset"
-		$bottom?: LibSpacers | "unset"
-		$zIndex?: number
-	}) => css`
-		position: ${$position};
-		left: ${$left && $left !== "unset" && Mixins.Spacer($left)};
-		top: ${$top && $top !== "unset" && Mixins.Spacer($top)};
-		right: ${$right && $right !== "unset" && Mixins.Spacer($right)};
-		bottom: ${$bottom && $bottom !== "unset" && Mixins.Spacer($bottom)};
-		z-index: ${$zIndex};
-	`
-}
-
-export const Mixins = new mixins()