@julseb-lib/react 0.0.88 → 0.0.90

package/dist/lib/Mixins.tsx

@@ -3,988 +3,988 @@ 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,
+	COLORS_LIGHT,
+	COLORS_DARK,
+	RADIUSES,
+	SHADOWS,
+	SPACERS,
+	TRANSITIONS,
+	FONT_SIZES,
+	FONT_WEIGHTS,
 } from "./Variables"
+import { designTokens } from "./design-tokens"
 import {
-    designTokens,
-    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,
+	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
+	$name: string
+	$color?: LibAllColors
+	$size?: number
+	$isLibIcon?: boolean
 }
 
 const getColorMixinFromTheme = (
-    theme: DefaultTheme | null = COLORS_LIGHT,
-    themeName?: LibThemeNames
+	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,
-    }
+	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};
-    `
+	/**
+	 * @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()