@newtonschool/grauity 1.2.0 → 1.2.2

package/dist/ui/elements/AlertBanner/utils.d.ts

@@ -0,0 +1,105 @@
+import { AlertProps, AlertType, AlertVariant } from '../Alert/types';
+import { AlertBannerProps, AlertBannerType, AlertBannerVariant } from './types';
+/**
+ * Get alert banner icon name based on variant and icon prop
+ *
+ * If icon prop is set to 'auto', the icon will be selected based on the variant
+ *
+ * @param icon - Alert banner icon prop
+ * @param variant - Alert banner variant
+ * @returns Alert banner icon name
+ */
+export declare const getAlertIconName: (icon: AlertBannerProps['icon'] | AlertProps['icon'], variant: AlertBannerVariant | AlertVariant) => import("../../core").grauityIconName;
+/**
+ * Get alert banner colors based on variant and type
+ *
+ * @param variant - Alert banner variant
+ * @param type - Alert banner type
+ * @returns Alert banner colors
+ */
+export declare const getAlertBannerColors: (variant: AlertBannerVariant | AlertVariant, type: AlertBannerType | AlertType) => {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+} | {
+    iconColor: string;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+};
+/**
+ * Get button variant based on alert banner variant and type.
+ * Useful for showing correct variant for close button.
+ *
+ * @param variant - Alert banner variant
+ * @param type - Alert banner type
+ * @returns Button variant
+ */
+export declare const getButtonVariantFromAlertBannerTypeVariant: (variant: AlertBannerVariant | AlertVariant, type: AlertBannerType | AlertType) => import("../Button").BUTTON_VARIANTS_ENUM;
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui/elements/AlertBanner/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../ui/elements/AlertBanner/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMrE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEhF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,SACnB,gBAAgB,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,WAC1C,kBAAkB,GAAG,YAAY,yCAO7C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,YACpB,kBAAkB,GAAG,YAAY,QACpC,eAAe,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACU,CAAC;AAEhD;;;;;;;GAOG;AACH,eAAO,MAAM,0CAA0C,YAC1C,kBAAkB,GAAG,YAAY,QACpC,eAAe,GAAG,SAAS,6CACsC,CAAC"}

package/dist/ui/elements/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import { TooltipProps } from './types';
+declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/ui/elements/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../ui/elements/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,OAAO,UAAW,YAAY,gBA0MnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/ui/elements/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,5 @@
+import { StyledDivProps } from '../../../common/types';
+import { StyledTooltipProps } from './types';
+export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<string, any, StyledTooltipProps, never>;
+export declare const StyledTooltipArrow: import("styled-components").StyledComponent<string, any, StyledDivProps, never>;
+//# sourceMappingURL=Tooltip.styles.d.ts.map

package/dist/ui/elements/Tooltip/Tooltip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../ui/elements/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,oBAAoB,qFAiBhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,iFAQ9B,CAAC"}

package/dist/ui/elements/Tooltip/constants.d.ts

@@ -0,0 +1,15 @@
+export declare enum TOOLTIP_PLACEMENT {
+    TOP = "top",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    TOP_START = "top-start",
+    TOP_END = "top-end",
+    BOTTOM_START = "bottom-start",
+    BOTTOM_END = "bottom-end",
+    LEFT_START = "left-start",
+    LEFT_END = "left-end",
+    RIGHT_START = "right-start",
+    RIGHT_END = "right-end"
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/ui/elements/Tooltip/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../ui/elements/Tooltip/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,iBAAiB;IACzB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CAC1B"}

package/dist/ui/elements/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Tooltip';
+export type { TooltipProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/elements/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../ui/elements/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/ui/elements/Tooltip/types.d.ts

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+import { StyledDivProps } from '../../../common/types';
+import { TOOLTIP_PLACEMENT } from './constants';
+export interface TooltipConfig {
+    tooltip: {
+        maxWidth: string;
+        padding: string;
+        backgroundColor?: string;
+    };
+}
+export type TooltipChildren = ReactNode;
+export type TooltipPlacement = `${TOOLTIP_PLACEMENT}`;
+export interface TooltipProps {
+    /**
+     * The placement of the tooltip
+     * @default 'top'
+     * */
+    placement?: TooltipPlacement;
+    /**
+     * Whether the tooltip should use fixed positioning
+     * @default false
+     * */
+    fixedPositioning?: boolean;
+    /**
+     * The content of the tooltip
+     * */
+    content?: React.ReactNode;
+    /**
+     * Configuration for the tooltip
+     *
+     * @default
+     * { tooltip: { maxWidth: null, padding: '12px' } }
+     * */
+    config?: TooltipConfig;
+    /**
+     * Whether the tooltip should be hidden
+     * @default false
+     * */
+    hidden?: boolean;
+    /**
+     * Whether the tooltip arrow should be hidden
+     * @default false
+     * */
+    hideArrow?: boolean;
+    /**
+     * A trigger to recompute the tooltip position
+     * */
+    recomputedTrigger?: any;
+    /**
+     * Whether the tooltip should be open by default
+     * @default false
+     * */
+    defaultOpen?: boolean;
+    /**
+     * The children that the tooltip is wrapping
+     * */
+    children: TooltipChildren;
+}
+export interface StyledTooltipProps extends StyledDivProps {
+    /**
+     * The padding of the tooltip
+     * @default '12px'
+     * */
+    padding?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/ui/elements/Tooltip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../ui/elements/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACL;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAEtD,MAAM,WAAW,YAAY;IACzB;;;SAGK;IACL,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;SAGK;IACL,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;SAEK;IACL,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;SAKK;IACL,MAAM,CAAC,EAAE,aAAa,CAAC;IAEvB;;;SAGK;IACL,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;SAGK;IACL,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;SAEK;IACL,iBAAiB,CAAC,EAAE,GAAG,CAAC;IAExB;;;SAGK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;SAEK;IACL,QAAQ,EAAE,eAAe,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACtD;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/ui/index.d.ts

@@ -2,6 +2,8 @@ export { ICON_TAGS, TAG_ICONS } from './core';
 export type { GrauityInitProps } from './init';
 export { GrauityInit } from './init';
 export { GlobalStyle as GrauityGlobalStyle, GrauityThemeProvider, DARK_THEME_CONFIG as NS_DARK_THEME_CONFIG, LIGHT_THEME_CONFIG as NS_LIGHT_THEME_CONFIG, GlobalStyle as NSGlobalStyle, ThemeConsumer as NSThemeConsumer, ThemeContext as NSThemeContext, ThemeWrapper as NSThemeWrapper, } from './themes';
+export { ALERT_VARIANTS, ALERT_VARIANTS_ENUM, type AlertProps, default as NSAlert, } from './elements/Alert';
+export { type AlertBannerProps, default as NSAlertBanner, } from './elements/AlertBanner';
 export { type IconProps, Icon as NSIcon } from './elements/Icon';
 export { BUTTON_ICON_POSITIONS_ENUM, BUTTON_SIZES_ENUM, BUTTON_VARIANTS, BUTTON_VARIANTS_ENUM, type ButtonProps, default as NSButton, ButtonGroup as NSButtonGroup, IconButton as NSIconButton, } from './elements/Button';
 export { default as NSTypography, TYPOGRAPHY_AS_ENUM, TYPOGRAPHY_AS_LIST, TYPOGRAPHY_VARIANTS, TYPOGRAPHY_VARIANTS_ENUM, type TypographyProps, } from './elements/Typography';
@@ -21,4 +23,5 @@ export { default as NSOverlay, type OverlayProps } from './elements/Overlay';
 export { default as NSPlaceholder, type PlaceholderProps, } from './elements/Placeholder';
 export { default as NSRangeInput, type RangeInputProps, } from './elements/RangeInput';
 export { type FloatingActionButtonProps, default as NSFloatingActionButton, } from './elements/FloatingActionButton';
+export { default as NSTooltip, type TooltipProps } from './elements/Tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGrC,OAAO,EACH,WAAW,IAAI,kBAAkB,EACjC,oBAAoB,EACpB,iBAAiB,IAAI,oBAAoB,EACzC,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,IAAI,aAAa,EAC5B,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,YAAY,IAAI,cAAc,GACjC,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,EACH,0BAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,KAAK,WAAW,EAChB,OAAO,IAAI,QAAQ,EACnB,WAAW,IAAI,aAAa,EAC5B,UAAU,IAAI,YAAY,GAC7B,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACH,OAAO,IAAI,YAAY,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,eAAe,GACvB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGvE,OAAO,EAAE,KAAK,UAAU,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAG7E,OAAO,EACH,KAAK,uBAAuB,EAC5B,OAAO,IAAI,oBAAoB,GAClC,MAAM,qCAAqC,CAAC;AAG7C,OAAO,EACH,KAAK,mBAAmB,EACxB,OAAO,IAAI,gBAAgB,GAC9B,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,KAAK,mBAAmB,GAC3B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACH,KAAK,wBAAwB,EAC7B,OAAO,IAAI,qBAAqB,GACnC,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,KAAK,SAAS,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGpE,OAAO,EACH,KAAK,cAAc,EACnB,OAAO,IAAI,WAAW,GACzB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACH,KAAK,gBAAgB,EACrB,OAAO,IAAI,aAAa,GAC3B,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EACH,KAAK,kBAAkB,EACvB,OAAO,IAAI,eAAe,GAC7B,MAAM,iDAAiD,CAAC;AAGzD,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,KAAK,mBAAmB,GAC3B,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACH,OAAO,IAAI,aAAa,EACxB,KAAK,gBAAgB,GACxB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EACH,OAAO,IAAI,YAAY,EACvB,KAAK,eAAe,GACvB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACH,KAAK,yBAAyB,EAC9B,OAAO,IAAI,sBAAsB,GACpC,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../ui/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/themes/GlobalStyle.d.ts

@@ -1,4 +1,4 @@
-export declare const constantGlobalStyle = "\n    --neutral-0:   #FFFFFF;\n    --neutral-100: #F6F7F9;\n    --neutral-200: #EDEFF3;\n    --neutral-300: #E1E5EA;\n    --neutral-400: #C9CFD9;\n    --neutral-500: #B2B9C7;\n    --neutral-600: #8C95A6;\n    --neutral-700: #5B6271;\n    --neutral-750: #30363D;\n    --neutral-800: #23282F;\n    --neutral-900: #16191D;\n    --neutral-1000: #0B0C0E;\n\n    --brand-0:   #E5F1FF;\n    --brand-100: #C2DDFF;\n    --brand-200: #94C4FF;\n    --brand-300: #61A8FF;\n    --brand-400: #2989FF;\n    --brand-500: #0673F9;\n    --brand-600: #005ED1;\n    --brand-700: #004599;\n    --brand-800: #003270;\n    --brand-900: #002452;\n\n    --error-0:   #FFE5E7;\n    --error-100: #FBBBBF;\n    --error-200: #FA9499;\n    --error-300: #F8636B;\n    --error-400: #EE3F44;\n    --error-500: #D22D3A;\n    --error-600: #A01B22;\n    --error-700: #7E1219;\n    --error-800: #63080D;\n    --error-900: #4A040A;\n\n    --success-0: #D9FCED;\n    --success-100: #ACF7D3;\n    --success-200: #7EE7B8;\n    --success-300: #50CE99;\n    --success-400: #13B97C;\n    --success-500: #009965;\n    --success-600: #007A51;\n    --success-700: #005C3D;\n    --success-800: #003D29;\n    --success-900: #002D1E;\n\n    --warning-0: #FFF1E5;\n    --warning-100: #FFD2BA;\n    --warning-200: #FFB286;\n    --warning-300: #FD9254;\n    --warning-400: #F37216;\n    --warning-500: #DE5A02;\n    --warning-600: #A83E00;\n    --warning-700: #802D00;\n    --warning-800: #5C1F00;\n    --warning-900: #441704;\n\n    --yellow-0: #FFF3D6;\n    --yellow-100: #FFE4AD;\n    --yellow-200: #FFD580;\n    --yellow-300: #FEC553;\n    --yellow-400: #FEB000;\n    --yellow-500: #F59700;\n    --yellow-600: #D17300;\n    --yellow-700: #944500;\n    --yellow-800: #5C2900;\n    --yellow-900: #3D1A00;\n\n    --purple-0: #F5E5FF;\n    --purple-100: #E1D1FF;\n    --purple-200: #CEBCFE;\n    --purple-300: #B49DFE;\n    --purple-400: #967CFD;\n    --purple-500: #7B55EE;\n    --purple-600: #6138D3;\n    --purple-700: #46279B;\n    --purple-800: #331D72;\n    --purple-900: #221056;\n\n    --alpha-20: rgba(255, 255, 255, 0.20);\n    --alpha-12: rgba(255, 255, 255, 0.12);\n    --alpha-80: rgba(255, 255, 255, 0.80);\n    --alpha-overlay: rgba(22, 25, 29, 0.80);\n\n    --spacing-0px: 0px;\n    --spacing-1px: 1px;\n    --spacing-2px: 2px;\n    --spacing-3px: 3px;\n    --spacing-4px: 4px;\n    --spacing-5px: 5px;\n    --spacing-6px: 6px;\n    --spacing-7px: 7px;\n    --spacing-8px: 8px;\n    --spacing-9px: 9px;\n    --spacing-10px: 10px;\n    --spacing-12px: 12px;\n    --spacing-14px: 14px;\n    --spacing-16px: 16px;\n    --spacing-18px: 18px;\n    --spacing-20px: 20px;\n    --spacing-24px: 24px;\n    --spacing-28px: 28px;\n    --spacing-32px: 32px;\n    --spacing-36px: 36px;\n    --spacing-40px: 40px;\n    --spacing-48px: 48px;\n    --spacing-56px: 56px;\n    --spacing-64px: 64px;\n    --spacing-72px: 72px;\n    --spacing-80px: 80px;\n    --spacing-128px: 128px;\n    --spacing-160px: 160px;\n\n    --corner-radius-0px: 0px;\n    --corner-radius-2px: 2px;\n    --corner-radius-4px: 4px;\n    --corner-radius-8px: 8px;\n    --corner-radius-12px: 12px;\n    --corner-radius-16px: 16px;\n    --corner-radius-20px: 20px;\n    --corner-radius-24px: 24px;\n    --corner-radius-32px: 32px;\n    --corner-radius-40px: 40px;\n    --corner-radius-50percent: 50%;\n    --corner-radius-100percent: 100%;\n\n    --font-size-2px: 2px;\n    --font-size-4px: 4px;\n    --font-size-6px: 6px;\n    --font-size-8px: 8px;\n    --font-size-10px: 10px;\n    --font-size-11px: 11px;\n    --font-size-12px: 12px;\n    --font-size-14px: 14px;\n    --font-size-16px: 16px;\n    --font-size-18px: 18px;\n    --font-size-20px: 20px;\n    --font-size-24px: 24px;\n    --font-size-28px: 28px;\n    --font-size-32px: 32px;\n    --font-size-36px: 36px;\n    --font-size-40px: 40px;\n    --font-size-48px: 48px;\n    --font-size-56px: 56px;\n    --font-size-64px: 64px;\n    --font-size-72px: 72px;\n    --font-size-80px: 80px;\n    --font-size-96px: 96px;\n\n    --font-weight-100: 100;\n    --font-weight-200: 200;\n    --font-weight-300: 300;\n    --font-weight-400: 400;\n    --font-weight-450: 450;\n    --font-weight-500: 500;\n    --font-weight-550: 550;\n    --font-weight-600: 600;\n    --font-weight-650: 650;\n    --font-weight-700: 700;\n    --font-weight-800: 800;\n    --font-weight-900: 900;\n\n    --font-weight-medium: var(--font-weight-450);\n    --font-weight-semibold: var(--font-weight-550);\n    --font-weight-bold: var(--font-weight-650);\n\n    --backdrop-blur-0: blur(0px);\n    --backdrop-blur-4px: blur(4px);\n    --backdrop-blur-8px: blur(8px);\n    --backdrop-blur-12px: blur(12px);\n    --backdrop-blur-16px: blur(16px);\n    --backdrop-blur-20px: blur(20px);\n\n    --backdrop-blur: var(--backdrop-blur-8px);\n\n    --z-index-overlay-hoc: 2000;\n    --z-index-tooltip: 1500;\n    --z-index-dropdown: 1400;\n    --z-index-bottomsheet: 1300;\n    --z-index-bottomsheet-overlay: 1250;\n    --z-index-popover: 1200;\n    --z-index-popover-overlay: 1150;\n    --z-index-modal: 1100;\n    --z-index-modal-overlay: 1050;\n    --z-index-drawer: 1000;\n    --z-index-drawer-overlay: 950;\n    --z-index-floating-action-button: 500;\n";
+export declare const constantGlobalStyle = "\n    --neutral-0:   #FFFFFF;\n    --neutral-100: #F6F7F9;\n    --neutral-200: #EDEFF3;\n    --neutral-300: #E1E5EA;\n    --neutral-400: #C9CFD9;\n    --neutral-500: #B2B9C7;\n    --neutral-600: #8C95A6;\n    --neutral-700: #5B6271;\n    --neutral-750: #30363D;\n    --neutral-800: #23282F;\n    --neutral-900: #16191D;\n    --neutral-1000: #0B0C0E;\n\n    --brand-0:   #E5F1FF;\n    --brand-100: #C2DDFF;\n    --brand-200: #94C4FF;\n    --brand-300: #61A8FF;\n    --brand-400: #2989FF;\n    --brand-500: #0673F9;\n    --brand-600: #005ED1;\n    --brand-700: #004599;\n    --brand-800: #003270;\n    --brand-900: #002452;\n\n    --error-0:   #FFE5E7;\n    --error-100: #FBBBBF;\n    --error-200: #FA9499;\n    --error-300: #F8636B;\n    --error-400: #EE3F44;\n    --error-500: #D22D3A;\n    --error-600: #A01B22;\n    --error-700: #7E1219;\n    --error-800: #63080D;\n    --error-900: #4A040A;\n\n    --success-0: #D9FCED;\n    --success-100: #ACF7D3;\n    --success-200: #7EE7B8;\n    --success-300: #50CE99;\n    --success-400: #13B97C;\n    --success-500: #009965;\n    --success-600: #007A51;\n    --success-700: #005C3D;\n    --success-800: #003D29;\n    --success-900: #002D1E;\n\n    --warning-0: #FFF1E5;\n    --warning-100: #FFD2BA;\n    --warning-200: #FFB286;\n    --warning-300: #FD9254;\n    --warning-400: #F37216;\n    --warning-500: #DE5A02;\n    --warning-600: #A83E00;\n    --warning-700: #802D00;\n    --warning-800: #5C1F00;\n    --warning-900: #441704;\n\n    --yellow-0: #FFF3D6;\n    --yellow-100: #FFE4AD;\n    --yellow-200: #FFD580;\n    --yellow-300: #FEC553;\n    --yellow-400: #FEB000;\n    --yellow-500: #F59700;\n    --yellow-600: #D17300;\n    --yellow-700: #944500;\n    --yellow-800: #5C2900;\n    --yellow-900: #3D1A00;\n\n    --purple-0: #F5E5FF;\n    --purple-100: #E1D1FF;\n    --purple-200: #CEBCFE;\n    --purple-300: #B49DFE;\n    --purple-400: #967CFD;\n    --purple-500: #7B55EE;\n    --purple-600: #6138D3;\n    --purple-700: #46279B;\n    --purple-800: #331D72;\n    --purple-900: #221056;\n\n    --alpha-20: rgba(255, 255, 255, 0.20);\n    --alpha-12: rgba(255, 255, 255, 0.12);\n    --alpha-80: rgba(255, 255, 255, 0.80);\n    --alpha-overlay: rgba(22, 25, 29, 0.80);\n\n    --spacing-0px: 0px;\n    --spacing-1px: 1px;\n    --spacing-2px: 2px;\n    --spacing-3px: 3px;\n    --spacing-4px: 4px;\n    --spacing-5px: 5px;\n    --spacing-6px: 6px;\n    --spacing-7px: 7px;\n    --spacing-8px: 8px;\n    --spacing-9px: 9px;\n    --spacing-10px: 10px;\n    --spacing-12px: 12px;\n    --spacing-14px: 14px;\n    --spacing-16px: 16px;\n    --spacing-18px: 18px;\n    --spacing-20px: 20px;\n    --spacing-24px: 24px;\n    --spacing-28px: 28px;\n    --spacing-32px: 32px;\n    --spacing-36px: 36px;\n    --spacing-40px: 40px;\n    --spacing-48px: 48px;\n    --spacing-56px: 56px;\n    --spacing-64px: 64px;\n    --spacing-72px: 72px;\n    --spacing-80px: 80px;\n    --spacing-128px: 128px;\n    --spacing-160px: 160px;\n\n    --corner-radius-0px: 0px;\n    --corner-radius-2px: 2px;\n    --corner-radius-4px: 4px;\n    --corner-radius-8px: 8px;\n    --corner-radius-12px: 12px;\n    --corner-radius-16px: 16px;\n    --corner-radius-20px: 20px;\n    --corner-radius-24px: 24px;\n    --corner-radius-32px: 32px;\n    --corner-radius-40px: 40px;\n    --corner-radius-50percent: 50%;\n    --corner-radius-100percent: 100%;\n\n    --font-size-2px: 2px;\n    --font-size-4px: 4px;\n    --font-size-6px: 6px;\n    --font-size-8px: 8px;\n    --font-size-10px: 10px;\n    --font-size-11px: 11px;\n    --font-size-12px: 12px;\n    --font-size-14px: 14px;\n    --font-size-16px: 16px;\n    --font-size-18px: 18px;\n    --font-size-20px: 20px;\n    --font-size-24px: 24px;\n    --font-size-28px: 28px;\n    --font-size-32px: 32px;\n    --font-size-36px: 36px;\n    --font-size-40px: 40px;\n    --font-size-48px: 48px;\n    --font-size-56px: 56px;\n    --font-size-64px: 64px;\n    --font-size-72px: 72px;\n    --font-size-80px: 80px;\n    --font-size-96px: 96px;\n\n    --font-weight-100: 100;\n    --font-weight-200: 200;\n    --font-weight-300: 300;\n    --font-weight-400: 400;\n    --font-weight-450: 450;\n    --font-weight-500: 500;\n    --font-weight-550: 550;\n    --font-weight-600: 600;\n    --font-weight-650: 650;\n    --font-weight-700: 700;\n    --font-weight-800: 800;\n    --font-weight-900: 900;\n\n    --font-weight-medium: var(--font-weight-450);\n    --font-weight-semibold: var(--font-weight-550);\n    --font-weight-bold: var(--font-weight-650);\n\n    --backdrop-blur-0: blur(0px);\n    --backdrop-blur-4px: blur(4px);\n    --backdrop-blur-8px: blur(8px);\n    --backdrop-blur-12px: blur(12px);\n    --backdrop-blur-16px: blur(16px);\n    --backdrop-blur-20px: blur(20px);\n\n    --backdrop-blur: var(--backdrop-blur-8px);\n\n    --z-index-tooltip: 3000;\n    --z-index-overlay-hoc: 2000;\n    --z-index-dropdown: 1400;\n    --z-index-bottomsheet: 1300;\n    --z-index-bottomsheet-overlay: 1250;\n    --z-index-popover: 1200;\n    --z-index-popover-overlay: 1150;\n    --z-index-modal: 1100;\n    --z-index-modal-overlay: 1050;\n    --z-index-drawer: 1000;\n    --z-index-drawer-overlay: 950;\n    --z-index-floating-action-button: 500;\n";
 declare const GlobalStyle: import("styled-components").GlobalStyleComponent<any, import("styled-components").DefaultTheme>;
 export default GlobalStyle;
 //# sourceMappingURL=GlobalStyle.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@newtonschool/grauity",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "description": "Design System for Newton School",
     "keywords": [
         "Newton School",
@@ -178,6 +178,7 @@
         "typescript": "^4.9.4"
     },
     "dependencies": {
+        "@floating-ui/dom": "^1.6.12",
         "classnames": "^2.3.2",
         "framer-motion": "^11.11.1",
         "lodash": "^4.17.21"