hplx-react-elements-dev 1.0.0

package/dist/esm/components/tooltip/Tooltip.js

@@ -0,0 +1,112 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "../../components";
+import { useState } from "react";
+var getVariantPlacement = function (variant) {
+    var placement;
+    switch (variant) {
+        case "Bottom":
+            placement = "absolute block z-10 top-full left-1/2 translate-x-[-50%]";
+            break;
+        case "Left":
+            placement = "absolute block z-10 right-full top-1/2 translate-y-[-50%]";
+            break;
+        case "Right":
+            placement = "absolute block z-10 left-full top-1/2 translate-y-[-50%]";
+            break;
+        case "Top":
+            placement = "absolute block z-10 bottom-full left-1/2 translate-x-[-50%]";
+            break;
+        case "Top end":
+            placement = "absolute block z-10 bottom-full left-full";
+            break;
+        case "Top start":
+            placement = "absolute block z-10 bottom-full left-0";
+            break;
+        default:
+            placement = "absolute block z-10 bottom-full left-1/2 translate-x-[-50%]";
+            break;
+    }
+    return placement;
+};
+var getVariantMessagePlacement = function (variant) {
+    var placement;
+    switch (variant) {
+        case "Bottom":
+            placement = "mt-3 ";
+            break;
+        case "Left":
+            placement = "mr-3";
+            break;
+        case "Right":
+            placement = "ml-3";
+            break;
+        case "Top":
+            placement = "mb-3";
+            break;
+        case "Top end":
+            placement = "mb-3 -ml-4";
+            break;
+        case "Top start":
+            placement = "mb-3 -ml-4";
+            break;
+        default:
+            placement = "mb-3";
+            break;
+    }
+    return placement;
+};
+var getVariantArrowPlacement = function (variant) {
+    var placement;
+    switch (variant) {
+        case "Bottom":
+            placement = "top-2 left-1/2 translate-x-[-50%]";
+            break;
+        case "Left":
+            placement = "right-2 top-1/2 translate-y-[-50%]";
+            break;
+        case "Right":
+            placement = "left-2 top-1/2 translate-y-[-50%]";
+            break;
+        case "Top":
+            placement = "bottom-2 left-1/2 translate-x-[-50%]";
+            break;
+        case "Top start":
+            placement = "bottom-2 -left-1.5";
+            break;
+        case "Top end":
+            placement = "bottom-2 -left-1.5";
+            break;
+        default:
+            placement = "hidden";
+            break;
+    }
+    return placement;
+};
+var getTheme = function (theme) {
+    var t;
+    switch (theme) {
+        case "dark":
+            t = "text-White bg-Gray-900";
+            break;
+        case "light":
+            t = "bg-White text:Gray-700";
+            break;
+        default:
+            t = "bg-White text:Gray-700";
+            break;
+    }
+    return t;
+};
+var Tooltip = function (props) {
+    var _a = useState(false), active = _a[0], setActive = _a[1];
+    var _b = props || {}, _c = _b.variant, variant = _c === void 0 ? "Bottom" : _c, children = _b.children, _d = _b.theme, theme = _d === void 0 ? "dark" : _d, text = _b.text, supportingText = _b.supportingText;
+    return (_jsxs("div", __assign({ className: "relative inline-block", onMouseEnter: function () { return setActive(true); }, onMouseLeave: function () { return setActive(false); } }, { children: [children, _jsxs("div", __assign({ className: "w-max text-left max-w-xs ".concat(getVariantPlacement(variant)) }, { children: [
+                    // using short circuit operator to show the tooltip //{`${getVariantMessagePlacement(variant)}`}
+                    active && (text || supportingText) && (_jsxs("div", __assign({ className: "px-3 py-2 shadow-lg rounded-lg ".concat(getTheme(theme), " ").concat(getVariantMessagePlacement(variant)) }, { children: [_jsx(Typography, __assign({ variant: "Medium", type: "Text xs" }, { children: text })), Boolean(supportingText) &&
+                                _jsx(Typography, __assign({ variant: "Regular", type: "Text xs" }, { children: supportingText }))] }))), 
+                    // using short circuit operator to show the tooltip arrow
+                    active && variant && (text || supportingText) && (_jsx("div", { className: "absolute w-3 h-3 rotate-45 ".concat(getTheme(theme), " ").concat(getVariantArrowPlacement(variant)) }))] }))] })));
+};
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,250 @@
+import { FieldProps } from "formik";
+import { ReactNode } from "react";
+export interface InputFieldProps extends Partial<FieldProps> {
+    label?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    start_icon?: string;
+    end_icon?: string;
+    hint_text?: string;
+    hint_text_icon?: string;
+    char_count?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    onChange?: (val: string) => void;
+}
+export interface InputFieldSplitProps extends Partial<FieldProps> {
+    label?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    start_icon?: string;
+    end_icon?: string;
+    fieldNames?: Array<string>;
+    hint_text?: string;
+    hint_text_icon?: string;
+    char_count?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    onChange?: (val: {
+        [key: string]: string;
+    }) => void;
+}
+declare type otpSizeType = "lg" | "md" | "sm";
+export interface OtpFieldProps extends Partial<FieldProps> {
+    label?: string;
+    hint_text?: string;
+    hint_text_icon?: string;
+    disabled?: boolean;
+    size?: otpSizeType;
+    digits?: number;
+}
+export interface TextAreaFieldProps extends Partial<FieldProps> {
+    label?: string;
+    hint_text?: string;
+    hint_text_icon?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare type badgesizeType = "sm" | "md" | "lg";
+declare type badgeiconType = "Left" | "Right" | "Only";
+declare type badgecolourType = "Gray" | "Primary" | "Error" | "Warning" | "Success" | "BlueGray" | "Default" | "Blue" | "Indigo" | "Purple" | "Pink" | "Rose" | "Orange";
+declare type iconFileType = "hx_close" | "avatar";
+export interface BadgeType {
+    colour: badgecolourType;
+    size: badgesizeType;
+    icon?: badgeiconType;
+    iconFile?: iconFileType;
+    textField: string;
+    onClick?: () => void;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+}
+declare type typographyVariantType = "Regular" | "Medium" | "Semibold" | "Bold";
+declare type typographyTextType = "Display 2xl" | "Display xl" | "Display lg" | "Display md" | "Display sm" | "Display xs" | "Text xl" | "Text lg" | "Text md" | "Text sm" | "Text xs";
+export interface TypographyProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    variant: typographyVariantType;
+    type: typographyTextType;
+}
+declare type progressBarLabelType = "Right" | "Bottom" | "None" | "Top floating" | "Bottom floating";
+export interface ProgressBarProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    label?: progressBarLabelType;
+    progress: number;
+}
+declare type progressCircleSizeType = "xxs" | "xs" | "sm" | "md" | "lg";
+declare type progressCircleShapeType = "Half circle" | "Circle";
+export interface ProgressCircleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    size?: progressCircleSizeType;
+    shape?: progressCircleShapeType;
+    label?: string;
+    spinnerMode?: boolean;
+    progress: number;
+}
+declare type hierarchyType = "Primary" | "Secondary" | "Secondary-Grey" | "Tertiary" | "Tertiary-Grey" | "Link-Colour" | "Link-Grey";
+declare type buttonSizeType = "sm" | "md" | "lg" | "xl" | "2xl";
+declare type iconType = "No" | "Left" | "Right" | "Only";
+export interface ButtonProps {
+    hierarchy: hierarchyType;
+    size: buttonSizeType;
+    icon?: iconType;
+    iconFile?: string;
+    textField: string;
+    disabled: boolean;
+    onClick?: () => void;
+}
+export declare type checkboxSizeType = "sm" | "md";
+export interface CheckboxProps {
+    size?: checkboxSizeType;
+    text: string;
+    secondaryText?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+declare type ButtonGroupOptionType = {
+    value?: string;
+    label?: string;
+    start_icon?: string;
+    end_icon?: string;
+};
+export interface ButtonGroupsProps extends Partial<FieldProps> {
+    options: Array<ButtonGroupOptionType>;
+    disabled: boolean;
+}
+declare type tooltipPosition = "Top" | "Top end" | "Top start" | "Bottom" | "Left" | "Right";
+declare type toolTipTheme = "dark" | "light";
+export interface TooltipProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    variant?: tooltipPosition;
+    text?: string;
+    theme?: toolTipTheme;
+    supportingText?: string;
+    children: ReactNode;
+}
+declare type statusIcon = "online" | "company" | "offline" | "none";
+declare type AvatarSize = "Display xs" | "Text xl" | "Text lg" | "Text md" | "Text sm" | "Text xs" | "Text xxs";
+declare type AvatarShape = "rounded" | "rounded-md" | "rounded-lg" | "rounded-full";
+export interface AvatarProps {
+    shape?: AvatarShape;
+    name?: string;
+    url?: string;
+    size?: AvatarSize;
+    placeholder?: boolean;
+    text?: boolean;
+    statusIcon?: statusIcon;
+    CompanyLogo?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}
+declare type AvatarGroupSize = "Text md" | "Text sm" | "Text xs";
+export interface AvatarGroupProps {
+    url?: string;
+    size?: AvatarGroupSize;
+    addUser?: boolean;
+    moreUser?: boolean;
+}
+export interface DropdownItemsProps {
+    label?: string;
+    start_icon?: string;
+    end_icon?: string;
+    value?: any;
+    active?: boolean;
+    disabled?: boolean;
+    onSelect?: (value: any) => void;
+}
+export interface DropdownFieldProps extends Partial<FieldProps> {
+    label?: string;
+    end_icon?: string;
+    hint_text?: string;
+    hint_text_icon?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    empty_text?: string;
+    options?: Array<DropdownItemsProps>;
+}
+export interface CardType {
+    title: string;
+}
+declare type CollapseDirection = "up" | "down" | "left" | "right";
+export interface CollapsibleCardProps {
+    direction?: CollapseDirection;
+    label?: string;
+    children?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    openIcon?: string;
+    closeIcon?: string;
+    width?: string;
+    height?: string;
+    icon?: iconType;
+    disabled?: boolean;
+}
+export declare type RadioBtnSizeType = "sm" | "md";
+export declare type RadioBtnType = "checkmark" | "dot";
+export interface RadioBtnProps {
+    size: RadioBtnSizeType;
+    disabled: boolean;
+    iconfile: RadioBtnType;
+    text: string;
+    secondaryText: string;
+    id: any;
+}
+export declare type ToggleSwitchThemeType = "Dark" | "Light";
+export declare type ToggleSwitchSizeType = "sm" | "md";
+export interface ToggleSwitchProps {
+    theme: ToggleSwitchThemeType;
+    size: ToggleSwitchSizeType;
+    text: string;
+    secondaryText: string;
+    disabled: boolean;
+    id: any;
+    onClick?: () => void;
+    isToggled: boolean;
+}
+declare type CheckboxGroupSize = "sm" | "md";
+declare type CheckboxGroupType = "Icon Simple" | "Icon Card" | "Avatar" | "Payment icon" | "Radio button" | "Checkbox";
+export interface CheckboxGroupItemProps {
+    variant?: CheckboxGroupType;
+    size?: CheckboxGroupSize;
+    plan_name?: string;
+    monthly_cost?: string;
+    icon_name?: string;
+    plan_details?: string;
+    isActive?: boolean;
+    disabled?: boolean;
+    limited?: boolean;
+    onClick?: () => void;
+}
+export interface CheckboxGroupProps extends Partial<FieldProps> {
+    variant?: CheckboxGroupType;
+    size?: CheckboxGroupSize;
+    options: Array<CheckboxGroupItemProps>;
+}
+export declare type SliderType = "0" | "25" | "50" | "75" | "100";
+export declare type SliderProgressType = "sm" | "md";
+export declare type SliderLabelType = "topFloating" | "bottomFloating" | "labelBottom" | "noLabel";
+export interface SliderProps {
+    initialMin: SliderType;
+    initialMax: SliderType;
+    progress: SliderProgressType;
+    label: SliderLabelType;
+}
+declare type badgeGroupthemeType = "Light" | "Medium" | "Dark";
+declare type badgeGroupType = "Leading" | "Trailing";
+declare type badgeGroupsizeType = "md" | "lg";
+declare type BadgeGroupiconfileType = "hx_arrow-right";
+declare type badgeGroupcolourType = "Gray" | "Primary" | "Error" | "Warning" | "Success";
+export interface BadgeGroupProps {
+    colour: badgeGroupcolourType;
+    theme: badgeGroupthemeType;
+    groupType: badgeGroupType;
+    size: badgeGroupsizeType;
+    iconfile?: BadgeGroupiconfileType;
+    text: string;
+    textMessage: string;
+    onClick?: () => void;
+    onRightIconClick?: () => void;
+}
+export declare type messageToastType = "Error" | "Success";
+export interface messageToastProps {
+    color: messageToastType;
+    onClick?: () => void;
+    heading: string;
+    subText: string;
+}
+export {};

package/dist/esm/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/types.tsx"],"names":[],"mappings":""}

package/dist/esm/components/typography/Typography.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TypographyProps } from "../types";
+declare const Typography: ({ variant, type, className, children, ...textProps }: TypographyProps) => JSX.Element;
+export default Typography;

package/dist/esm/components/typography/Typography.js

@@ -0,0 +1,70 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+var getVariantClassName = function (variant) {
+    var className;
+    switch (variant) {
+        case "Regular":
+            className = "font-inter-0";
+            break;
+        case "Medium":
+            className = "font-inter-1";
+            break;
+        case "Semibold":
+            className = "font-inter-2";
+            break;
+        case "Bold":
+            className = "font-inter-3";
+            break;
+        default:
+            className = "";
+            break;
+    }
+    return className;
+};
+var getTypeClassName = function (type) {
+    var className;
+    switch (type) {
+        case "Display 2xl":
+            className = "font-inter leading-0 text-10 tracking-0";
+            break;
+        case "Display xl":
+            className = "font-inter leading-1 text-9 tracking-0";
+            break;
+        case "Display lg":
+            className = "font-inter leading-2 text-8 tracking-0";
+            break;
+        case "Display md":
+            className = "font-inter leading-3 text-7 tracking-0";
+            break;
+        case "Display sm":
+            className = "font-inter leading-4 text-6 tracking-1";
+            break;
+        case "Display xs":
+            className = "font-inter leading-5 text-5 tracking-1";
+            break;
+        case "Text xl":
+            className = "font-inter leading-7 text-4 tracking-1";
+            break;
+        case "Text lg":
+            className = "font-inter leading-8 text-3 tracking-1";
+            break;
+        case "Text md":
+            className = "font-inter leading-9 text-2 tracking-1";
+            break;
+        case "Text sm":
+            className = "font-inter leading-10 text-1 tracking-1";
+            break;
+        case "Text xs":
+            className = "font-inter  leading-11 text-0 tracking-1";
+            break;
+        default:
+            className = "font-inter";
+    }
+    return className;
+};
+var Typography = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "Regular" : _b, _c = _a.type, type = _c === void 0 ? "Text md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, children = _a.children, textProps = __rest(_a, ["variant", "type", "className", "children"]);
+    return (_jsx("div", __assign({}, textProps, { className: "".concat(getTypeClassName(type), " ").concat(getVariantClassName(variant), " ").concat(className) }, { children: children })));
+};
+export default Typography;
+//# sourceMappingURL=Typography.js.map

package/dist/esm/components/typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/components/typography/Typography.tsx"],"names":[],"mappings":";;AAEA,IAAM,mBAAmB,GAAG,UAAC,OAAe;IAC1C,IAAI,SAAiB,CAAC;IACtB,QAAQ,OAAO,EAAE;QACf,KAAK,SAAS;YACZ,SAAS,GAAG,cAAc,CAAC;YAC3B,MAAM;QACR,KAAK,QAAQ;YACX,SAAS,GAAG,cAAc,CAAC;YAC3B,MAAM;QACR,KAAK,UAAU;YACb,SAAS,GAAG,cAAc,CAAC;YAC3B,MAAM;QACR,KAAK,MAAM;YACT,SAAS,GAAG,cAAc,CAAC;YAC3B,MAAM;QACR;YACE,SAAS,GAAG,EAAE,CAAC;YACf,MAAM;KACT;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG,UAAC,IAAY;IACpC,IAAI,SAAiB,CAAC;IACtB,QAAQ,IAAI,EAAE;QACZ,KAAK,aAAa;YAChB,SAAS,GAAG,yCAAyC,CAAC;YACtD,MAAM;QACR,KAAK,YAAY;YACf,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,YAAY;YACf,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,YAAY;YACf,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,YAAY;YACf,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,YAAY;YACf,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,wCAAwC,CAAC;YACrD,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,yCAAyC,CAAC;YACtD,MAAM;QACR,KAAK,SAAS;YACZ,SAAS,GAAG,0CAA0C,CAAC;YACvD,MAAM;QACR;YACE,SAAS,GAAG,YAAY,CAAC;KAC5B;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,EAMF;IALhB,IAAA,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,cAAA,EACL,SAAS,cALM,4CAMnB,CADa;IAEZ,OAAO,CACL,yBACM,SAAS,IACb,SAAS,EAAE,UAAG,gBAAgB,CAAC,IAAI,CAAC,cAAI,mBAAmB,CACzD,OAAO,CACR,cAAI,SAAS,CAAE,gBAEf,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "hplx-react-elements-dev",
+  "description": "Healthplix UI Element",
+  "author": "healthplix-tech",
+  "keywords": [
+    "react",
+    "elements",
+    "ui",
+    "frontend",
+    "healthplix"
+  ],
+  "version": "1.0.0",
+  "main": "dist/esm/components/index.js",
+  "module": "dist/esm/components/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://hplx-admin@bitbucket.org/healthplixrepos/ui-elements.git"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.46",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "formik": "^2.2.9",
+    "hplx-ui-icons": "^2.2.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.7.4",
+    "web-vitals": "^2.1.4",
+    "webfontloader": "^1.6.28",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build:tailwind": "tailwindcss build -i src/tailwind.css -o src/themes/tailwind.output.css",
+    "build": "rm -rf dist && NODE_ENV=production npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/webfontloader": "^1.6.34",
+    "autoprefixer": "^10.4.7",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.1",
+    "prop-types": "^15.8.1",
+    "tailwindcss": "^3.1.6",
+    "webpack": "^5.74.0"
+  }
+}