asma-core-ui 0.0.1 → 1.0.151-beta2

package/dist/src/components/utils/accordion/StyledAccordionSummary.d.ts

@@ -0,0 +1,2 @@
+import { type AccordionSummaryProps } from '@mui/material';
+export declare const StyledAccordionSummary: (props: AccordionSummaryProps) => JSX.Element;

package/dist/src/components/utils/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './StyledAccordion';
+export * from './StyledAccordionSummary';
+export * from './StyledAccordionDetails';

package/dist/src/components/utils/filter-menu/StyledFilterButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type StyledButtonProps } from '../../inputs/button';
+/**
+ * Custom props:
+ * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
+ */
+type StyledFilterMenuProps = {
+    filterIsActive: boolean;
+    label?: string;
+};
+export declare const StyledFilterButton: React.FC<StyledButtonProps & StyledFilterMenuProps>;
+export {};

package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts

@@ -0,0 +1,26 @@
+import React, { type ReactNode } from 'react';
+import type { PopoverProps } from '@mui/material';
+/**
+ * Custom props:
+ * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
+ * @param popoverContent
+ */
+type StyledFilterMenuProps = {
+    dataTest: string;
+    filterIsActive: boolean;
+    popoverContent: ((props: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode) | ReactNode;
+    disabled?: boolean;
+    size?: 'small' | 'large' | 'medium';
+    variant?: 'contained' | 'outlined' | 'text' | 'textGray';
+    popoverProps?: Omit<PopoverProps, 'open' | 'anchorEl' | 'onClose'>;
+    anchorNode?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode;
+    label?: string;
+};
+export declare const StyledFilterMenu: React.FC<StyledFilterMenuProps>;
+export {};

package/dist/src/components/utils/filter-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StyledFilterButton';
+export * from './StyledFilterMenu';

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -0,0 +1,2 @@
+import { type PopoverProps } from '@mui/material';
+export declare const StyledPopover: (props: PopoverProps) => JSX.Element;

package/dist/src/components/utils/popover/index.d.ts

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

package/dist/src/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/src/helpers/date.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const setMidnightTime: (date: Date) => Date;
+export declare const setZeroTime: (date: Date) => Date;

package/dist/src/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './reflections.helper';
+export * from './date.helper';
+export * from './prepareForSlot';

package/dist/src/helpers/prepareForSlot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * When inserting a component from a third-party library into a slot, you may encounter this warning: "React does not recognize the ownerState prop on a DOM element." This is because the custom component isn't prepared to receive the ownerState like a built-in library component would be.
+ */
+export declare function prepareForSlot<ComponentType extends React.ElementType>(Component: ComponentType): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("react").ComponentProps<ComponentType>> & import("react").RefAttributes<HTMLElement>>;

package/dist/src/helpers/reflections.helper.d.ts

@@ -0,0 +1 @@
+export declare const omit: <T extends object, K extends keyof T>(obj: T, keys: readonly K[]) => Omit<T, K>;

package/dist/src/hooks/useToggleMenuVisibility.hook.d.ts

@@ -0,0 +1,6 @@
+export declare const useToggleMenuVisibility: () => {
+    open: boolean;
+    handleClose: () => void;
+    handleOpen: (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => void;
+    anchorEl: HTMLElement | SVGSVGElement | null;
+};

package/dist/src/hooks/useWindowWidthSize.hook.d.ts

@@ -0,0 +1,5 @@
+export declare function useWindowWidthSize(): number;
+export declare const mobileView: (windowWidth: number | undefined) => boolean;
+export declare function useIsMobileView(): boolean;
+export declare function useIsTabletView(): boolean;
+export declare const tabletView: (windowWidth: number | undefined) => boolean;

package/dist/src/index.d.ts

@@ -0,0 +1,38 @@
+export * from './helpers';
+export * from './components/data-display/badge';
+export * from './components/data-display/chip';
+export * from './components/data-display/tooltip';
+export * from './components/icons';
+export * from './components/data-display/typography';
+export * from './components/data-display/form-label';
+export * from './components/feedback/dialog';
+export * from './components/feedback/empty-page/StyledEmptyPage';
+export * from './components/feedback/loading/StyledLoading';
+export * from './components/inputs/button';
+export * from './components/inputs/checkbox';
+export * from './components/inputs/input-field';
+export * from './components/inputs/textarea';
+export * from './components/inputs/select';
+export * from './components/inputs/select-autocomplete';
+export * from './components/inputs/slider';
+export * from './components/inputs/switch';
+export * from './components/inputs/radio-button';
+export * from './components/inputs/label';
+export * from './components/miscellaneous/StyledFormControl';
+export * from './components/miscellaneous/StyledFormControlLabel';
+export * from './components/miscellaneous/StyledFormHelperText';
+export * from './components/miscellaneous/StyledInputLabel';
+export * from './components/miscellaneous/StyledFormGroup';
+export * from './components/navigation/drawer';
+export * from './components/navigation/menu';
+export * from './components/navigation/link';
+export * from './components/navigation/tabs';
+export * from './components/utils/accordion';
+export * from './components/utils/popover';
+export * from './components/utils/filter-menu';
+export * from './components/custom/widget/widget-title/StyledWidgetTitle';
+export * from './components/custom/widget/widget-header/StyledWidgetHeader';
+export * from './components/custom/widget/widget/StyledWidget';
+export * from './components/custom/module/module-title/StyledModuleTitle';
+export * from './components/feedback/minimizable-dialog';
+export { Fade, Paper, ClickAwayListener, Popper, Avatar, Skeleton, Container, Stack, FormLabel } from '@mui/material';

package/dist/tailwind.config.d.ts

@@ -0,0 +1,155 @@
+declare const _default: {
+    mode: string;
+    important: true;
+    content: string[];
+    theme: {
+        fontFamily: {
+            sans: string[];
+            roboto: string[];
+        };
+        extend: {
+            colors: {
+                inherit: string;
+                "textcolor-component": string;
+                "color-active-component": string;
+                "alpha-100": string;
+                "alpha-500": string;
+                "alpha-600": string;
+                "alpha-700": string;
+                "beta-100": string;
+                "beta-500": string;
+                "beta-600": string;
+                "beta-700": string;
+                "gama-25": string;
+                "gama-50": string;
+                "gama-100": string;
+                "gama-200": string;
+                "gama-300": string;
+                "gama-400": string;
+                "gama-500": string;
+                "gama-600": string;
+                "gama-700": string;
+                "gama-800": string;
+                "gama-900": string;
+                "delta-10": string;
+                "delta-50": string;
+                "delta-100": string;
+                "delta-200": string;
+                "delta-300": string;
+                "delta-400": string;
+                "delta-500": string;
+                "delta-600": string;
+                "delta-700": string;
+                "delta-800": string;
+                "delta-900": string;
+                "delta-9000": string;
+                "sigma-700": string;
+                "theta-100": string;
+                "theta-200": string;
+                "theta-300": string;
+                "theta-400": string;
+                "theta-500": string;
+                "theta-600": string;
+                "theta-700": string;
+                "theta-800": string;
+                "theta-hover": string;
+                "btn-bg": string;
+                "btn-bg-active": string;
+                "btn-bg-hover": string;
+                "btn-bg-disabled": string;
+                "btn-bg-danger": string;
+                "btn-bg-danger-active": string;
+                "btn-task-status-bg": string;
+                "btn-bg-mini-action": string;
+                "btn-bg-mini-action-hover": string;
+                "chat-ticket-message-bg": string;
+                "colors-topbar-text": string;
+                "custom-grey-01": string;
+                "custom-grey-02": string;
+                "custom-grey-03": string;
+                "custom-grey-04": string;
+                "custom-grey-06": string;
+            };
+            boxShadow: {
+                ash: string;
+                mui: string;
+            };
+            animation: {
+                "slide-in": string;
+                "slide-out": string;
+                "opacity-in": string;
+                "opacity-in-5": string;
+                "opacity-appear-3": string;
+                "opacity-appear-1s": string;
+                "opacity-out": string;
+                spin: string;
+            };
+            keyframes: {
+                "slide-in": {
+                    "0%": {
+                        margin: string;
+                    };
+                    "100%": {
+                        margin: string;
+                    };
+                };
+                "slide-out": {
+                    "0%": {
+                        margin: string;
+                    };
+                    "100%": {
+                        margin: string;
+                    };
+                };
+                "opacity-in": {
+                    "0%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                        height: string;
+                    };
+                };
+                "opacity-appear": {
+                    "0%": {
+                        height: string;
+                        opacity: string;
+                    };
+                    "100%": {
+                        height: string;
+                        opacity: string;
+                    };
+                };
+                "opacity-out": {
+                    "0%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "60%": {
+                        opacity: string;
+                        height: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                        height: string;
+                    };
+                };
+                spin: {
+                    "0%": {
+                        transform: string;
+                    };
+                    "100%": {
+                        transform: string;
+                    };
+                };
+            };
+        };
+    };
+    darkMode: "media";
+    corePlugins: {
+        preflight: false;
+    };
+    plugins: any[];
+};
+export default _default;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/package.json

@@ -1,104 +1,129 @@
 {
     "name": "asma-core-ui",
-    "private": false,
-    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "version": "1.0.151-beta2",
     "type": "module",
     "files": [
         "dist/**/*",
         "dist/style.css",
-        "tailwind-configs"
+        "tw-configs/**/*"
     ],
     "keywords": [],
     "author": "asma-team",
     "types": "./dist/index.d.ts",
     "main": "./dist/asma-core-ui.es.js",
     "module": "./dist/asma-core-ui.es.js",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/asma-core-ui.es.js"
+            }
+        },
+        "./dist/style.css": "./dist/style.css",
+        "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json"
+    },
     "scripts": {
         "dev": "vite",
-        "build": "tsc && rm -rf ./dist && vite build",
+        "build": "npx tsc && rm -rf ./dist && vite build",
         "preview": "vite preview",
         "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+        "version": "echo $npm_package_version",
         "lint:fix": "eslint --fix src/**/*.{jsx,ts,tsx}",
         "prettier": "prettier --write src//**/*.{ts,tsx,scss} --config ./.prettierrc",
-        "storybook": "start-storybook -p 6006",
-        "storybook:node18": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
-        "build-storybook": "build-storybook",
-        "create-index": "ctix create -p ./tsconfig.json -w -a ./src"
+        "storybook": "storybook dev -p 6006",
+        "storybook:no-browser": "storybook dev -p 6006 --no-open",
+        "storybook:node18": "export NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "storybook:node18:win": "set NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "build-storybook": "export NODE_OPTIONS=--max_old_space_size=6240 && storybook build",
+        "test-storybook": "test-storybook",
+        "changeset:pre-beta": "changeset pre enter beta",
+        "changeset:pre-exit": "changeset pre exit",
+        "changeset:version": "changeset version",
+        "changeset:publish": "changeset publish",
+        "changeset:status": "changeset status"
     },
     "license": "UNLICENSED",
     "dependencies": {
-        "@emotion/react": "^11.10.6",
-        "@emotion/styled": "^11.10.6",
-        "@fontsource/material-icons": "^4.5.4",
-        "@fontsource/roboto": "^4.5.8",
-        "@mui/material": "^5.11.13",
-        "@storybook/addon-styling": "^0.3.1",
-        "@storybook/addons": "^6.5.16",
-        "ctix": "^1.8.2",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@fontsource/material-icons": "^5.0.4",
+        "@iconify/react": "^4.1.1",
+        "@mui/material": "^5.13.7",
+        "@tanstack/react-table": "^8.10.0",
+        "clsx": "^1.2.1",
+        "date-fns": "^2.30.0",
         "lodash-es": "^4.17.21",
-        "rollup-plugin-typescript2": "^0.34.1",
-        "storybook": "^6.5.16"
+        "material-ui-popup-state": "^5.0.10",
+        "node": "18.17.0",
+        "notistack": "^3.0.1",
+        "react": "^18.2.0",
+        "react-day-picker": "^8.8.2",
+        "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.6",
+        "react-quill": "^2.0.0",
+        "sass": "^1.77.5",
+        "vite-plugin-css-injected-by-js": "^3.5.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.20.12",
-        "@rollup/plugin-commonjs": "21",
-        "@storybook/addon-actions": "^6.5.15",
-        "@storybook/addon-essentials": "^6.5.15",
-        "@storybook/addon-interactions": "^6.5.15",
-        "@storybook/addon-links": "^6.5.15",
-        "@storybook/builder-vite": "^0.2.6",
-        "@storybook/react": "^6.5.15",
-        "@storybook/testing-library": "^0.0.13",
+        "@changesets/cli": "^2.26.2",
+        "@faker-js/faker": "^8.0.2",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@storybook/addon-a11y": "^7.6.9",
+        "@storybook/addon-essentials": "^7.6.9",
+        "@storybook/addon-interactions": "^7.6.9",
+        "@storybook/addon-links": "^7.6.9",
+        "@storybook/addon-mdx-gfm": "^7.6.9",
+        "@storybook/addon-styling": "^1.3.7",
+        "@storybook/addons": "^7.6.9",
+        "@storybook/blocks": "^7.6.9",
+        "@storybook/manager-api": "^7.6.9",
+        "@storybook/preset-create-react-app": "^7.6.9",
+        "@storybook/react": "^7.6.9",
+        "@storybook/react-vite": "^7.6.9",
+        "@storybook/test-runner": "^0.16.0",
+        "@storybook/testing-library": "^0.2.2",
+        "@storybook/theming": "^7.6.9",
         "@types/lodash-es": "^4.17.7",
-        "@types/react": "^18.0.26",
-        "@types/react-dom": "^18.0.9",
-        "@typescript-eslint/eslint-plugin": "^5.0.0",
-        "@typescript-eslint/parser": "^5.38.1",
-        "@vitejs/plugin-react": "^3.0.0",
-        "autoprefixer": "^10.4.12",
-        "babel-loader": "^8.3.0",
-        "eslint": "^8.0.1",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-import-resolver-typescript": "^3.5.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-jsx-a11y": "^6.6.1",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-promise": "^6.0.0",
-        "eslint-plugin-react": "^7.31.8",
+        "@types/node": "^18.0.3",
+        "@types/react": "^18.0.37",
+        "@types/react-dom": "^18.0.11",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/parser": "^5.59.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "autoprefixer": "^10.4.14",
+        "axe-playwright": "^1.2.3",
+        "axios": "^1.6.8",
+        "eslint": "^8.38.0",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-simple-import-sort": "^8.0.0",
-        "eslint-plugin-storybook": "^0.6.8",
-        "eslint-plugin-unused-imports": "^2.0.0",
-        "less": "^4.1.3",
-        "lint-staged": "^13.0.3",
-        "node-sass": "^8.0.0",
-        "postcss": "^8.4.16",
-        "prettier": "^2.7.1",
-        "prettier-plugin-tailwindcss": "^0.1.13",
-        "react": "^18.*",
-        "react-dom": "^18.*",
-        "react-hooks": "^1.0.1",
-        "sass": "^1.57.1",
-        "tailwind": "^4.0.0",
-        "tailwindcss": "^3.1.8",
-        "typescript": "^4.9.3",
-        "typescript-plugin-css-modules": "^3.4.0",
-        "vite": "^4.0.0",
-        "vite-plugin-dts": "^2.1.0",
-        "vite-tsconfig-paths": "^4.0.3"
+        "eslint-plugin-react-refresh": "^0.3.4",
+        "eslint-plugin-storybook": "^0.6.15",
+        "postcss": "^8.4.24",
+        "prop-types": "^15.8.1",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "storybook": "^7.6.9",
+        "storybook-addon-themes": "^6.1.0",
+        "tailwind-merge": "^2.4.0",
+        "tailwind-scrollbar": "^3.1.0",
+        "tailwindcss": "^3.3.2",
+        "typescript": "^5.0.2",
+        "typescript-plugin-css-modules": "^5.0.1",
+        "vite": "^4.3.9",
+        "vite-plugin-dts": "^3.1.1",
+        "vite-tsconfig-paths": "^4.2.0"
     },
     "peerDependencies": {
         "@emotion/react": "^11.*",
         "@emotion/styled": "^11.*",
         "@mui/material": "^5.*",
+        "immer": "^9.*",
         "react": "^18.*",
         "react-dom": "^18.*"
     },
-    "exports": {
-        ".": {
-            "import": "./dist/asma-core-ui.es.js"
-        },
-        "./dist/style.css": "./dist/style.css",
-        "./tailwind-configs/tw_configs.cjs": "./tailwind-configs/tw_configs.cjs"
+    "resolutions": {
+        "@types/node": "18.0.3",
+        "node": "18.17.0"
     }
 }

package/tw-configs/twConfigs.json

@@ -0,0 +1,122 @@
+{
+    "fontFamily": {
+        "sans": ["Roboto"],
+        "roboto": ["Roboto"]
+    },
+    "colors": {
+        "inherit": "inherit",
+        "textcolor-component": "var(--colors-text-component)",
+        "color-active-component": "var(--colors-active-component)",
+        "alpha-100": "var(--colors-alpha-100)",
+        "alpha-500": "var(--colors-alpha-500)",
+        "alpha-600": "var(--colors-alpha-600)",
+        "alpha-700": "var(--colors-alpha-700)",
+        "beta-100": "var(--colors-beta-100)",
+        "beta-500": "var(--colors-beta-500)",
+        "beta-600": "var(--colors-beta-600)",
+        "beta-700": "var(--colors-beta-700)",
+        "gama-25": "var(--colors-gama-25)",
+        "gama-50": "var(--colors-gama-50)",
+        "gama-100": "var(--colors-gama-100)",
+        "gama-200": "var(--colors-gama-200)",
+        "gama-300": "var(--colors-gama-300)",
+        "gama-400": "var(--colors-gama-400)",
+        "gama-500": "var(--colors-gama-500)",
+        "gama-600": "var(--colors-gama-600)",
+        "gama-700": "var(--colors-gama-700)",
+        "gama-800": "var(--colors-gama-800)",
+        "gama-900": "var(--colors-gama-900)",
+        "delta-10": "var(--colors-delta-10)",
+        "delta-50": "var(--colors-delta-50)",
+        "delta-100": "var(--colors-delta-100)",
+        "delta-200": "var(--colors-delta-200)",
+        "delta-300": "var(--colors-delta-300)",
+        "delta-400": "var(--colors-delta-400)",
+        "delta-500": "var(--colors-delta-500)",
+        "delta-600": "var(--colors-delta-600)",
+        "delta-700": "var(--colors-delta-700)",
+        "delta-800": "var(--colors-delta-800)",
+        "delta-900": "var(--colors-delta-900)",
+        "delta-9000": "var(--colors-gray-9000)",
+        "sigma-700": "var(--colors-sigma-700)",
+        "theta-100": "var(--colors-theta-100)",
+        "theta-200": "var(--colors-theta-200)",
+        "theta-300": "var(--colors-theta-300)",
+        "theta-400": "var(--colors-theta-400)",
+        "theta-500": "var(--colors-theta-500)",
+        "theta-600": "var(--colors-theta-600)",
+        "theta-700": "var(--colors-theta-700)",
+        "theta-800": "var(--colors-theta-800)",
+        "theta-hover": "var(--colors-theta-hover)",
+        "btn-bg": "var(--colors-btn-bg-standart)",
+        "btn-bg-active": "var(--colors-btn-bg-active)",
+        "btn-bg-hover": "var(--colors-btn-bg-hover)",
+        "btn-bg-disabled": "var(--colors-btn-bg-disabled)",
+        "btn-bg-danger": "var(--colors-btn-bg-danger)",
+        "btn-bg-danger-active": "var(--colors-btn-bg-danger-active)",
+        "btn-task-status-bg": "var(--colors-btn-task-status-bg)",
+        "btn-bg-mini-action": "var(--colors-btn-bg-mini-action)",
+        "btn-bg-mini-action-hover": "var(--colors-btn-bg-mini-action-hover)",
+
+        "chat-ticket-message-bg": "var(--colors-chat-ticket-message-bg)",
+        "colors-topbar-text": "var(--colors-topbar-text)",
+        "custom-grey-01": "hsl(var(--color-cardea--grey-01) / <alpha-value>)",
+        "custom-grey-02": "hsl(var(--color-cardea--grey-02) / <alpha-value>)",
+        "custom-grey-03": "hsl(var(--color-cardea--grey-03) / <alpha-value>)",
+        "custom-grey-04": "hsl(var(--color-cardea--grey-04) / <alpha-value>)",
+        "custom-grey-06": "hsl(var(--color-cardea--grey-06) / <alpha-value>)"
+    },
+    "boxShadow": {
+        "ash": "-1px 8px 18px -20px black",
+        "mui": "0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"
+    },
+    "animation": {
+        "slide-in": "slide-in 0.3s linear",
+        "slide-out": "slide-out 0.3s linear",
+        "opacity-in": "opacity-in 0.1s linear",
+        "opacity-in-5": "opacity-in 0.5s linear",
+        "opacity-appear-3": "opacity-appear 0.3s linear",
+        "opacity-appear-1s": "opacity-appear 1s linear",
+        "opacity-out": "opacity-out 0.3s linear",
+        "spin": "spin 1s linear infinite"
+    },
+    "keyframes": {
+        "slide-in": {
+            "0%": { "margin": "0 0 0 -320px" },
+            "100%": { "margin": "0" }
+        },
+        "slide-out": {
+            "0%": { "margin": "0" },
+            "100%": { "margin": "0 0 0 -320px" }
+        },
+        "opacity-in": {
+            "0%": {
+                "opacity": "0",
+                "height": "100%"
+            },
+            "100%": {
+                "opacity": "1",
+                "height": "100%"
+            }
+        },
+        "opacity-appear": {
+            "0%": {
+                "height": "0",
+                "opacity": "0"
+            },
+            "100%": {
+                "height": "100%",
+                "opacity": "1"
+            }
+        },
+        "opacity-out": {
+            "0%": { "opacity": "1", "height": "100%" },
+            "60%": { "opacity": "1", "height": "100%" },
+            "100%": { "opacity": "0", "height": "100%" }
+        },
+        "spin": {
+            "0%": { "transform": "rotate(0deg)" },
+            "100%": { "transform": "rotate(360deg)" }
+        }
+    }
+}