@julseb-lib/react 0.0.56 → 0.0.57

package/dist/Mixins.d.ts

@@ -0,0 +1,256 @@
+import { DefaultTheme } from 'styled-components';
+import { Property } from 'csstype';
+import { SHADOWS, TRANSITIONS, FONT_WEIGHTS } from './Variables';
+import { LibAllColors, LibColorsShort, LibOverlays, ILibRadius, LibShadows, ILibBoxShadow, LibSpacers, ILibPadding, LibTransitions, CssJustifyItems, CssAlignItems, CssJustifyContent, CssAlignContent, CssFlexDirection, CssFlexWrap, LibFontSizes, LibFontWeights, ILibMargin, ILibBorder, LibAllColorsAndOverlays, ILibOutline, LibColorsHoverAndCurrent, LibThemeNames, LibPositionExtract } from './types';
+type ILibIconMixin = {
+    $name: string;
+    $color?: LibAllColors;
+    $size?: number;
+    $isLibIcon?: boolean;
+};
+declare 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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => any;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @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, themeName?: LibThemeNames) => keyof DefaultTheme | undefined;
+    /**
+     * @description Returns an icon mixin component
+     * @prop $name: string
+     * @prop $color?: Any color from the library
+     * @prop $size?: number
+     */
+    Icon: ({ $name, $color, $size, $isLibIcon, }: ILibIconMixin) => import('styled-components').RuleSet<object>;
+    /**
+     * @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) => import('./Variables').OVERLAYS | null | undefined;
+    /**
+     * @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) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @description Returns a transition from the library
+     * @param $transition: "short" | "long" | "bezier"
+     */
+    Transition: ($transition: LibTransitions | undefined) => TRANSITIONS | null | undefined;
+    /**
+     * @description Returns a shadow from the library
+     * @param $shadow "xxl" | "xl" | "l" | "m" | "s" | "xs"
+     */
+    Shadow: ($shadow: LibShadows | undefined) => SHADOWS | null | undefined;
+    /**
+     * @description Returns a box shadow
+     * @param $boxShadow "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: LibShadows; hover: LibShadows; active: LibShadows }
+     */
+    BoxShadow: ($boxShadow?: ILibBoxShadow) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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) => string | null | undefined;
+    /**
+     * @description Returns a font weight from the library
+     * @param $fontWeight: "regular" | "bold" | "black"
+     */
+    FontWeight: ($fontWeight?: LibFontWeights) => FONT_WEIGHTS | null | undefined;
+    /**
+     * @description Returns a spacer from the library
+     * @param $spacer: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto"
+     */
+    Spacer: ($spacer: LibSpacers | "auto" | undefined) => string | null | undefined;
+    /**
+     * @description Shorthand to hide a scroolbar in CSS
+     */
+    HideScrollbar: import('styled-components').RuleSet<object>;
+    /**
+     * @description Shorthand to stretch all the tags inside the Wrapper / Wain / Aside compoents
+     */
+    StretchTags: import('styled-components').RuleSet<object>;
+    /**
+     * @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) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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;
+    }) => import('styled-components').RuleSet<object>;
+    /**
+     * @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;
+    }) => import('styled-components').RuleSet<object>;
+    /**
+     * @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) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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, $position, $repeat, $size, }: {
+        $img: string;
+        $clip?: Property.BackgroundClip;
+        $origin?: Property.BackgroundOrigin;
+        $position?: Property.BackgroundPosition;
+        $repeat?: Property.BackgroundRepeat;
+        $size?: Property.BackgroundSize;
+    }) => import('styled-components').RuleSet<object> | null;
+    /**
+     * @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;
+    }) => import('styled-components').RuleSet<object>;
+}
+export declare const Mixins: mixins;
+export {};

package/dist/Variables.d.ts

@@ -0,0 +1,248 @@
+export declare enum COLORS_LIGHT {
+    /** #000000 */ BLACK = "var(--color-black)",
+    /** #FFFFFF */ WHITE = "var(--color-white)",
+    /** #F8F8F8 */ GRAY_50 = "var(--color-light-gray-50)",
+    /** #E4E4E4 */ GRAY_100 = "var(--color-light-gray-100)",
+    /** #C8C8C8 */ GRAY_200 = "var(--color-light-gray-200)",
+    /** #ADADAD */ GRAY_300 = "var(--color-light-gray-300)",
+    /** #919191 */ GRAY_400 = "var(--color-light-gray-400)",
+    /** #767676 */ GRAY_500 = "var(--color-light-gray-500)",
+    /** #5E5E5E */ GRAY_600 = "var(--color-light-gray-600)",
+    /** #474747 */ GRAY_700 = "var(--color-light-gray-700)",
+    /** #2F2F2F */ GRAY_800 = "var(--color-light-gray-800)",
+    /** #181818 */ GRAY_900 = "var(--color-light-gray-900)",
+    /** #F4F6F7 */ PRIMARY_50 = "var(--color-light-primary-50)",
+    /** #D1DAE1 */ PRIMARY_100 = "var(--color-light-primary-100)",
+    /** #A4B5C3 */ PRIMARY_200 = "var(--color-light-primary-200)",
+    /** #768FA4 */ PRIMARY_300 = "var(--color-light-primary-300)",
+    /** #496A86 */ PRIMARY_400 = "var(--color-light-primary-400)",
+    /** #1B4568 */ PRIMARY_500 = "var(--color-light-primary-500)",
+    /** #163753 */ PRIMARY_600 = "var(--color-light-primary-600)",
+    /** #10293E */ PRIMARY_700 = "var(--color-light-primary-700)",
+    /** #0B1C2A */ PRIMARY_800 = "var(--color-light-primary-800)",
+    /** #050E15 */ PRIMARY_900 = "var(--color-light-primary-900)",
+    /** #F4F8FD */ SECONDARY_50 = "var(--color-light-secondary-50)",
+    /** #D4E2F6 */ SECONDARY_100 = "var(--color-light-secondary-100)",
+    /** #A8C5ED */ SECONDARY_200 = "var(--color-light-secondary-200)",
+    /** #7DA7E5 */ SECONDARY_300 = "var(--color-light-secondary-300)",
+    /** #518ADC */ SECONDARY_400 = "var(--color-light-secondary-400)",
+    /** #266DD3 */ SECONDARY_500 = "var(--color-light-secondary-500)",
+    /** #1E57A9 */ SECONDARY_600 = "var(--color-light-secondary-600)",
+    /** #17417F */ SECONDARY_700 = "var(--color-light-secondary-700)",
+    /** #0F2C54 */ SECONDARY_800 = "var(--color-light-secondary-800)",
+    /** #08162A */ SECONDARY_900 = "var(--color-light-secondary-900)",
+    /** #F3F9F6 */ SUCCESS_50 = "var(--color-light-success-50)",
+    /** #CEE6DB */ SUCCESS_100 = "var(--color-light-success-100)",
+    /** #9DCDB7 */ SUCCESS_200 = "var(--color-light-success-200)",
+    /** #6BB392 */ SUCCESS_300 = "var(--color-light-success-300)",
+    /** #3A9A6E */ SUCCESS_400 = "var(--color-light-success-400)",
+    /** #09814A */ SUCCESS_500 = "var(--color-light-success-500)",
+    /** #07673B */ SUCCESS_600 = "var(--color-light-success-600)",
+    /** #054D2C */ SUCCESS_700 = "var(--color-light-success-700)",
+    /** #04341E */ SUCCESS_800 = "var(--color-light-success-800)",
+    /** #021A0F */ SUCCESS_900 = "var(--color-light-success-900)",
+    /** #FBF2F4 */ DANGER_50 = "var(--color-light-danger-50)",
+    /** #F0CCD1 */ DANGER_100 = "var(--color-light-danger-100)",
+    /** #E199A4 */ DANGER_200 = "var(--color-light-danger-200)",
+    /** #D16676 */ DANGER_300 = "var(--color-light-danger-300)",
+    /** #C23349 */ DANGER_400 = "var(--color-light-danger-400)",
+    /** #B3001B */ DANGER_500 = "var(--color-light-danger-500)",
+    /** #8F0016 */ DANGER_600 = "var(--color-light-danger-600)",
+    /** #6B0010 */ DANGER_700 = "var(--color-light-danger-700)",
+    /** #48000B */ DANGER_800 = "var(--color-light-danger-800)",
+    /** #240005 */ DANGER_900 = "var(--color-light-danger-900)",
+    /** #FCF6F2 */ WARNING_50 = "var(--color-light-warning-50)",
+    /** #F3DBCC */ WARNING_100 = "var(--color-light-warning-100)",
+    /** #E7B699 */ WARNING_200 = "var(--color-light-warning-200)",
+    /** #DC9266 */ WARNING_300 = "var(--color-light-warning-300)",
+    /** #D06D33 */ WARNING_400 = "var(--color-light-warning-400)",
+    /** #C44900 */ WARNING_500 = "var(--color-light-warning-500)",
+    /** #9D3A00 */ WARNING_600 = "var(--color-light-warning-600)",
+    /** #762C00 */ WARNING_700 = "var(--color-light-warning-700)",
+    /** #4E1D00 */ WARNING_800 = "var(--color-light-warning-800)",
+    /** #270F00 */ WARNING_900 = "var(--color-light-warning-900)",
+    /** #FFFFFF */ BACKGROUND = "var(--color-light-background)",
+    /** #000000 */ FONT = "var(--color-light-font)",
+    /** #000000 */ LINK_FONT_DEFAULT = "var(--color-light-link-font-default)",
+    /** #474747 */ LINK_FONT_HOVER = "var(--color-light-link-font-hover)",
+    /** #181818 */ LINK_FONT_ACTIVE = "var(--color-light-link-font-active)",
+    /** #FFFFFF */ LINK_BACKGROUND_DEFAULT = "var(--color-light-link-background-default)",
+    /** #ADADAD */ LINK_BACKGROUND_HOVER = "var(--color-light-link-background-hover)",
+    /** #E4E4E4 */ LINK_BACKGROUND_ACTIVE = "var(--color-light-link-background-active)",
+    /** #181818 */ FONT_GHOST_DEFAULT = "var(--color-light-font-ghost-default)",
+    /** #2F2F2F */ FONT_GHOST_HOVER = "var(--color-light-font-ghost-hover)",
+    /** #474747 */ FONT_GHOST_ACTIVE = "var(--color-light-font-ghost-active)",
+    /** #F8F8F8 */ BACKGROUND_GHOST_DEFAULT = "var(--color-light-background-ghost-default)",
+    /** #C8C8C8 */ BACKGROUND_GHOST_HOVER = "var(--color-light-background-ghost-hover)",
+    /** #E4E4E4 */ BACKGROUND_GHOST_ACTIVE = "var(--color-light-background-ghost-active)",
+    TRANSPARENT = "transparent",
+    CURRENT_COLOR = "currentColor"
+}
+export declare enum COLORS_DARK {
+    /** #000000 */ BLACK = "var(--color-black)",
+    /** #FFFFFF */ WHITE = "var(--color-white)",
+    /** #181818 */ GRAY_50 = "var(--color-dark-gray-50)",
+    /** #2F2F2F */ GRAY_100 = "var(--color-dark-gray-100)",
+    /** #474747 */ GRAY_200 = "var(--color-dark-gray-200)",
+    /** #5E5E5E */ GRAY_300 = "var(--color-dark-gray-300)",
+    /** #767676 */ GRAY_400 = "var(--color-dark-gray-400)",
+    /** #919191 */ GRAY_500 = "var(--color-dark-gray-500)",
+    /** #ADADAD */ GRAY_600 = "var(--color-dark-gray-600)",
+    /** #C8C8C8 */ GRAY_700 = "var(--color-dark-gray-700)",
+    /** #E4E4E4 */ GRAY_800 = "var(--color-dark-gray-800)",
+    /** #F8F8F8 */ GRAY_900 = "var(--color-dark-gray-900)",
+    /** #141E33 */ PRIMARY_50 = "var(--color-dark-primary-50)",
+    /** #293D66 */ PRIMARY_100 = "var(--color-dark-primary-100)",
+    /** #3D5B99 */ PRIMARY_200 = "var(--color-dark-primary-200)",
+    /** #527ACC */ PRIMARY_300 = "var(--color-dark-primary-300)",
+    /** #6698FF */ PRIMARY_400 = "var(--color-dark-primary-400)",
+    /** #85ADFF */ PRIMARY_500 = "var(--color-dark-primary-500)",
+    /** #A3C1FF */ PRIMARY_600 = "var(--color-dark-primary-600)",
+    /** #C2D6FF */ PRIMARY_700 = "var(--color-dark-primary-700)",
+    /** #E0EAFF */ PRIMARY_800 = "var(--color-dark-primary-800)",
+    /** #F7FAFF */ PRIMARY_900 = "var(--color-dark-primary-900)",
+    /** #172D2E */ SECONDARY_50 = "var(--color-dark-secondary-50)",
+    /** #2E595C */ SECONDARY_100 = "var(--color-dark-secondary-100)",
+    /** #44868B */ SECONDARY_200 = "var(--color-dark-secondary-200)",
+    /** #5BB2B9 */ SECONDARY_300 = "var(--color-dark-secondary-300)",
+    /** #72DFE7 */ SECONDARY_400 = "var(--color-dark-secondary-400)",
+    /** #8EE5EC */ SECONDARY_500 = "var(--color-dark-secondary-500)",
+    /** #AAECF1 */ SECONDARY_600 = "var(--color-dark-secondary-600)",
+    /** #C7F2F5 */ SECONDARY_700 = "var(--color-dark-secondary-700)",
+    /** #E3F9FA */ SECONDARY_800 = "var(--color-dark-secondary-800)",
+    /** #F8FEFE */ SECONDARY_900 = "var(--color-dark-secondary-900)",
+    /** #112F20 */ SUCCESS_50 = "var(--color-dark-success-50)",
+    /** #235E40 */ SUCCESS_100 = "var(--color-dark-success-100)",
+    /** #348D61 */ SUCCESS_200 = "var(--color-dark-success-200)",
+    /** #46BC81 */ SUCCESS_300 = "var(--color-dark-success-300)",
+    /** #57EBA1 */ SUCCESS_400 = "var(--color-dark-success-400)",
+    /** #79EFB4 */ SUCCESS_500 = "var(--color-dark-success-500)",
+    /** #9AF3C7 */ SUCCESS_600 = "var(--color-dark-success-600)",
+    /** #BCF7D9 */ SUCCESS_700 = "var(--color-dark-success-700)",
+    /** #DDFBEC */ SUCCESS_800 = "var(--color-dark-success-800)",
+    /** #F7FEFA */ SUCCESS_900 = "var(--color-dark-success-900)",
+    /** #331A1A */ DANGER_50 = "var(--color-dark-danger-50)",
+    /** #663333 */ DANGER_100 = "var(--color-dark-danger-100)",
+    /** #994D4D */ DANGER_200 = "var(--color-dark-danger-200)",
+    /** #CC6666 */ DANGER_300 = "var(--color-dark-danger-300)",
+    /** #FF8080 */ DANGER_400 = "var(--color-dark-danger-400)",
+    /** #FF9999 */ DANGER_500 = "var(--color-dark-danger-500)",
+    /** #FFB3B3 */ DANGER_600 = "var(--color-dark-danger-600)",
+    /** #FFCCCC */ DANGER_700 = "var(--color-dark-danger-700)",
+    /** #FFE6E6 */ DANGER_800 = "var(--color-dark-danger-800)",
+    /** #FFF9F9 */ DANGER_900 = "var(--color-dark-danger-900)",
+    /** #332917 */ WARNING_50 = "var(--color-dark-warning-50)",
+    /** #65522E */ WARNING_100 = "var(--color-dark-warning-100)",
+    /** #987A46 */ WARNING_200 = "var(--color-dark-warning-200)",
+    /** #CAA35D */ WARNING_300 = "var(--color-dark-warning-300)",
+    /** #FDCC74 */ WARNING_400 = "var(--color-dark-warning-400)",
+    /** #FED690 */ WARNING_500 = "var(--color-dark-warning-500)",
+    /** #FEE0AC */ WARNING_600 = "var(--color-dark-warning-600)",
+    /** #FEEBC7 */ WARNING_700 = "var(--color-dark-warning-700)",
+    /** #FFF5E3 */ WARNING_800 = "var(--color-dark-warning-800)",
+    /** #FFFDF8 */ WARNING_900 = "var(--color-dark-warning-900)",
+    /** #121212 */ BACKGROUND = "var(--color-dark-background)",
+    /** #FFFFFF */ FONT = "var(--color-dark-font)",
+    /** #FFFFFF */ LINK_FONT_DEFAULT = "var(--color-dark-link-font-default)",
+    /** #5E5E5E */ LINK_FONT_HOVER = "var(--color-dark-link-font-hover)",
+    /** #2F2F2F */ LINK_FONT_ACTIVE = "var(--color-dark-link-font-active)",
+    /** #121212 */ LINK_BACKGROUND_DEFAULT = "var(--color-dark-link-background-default)",
+    /** #C8C8C8 */ LINK_BACKGROUND_HOVER = "var(--color-dark-link-background-hover)",
+    /** #F8F8F8 */ LINK_BACKGROUND_ACTIVE = "var(--color-dark-link-background-active)",
+    /** #F8F8F8 */ FONT_GHOST_DEFAULT = "var(--color-dark-font-ghost-default)",
+    /** #C8C8C8 */ FONT_GHOST_HOVER = "var(--color-dark-font-ghost-hover)",
+    /** #E4E4E4 */ FONT_GHOST_ACTIVE = "var(--color-dark-font-ghost-active)",
+    /** #181818 */ BACKGROUND_GHOST_DEFAULT = "var(--color-dark-background-ghost-default)",
+    /** #474747 */ BACKGROUND_GHOST_HOVER = "var(--color-dark-background-ghost-hover)",
+    /** #2F2F2F */ BACKGROUND_GHOST_ACTIVE = "var(--color-dark-background-ghost-active)",
+    TRANSPARENT = "transparent",
+    CURRENT_COLOR = "currentColor"
+}
+export declare enum OVERLAYS {
+    /** rgba(0, 0, 0, 0.5) */ BLACK_50 = "var(--overlay-black-50)",
+    /** rgba(0, 0, 0, 0.8) */ BLACK_80 = "var(--overlay-black-80)",
+    /** rgba(255, 255, 255, 0.5) */ WHITE_50 = "var(--overlay-white-50)",
+    /** rgba(255, 255, 255, 0.8) */ WHITE_80 = "var(--overlay-white-80)",
+    /** linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */ GRADIENT_BLACK = "var(--overlay-gradient-black)",
+    /** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--overlay-gradient-white)"
+}
+export declare enum FONT_FAMILIES {
+    /** "Lato", sans-serif */ BODY = "var(--font-family-body)",
+    /** monospace */ CODE = "var(--font-family-code)"
+}
+export declare enum FONT_SIZES {
+    /** 5rem */ DISPLAY_H1 = "var(--font-size-display-h1)",
+    /** 4rem */ DISPLAY_H2 = "var(--font-size-display-h2)",
+    /** 3.5rem */ DISPLAY_H3 = "var(--font-size-display-h3)",
+    /** 3rem */ DISPLAY_H4 = "var(--font-size-display-h4)",
+    /** 2.5rem */ DISPLAY_H5 = "var(--font-size-display-h5)",
+    /** 2.5rem */ H1 = "var(--font-size-h1)",
+    /** 2rem */ H2 = "var(--font-size-h2)",
+    /** 1.8rem */ H3 = "var(--font-size-h3)",
+    /** 1.5rem */ H4 = "var(--font-size-h4)",
+    /** 1.3rem */ H5 = "var(--font-size-h5)",
+    /** 1.1rem */ H6 = "var(--font-size-h6)",
+    /** 1rem */ BODY = "var(--font-size-body)",
+    /** 0.875rem */ SMALL = "var(--font-size-small)"
+}
+export declare enum FONT_WEIGHTS {
+    /** 400 */ REGULAR = "var(--font-weight-regular)",
+    /** 700 */ BOLD = "var(--font-weight-bold)",
+    /** 900 */ BLACK = "var(--font-weight-black)"
+}
+export declare enum LINE_HEIGHTS {
+    /** 1.5 */ BODY = "var(--line-height-body)",
+    /** 1.8 */ CODE = "var(--line-height-code)"
+}
+export declare enum SHADOWS {
+    /** 0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3) */ XXL = "var(--shadow-xxl)",
+    /** 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3) */ XL = "var(--shadow-xl)",
+    /** 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3) */ L = "var(--shadow-l)",
+    /** 0px 4px 8px 3px rgba(0, 0, 0, 0.15), px 1px 3px rgba(0, 0, 0, 0.3) */ M = "var(--shadow-m)",
+    /** 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15) */ S = "var(--shadow-s)",
+    /** 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) */ XS = "var(--shadow-xs)"
+}
+export declare enum SPACERS {
+    /** 48px */ XXL = "var(--spacer-xxl)",
+    /** 32px */ XL = "var(--spacer-xl)",
+    /** 24px */ L = "var(--spacer-l)",
+    /** 16px */ M = "var(--spacer-m)",
+    /** 12px */ S = "var(--spacer-s)",
+    /** 8px */ XS = "var(--spacer-xs)",
+    /** 4px */ XXS = "var(--spacer-xxs)"
+}
+export declare enum RADIUSES {
+    /** 24px */ XXL = "var(--radius-xxl)",
+    /** 16px */ XL = "var(--radius-xl)",
+    /** 12px */ L = "var(--radius-l)",
+    /** 8px */ M = "var(--radius-m)",
+    /** 4px */ S = "var(--radius-s)",
+    /** 2px */ XS = "var(--radius-xs)",
+    /** 99em */ ROUND = "var(--radius-round)",
+    /** 50% */ CIRCLE = "var(--radius-circle)"
+}
+export declare enum LAYOUTS {
+    /** 600px */ MAIN_DEFAULT = "var(--main-default)",
+    /** 800px */ MAIN_LARGE = "var(--main-large)",
+    /** 400px */ MAIN_FORM = "var(--main-form)",
+    /** 100% */ MAIN_FULL = "var(--main-full)",
+    /** 250px */ ASIDE_DEFAULT = "var(--aside-default)",
+    /** 200px */ ASIDE_SMALL = "var(--aside-small)"
+}
+export declare enum TRANSITIONS {
+    /** all 200ms ease */ SHORT = "var(--transition-short)",
+    /** all 500ms ease */ LONG = "var(--transition-long)",
+    /** all 0.5s cubic-bezier(0.25, 0.75, 0, 0.66) */ BEZIER = "var(--transition-bezier)",
+    /** all 1000ms ease */ PROGRESS_CIRCLE = "var(--transition-progress-circle)"
+}
+export declare enum MEDIA {
+    BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)",
+    BREAKPOINT_TABLET_SMALL = "(max-width: 768px)",
+    BREAKPOINT_MOBILE = "(max-width: 600px)",
+    TOUCH = "(hover: none) and (pointer: coarse)",
+    HOVER = "(hover: hover)",
+    PREFERS_LIGHT = "(prefers-color-scheme: light)",
+    PREFERS_DARK = "(prefers-color-scheme: dark)"
+}
+export declare const ICON_MULTIPLIER: 0.6;
+export declare const INPUT_HEIGHT: 32;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,23 @@
+import { ILibAccordion } from './types';
+/**
+ * @description Returns a Accordion component
+ * @link https://documentation-components-react.vercel.app/components/accordion
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop items: Array<LibAccordionItem> => only if children is not defined
+ * @prop children?: ReactChildren => only if items is not defined
+ * @prop variant?: "basic" | "rounded"
+ * @prop icon?: "plus" | "chevron" | JSX.Element
+ *
+ * @type LibAccordionItem
+ * @prop data-testid?: string
+ * @prop className?: string
+ * @prop id?: string
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop title: string
+ * @prop isOpen?: boolean
+ * @prop content?: ReactChildren
+ */
+export declare const Accordion: import('react').ForwardRefExoticComponent<ILibAccordion & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionButton.d.ts

@@ -0,0 +1,2 @@
+import { ILibAccordionButton } from './subtypes';
+export declare const AccordionButton: ({ "data-testid": testid, className, variant, icon, isOpen, setIsOpen, title, }: ILibAccordionButton) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,2 @@
+import { ILibAccordionContent } from './subtypes';
+export declare const AccordionContent: ({ "data-testid": testid, className, children, isOpen, variant, }: ILibAccordionContent) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,14 @@
+import { ILibAccordionItem } from './types';
+/**
+ * @description Returns an item for Accordion component
+ * @link https://documentation-components-react.vercel.app/components/accordion
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop title: string
+ * @prop icon?: "plus" | "chevron" | JSX.Element
+ * @prop variant?: "basic" | "rounded"
+ * @prop defaultOpen?: boolean
+ */
+export declare const AccordionItem: import('react').ForwardRefExoticComponent<ILibAccordionItem & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './AccordionItem';

package/dist/components/Accordion/styles.d.ts

@@ -0,0 +1,6 @@
+declare const StyledAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const StyledAccordionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+declare const StyledAccordionItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const StyledAccordionIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const StyledAccordionContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { StyledAccordion, StyledAccordionItem, StyledAccordionButton, StyledAccordionIcon, StyledAccordionContent, };

package/dist/components/Accordion/subtypes.d.ts

@@ -0,0 +1,11 @@
+import { DispatchState, ReactChildren } from '../../types';
+import { ILibAccordion } from './types';
+export interface ILibAccordionButton extends Pick<ILibAccordion, "data-testid" | "className" | "variant" | "icon"> {
+    isOpen: boolean;
+    setIsOpen: DispatchState<boolean>;
+    title: string;
+}
+export interface ILibAccordionContent extends Pick<ILibAccordion, "data-testid" | "className" | "variant"> {
+    isOpen: boolean;
+    children?: ReactChildren;
+}

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1,21 @@
+import { LibComponentBase, LibAccordionItem, ReactChildren, LibAccordionVariant, LibAccordionIcon } from '../../types';
+interface ILibAccordionBase extends LibComponentBase<HTMLDivElement> {
+    variant?: LibAccordionVariant;
+    icon?: LibAccordionIcon;
+}
+interface AccordionWithItems extends ILibAccordionBase {
+    items: Array<LibAccordionItem>;
+    children?: never;
+}
+interface AccordionWithChildren extends ILibAccordionBase {
+    items?: never;
+    children?: ReactChildren;
+}
+export type ILibAccordion = AccordionWithItems | AccordionWithChildren;
+export interface ILibAccordionItem extends LibComponentBase<HTMLDivElement> {
+    title: string;
+    icon?: LibAccordionIcon;
+    variant?: LibAccordionVariant;
+    defaultOpen?: boolean;
+}
+export {};

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import { ILibAlert } from './types';
+/**
+ * @description Returns a Alert component
+ * @link https://documentation-components-react.vercel.app/components/alert
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop maxWidth?: number
+ * @prop textColor?: Any color from the library
+ * @prop 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" }
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop alertColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"
+ * @prop backgroundColor?: Any color from the library => only if alertColor is not defined
+ * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library (only if alertColor is not defined) }
+ */
+export declare const Alert: import('react').ForwardRefExoticComponent<ILibAlert & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/dist/components/Alert/styles.d.ts

@@ -0,0 +1,10 @@
+import { LibAllColors, ILibBorder, ILibPadding, ILibRadius, LibSpacers } from '../../types';
+declare const StyledAlert: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $textColor: LibAllColors;
+    $padding?: ILibPadding;
+    $borderRadius?: ILibRadius;
+    $gap?: LibSpacers;
+    $backgroundColor: LibAllColors;
+    $border?: ILibBorder;
+}>> & string;
+export { StyledAlert };