bromcom-ui 2.7.38-rc.1 → 2.7.38-rc.10

package/dist/types/components/atoms/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
 export declare class BcmChip implements ComponentInterface {
   el: HTMLElement;
   _id: string;
@@ -8,6 +8,9 @@ export declare class BcmChip implements ComponentInterface {
   icon: any;
   disabled: false;
   color: any;
+  bcmChipDismiss: EventEmitter;
+  bcmChipSelect: EventEmitter;
+  bcmChipAddable: EventEmitter;
   setColor(): {
     '--bcm-chip-color': string;
     '--bcm-chip-color-hover': string;
@@ -20,5 +23,7 @@ export declare class BcmChip implements ComponentInterface {
     '--bcm-chip-background-color-active': string;
     '--bcm-chip-background-color-disabled': string;
   };
+  private handleDismiss;
+  private handleAddable;
   render(): any;
 }

package/dist/types/components/molecules/color-input/color-input.d.ts

@@ -0,0 +1,20 @@
+import { ComponentInterface } from "../../../stencil-public-runtime";
+export declare class BcmColorInput implements ComponentInterface {
+  el: HTMLElement;
+  _id: string;
+  label: string;
+  placeholder: string;
+  value: string;
+  required: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  fullWidth: boolean;
+  handleChange(color: any): void;
+  getInputElement(): HTMLBcmInputElement;
+  getPickerElement(): HTMLBcmColorfulElement;
+  handleInputChanged(e: any): void;
+  eyeDropper(): void;
+  isEyeDropperSupported(): boolean;
+  render(): any;
+  [memberName: string]: any;
+}

package/dist/types/components/molecules/colorful/colorful.d.ts

@@ -0,0 +1,8 @@
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+export declare class BcmColorful implements ComponentInterface {
+  el: HTMLElement;
+  color: any;
+  bcmChange: EventEmitter;
+  handleChange(e: any): void;
+  componentDidRender(): void;
+}

package/dist/types/components/molecules/input/input.d.ts

@@ -78,5 +78,8 @@ export declare class BcmInput implements ComponentInterface {
   checkValid(type: any): boolean;
   whatchHasFocus(): void;
   fixToNumber(val: any): any;
+  eyeDropper(): void;
+  isEyeDropperSupported(): boolean;
+  toggleLinked(): void;
   render(): any;
 }

package/dist/types/components/molecules/linked/linked.d.ts

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { PlacementTypes, TrigglerTypes } from "../../../models";
 export declare class BcmLinked implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/popover/popover.d.ts

@@ -1,6 +1,6 @@
-import { Popover } from '../../../helper';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { Popover } from "../../../helper";
+import { PlacementTypes, TrigglerTypes } from "../../../models";
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmPopover implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmSkeleton implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/states/search.states.d.ts

@@ -1,4 +1,4 @@
-import BcmMoleculesState from '../../../models/states/molecules/bcm-molecules-state';
+import BcmMoleculesState from "../../../models/states/molecules/bcm-molecules-state";
 declare const _default: {
   setValue: (val: any) => void;
   removeValue: (_id: any) => void;

package/dist/types/components/molecules/stepper/step.d.ts

@@ -17,7 +17,7 @@ export declare class BcmStep implements ComponentInterface {
   dataIsLoaded: EventEmitter;
   bcmChangeHidden: EventEmitter;
   componentDidLoad(): void;
-  getStepper(): HTMLBcmStepperElement;
+  getStepper(): any;
   activeChanged(): void;
   statusChange(): void;
   hiddenChange(newValue: any, oldValue: any): void;

package/dist/types/components/molecules/stepper/stepper.d.ts

@@ -9,6 +9,7 @@ export declare class BcmStepper implements ComponentInterface {
   size: SizeTypes;
   icon: boolean;
   active: number;
+  stepperId: string;
   data: any[];
   tick: {};
   bcmStepChange: EventEmitter;

package/dist/types/components/molecules/tab-group/tab-group.d.ts

@@ -1,5 +1,5 @@
-import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
-import { SizeTypes } from '../../../models/bcm-types';
+import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
+import { SizeTypes } from "../../../models/bcm-types";
 export declare class BcmTabGroup implements ComponentInterface {
   el: HTMLElement;
   _id: string;

package/dist/types/components/molecules/tooltip/tooltip.d.ts

@@ -1,6 +1,6 @@
-import { Tooltip } from '../../../helper';
-import { PlacementTypes, TrigglerTypes } from '../../../models';
-import { ComponentInterface } from '../../../stencil-public-runtime';
+import { Tooltip } from "../../../helper";
+import { PlacementTypes, SizeTypes, TrigglerTypes } from "../../../models";
+import { ComponentInterface } from "../../../stencil-public-runtime";
 export declare class BcmTooltip implements ComponentInterface {
   el: HTMLElement;
   _id: string;
@@ -9,6 +9,7 @@ export declare class BcmTooltip implements ComponentInterface {
   trigger: TrigglerTypes;
   open: boolean;
   color: string;
+  size: SizeTypes;
   tooltip: Tooltip;
   componentDidLoad(): void;
   componentDidRender(): void;

package/dist/types/components/organism/date-picker/date-picker.d.ts

@@ -24,6 +24,7 @@ export declare class BcmDatePicker implements ComponentInterface {
   _internal_id: string;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   stateStartDate: any;
   stateEndDate: any;
   handleStartDateChange(): void;

package/dist/types/components/organism/datetime-picker/datetime-picker.d.ts

@@ -50,6 +50,7 @@ export declare class BcmDatetimePicker implements ComponentInterface {
   alignment: any;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   /**
    * Component States
    */

package/dist/types/components/organism/list/list.d.ts

@@ -90,6 +90,7 @@ export declare class BcmList implements ComponentInterface {
   watchReturnFilterData(newVal: any): void;
   handleOtherSelected(newValue: any): void;
   handleOpen(): Promise<void>;
+  listScrollToTop(): void;
   dataChanged(newValue: any, oldValue: any): Promise<void>;
   isIntersecting(e: CustomEvent): void;
   handleSlotItems(e: CustomEvent): void;

package/dist/types/components/organism/time-picker/time-picker.d.ts

@@ -19,6 +19,7 @@ export declare class BcmTimePicker {
   alignment: any;
   placement: PlacementTypes;
   linkedComponent: string;
+  clearable: boolean;
   /**
    * @ComponentMethod
    */

package/dist/types/components.d.ts

@@ -210,6 +210,19 @@ export namespace Components {
         "multiple": boolean;
         "open": boolean;
     }
+    interface BcmColorInput {
+        "_id": string;
+        "disabled": boolean;
+        "fullWidth": boolean;
+        "label": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "value": string;
+    }
+    interface BcmColorful {
+        "color": any;
+    }
     interface BcmColorpicker {
         /**
           * Component Properties
@@ -238,6 +251,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         "date": Date | string;
         "disabled": boolean;
         "disabledDates": any;
@@ -295,6 +309,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         /**
           * @desc
          */
@@ -1043,6 +1058,7 @@ export namespace Components {
         "reset": () => Promise<any>;
         "setActive": (index: number) => Promise<void>;
         "size": SizeTypes1;
+        "stepperId": string;
         "tick": {};
     }
     interface BcmSwitch {
@@ -1202,6 +1218,7 @@ export namespace Components {
         "caption": string;
         "captionError": string;
         "captionType": 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable": boolean;
         "disabled": boolean;
         "fullWidth": boolean;
         "get": () => Promise<any>;
@@ -1271,6 +1288,7 @@ export namespace Components {
         "open": boolean;
         "placement": PlacementTypes1;
         "show": () => Promise<void>;
+        "size": SizeTypes;
         "toggle": () => Promise<void>;
         "trigger": TrigglerTypes;
     }
@@ -1396,10 +1414,18 @@ export interface BcmCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmCheckboxGroupElement;
 }
+export interface BcmChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmChipElement;
+}
 export interface BcmCollapseCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmCollapseElement;
 }
+export interface BcmColorfulCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmColorfulElement;
+}
 export interface BcmColorpickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmColorpickerElement;
@@ -1651,6 +1677,18 @@ declare global {
         prototype: HTMLBcmCollapseGroupElement;
         new (): HTMLBcmCollapseGroupElement;
     };
+    interface HTMLBcmColorInputElement extends Components.BcmColorInput, HTMLStencilElement {
+    }
+    var HTMLBcmColorInputElement: {
+        prototype: HTMLBcmColorInputElement;
+        new (): HTMLBcmColorInputElement;
+    };
+    interface HTMLBcmColorfulElement extends Components.BcmColorful, HTMLStencilElement {
+    }
+    var HTMLBcmColorfulElement: {
+        prototype: HTMLBcmColorfulElement;
+        new (): HTMLBcmColorfulElement;
+    };
     interface HTMLBcmColorpickerElement extends Components.BcmColorpicker, HTMLStencilElement {
     }
     var HTMLBcmColorpickerElement: {
@@ -2071,6 +2109,8 @@ declare global {
         "bcm-chip": HTMLBcmChipElement;
         "bcm-collapse": HTMLBcmCollapseElement;
         "bcm-collapse-group": HTMLBcmCollapseGroupElement;
+        "bcm-color-input": HTMLBcmColorInputElement;
+        "bcm-colorful": HTMLBcmColorfulElement;
         "bcm-colorpicker": HTMLBcmColorpickerElement;
         "bcm-date-picker": HTMLBcmDatePickerElement;
         "bcm-datetime-picker": HTMLBcmDatetimePickerElement;
@@ -2306,6 +2346,9 @@ declare namespace LocalJSX {
         "color"?: any;
         "disabled"?: false;
         "icon"?: any;
+        "onBcm-chip-addable"?: (event: BcmChipCustomEvent<any>) => void;
+        "onBcm-chip-dismiss"?: (event: BcmChipCustomEvent<any>) => void;
+        "onBcm-chip-select"?: (event: BcmChipCustomEvent<any>) => void;
         "size"?: 'small' | 'medium' | 'large';
         "type"?: 'default' | 'dismissable' | 'addable' | 'checkable';
     }
@@ -2323,6 +2366,20 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "open"?: boolean;
     }
+    interface BcmColorInput {
+        "_id"?: string;
+        "disabled"?: boolean;
+        "fullWidth"?: boolean;
+        "label"?: string;
+        "placeholder"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface BcmColorful {
+        "color"?: any;
+        "onBcmChange"?: (event: BcmColorfulCustomEvent<any>) => void;
+    }
     interface BcmColorpicker {
         /**
           * Component Properties
@@ -2353,6 +2410,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "date"?: Date | string;
         "disabled"?: boolean;
         "disabledDates"?: any;
@@ -2379,6 +2437,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "date"?: string | Date;
         "disabled"?: boolean;
         "disabledDates"?: any;
@@ -3053,6 +3112,7 @@ declare namespace LocalJSX {
         "linear"?: boolean;
         "onBcm-step-change"?: (event: BcmStepperCustomEvent<any>) => void;
         "size"?: SizeTypes1;
+        "stepperId"?: string;
         "tick"?: {};
     }
     interface BcmSwitch {
@@ -3206,6 +3266,7 @@ declare namespace LocalJSX {
         "caption"?: string;
         "captionError"?: string;
         "captionType"?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+        "clearable"?: boolean;
         "disabled"?: boolean;
         "fullWidth"?: boolean;
         "hidden"?: boolean;
@@ -3244,6 +3305,7 @@ declare namespace LocalJSX {
         "message"?: string;
         "open"?: boolean;
         "placement"?: PlacementTypes1;
+        "size"?: SizeTypes;
         "trigger"?: TrigglerTypes;
     }
     interface BcmTreeview {
@@ -3369,6 +3431,8 @@ declare namespace LocalJSX {
         "bcm-chip": BcmChip;
         "bcm-collapse": BcmCollapse;
         "bcm-collapse-group": BcmCollapseGroup;
+        "bcm-color-input": BcmColorInput;
+        "bcm-colorful": BcmColorful;
         "bcm-colorpicker": BcmColorpicker;
         "bcm-date-picker": BcmDatePicker;
         "bcm-datetime-picker": BcmDatetimePicker;
@@ -3459,6 +3523,8 @@ declare module "@stencil/core" {
             "bcm-chip": LocalJSX.BcmChip & JSXBase.HTMLAttributes<HTMLBcmChipElement>;
             "bcm-collapse": LocalJSX.BcmCollapse & JSXBase.HTMLAttributes<HTMLBcmCollapseElement>;
             "bcm-collapse-group": LocalJSX.BcmCollapseGroup & JSXBase.HTMLAttributes<HTMLBcmCollapseGroupElement>;
+            "bcm-color-input": LocalJSX.BcmColorInput & JSXBase.HTMLAttributes<HTMLBcmColorInputElement>;
+            "bcm-colorful": LocalJSX.BcmColorful & JSXBase.HTMLAttributes<HTMLBcmColorfulElement>;
             "bcm-colorpicker": LocalJSX.BcmColorpicker & JSXBase.HTMLAttributes<HTMLBcmColorpickerElement>;
             "bcm-date-picker": LocalJSX.BcmDatePicker & JSXBase.HTMLAttributes<HTMLBcmDatePickerElement>;
             "bcm-datetime-picker": LocalJSX.BcmDatetimePicker & JSXBase.HTMLAttributes<HTMLBcmDatetimePickerElement>;

package/dist/types/helper/tooltip-helper.d.ts

@@ -6,15 +6,18 @@ export declare class Tooltip {
   color: string;
   el: HTMLElement;
   trigger: string;
-  constructor({ message, targetId, placement, color, trigger }: {
+  size: string;
+  constructor({ message, targetId, placement, color, trigger, size }: {
     message: any;
     targetId: any;
     placement?: string;
     color?: string;
     trigger?: string;
+    size?: string;
   });
   private bgColor;
   private target;
+  private sizeClass;
   private init;
   update: () => void;
   listener: () => void;

package/dist/types/models/bcm.d.ts

@@ -321,7 +321,8 @@ export declare namespace Bcm {
     url = "url",
     search = "search",
     tel = "tel",
-    hidden = "hidden"
+    hidden = "hidden",
+    color = "color"
   }
   enum KeyCode {
     backspace = 8,

package/dist/types/templates/input-template.d.ts

@@ -1,7 +1,7 @@
-import { FunctionalComponent } from '../stencil-public-runtime';
-import Bcm from '../models/bcm';
+import { FunctionalComponent } from "../stencil-public-runtime";
+import Bcm from "../models/bcm";
 interface InputTemplateProps extends Bcm.InputClickEvent {
-  elementType?: 'textarea' | 'input';
+  elementType?: "textarea" | "input";
   rows?: any;
   id?: any;
   internalId?: any;
@@ -29,6 +29,8 @@ interface InputTemplateProps extends Bcm.InputClickEvent {
   changePasswordVisibility?: () => void;
   handleClear?: (e: MouseEvent) => void;
   steps?: (type: any) => void;
+  isEyeDropperSupported?: () => boolean;
+  eyeDropper?: () => void;
 }
 export declare const InputTemplate: FunctionalComponent<InputTemplateProps>;
 export {};

package/dist/types/templates/step-template.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from '../stencil-public-runtime';
 interface StepperHeaderTemplateProps {
-  title: string;
+  _title: string;
   description: string;
   status: 'default' | 'success' | 'warning' | 'error';
   statusIcon: boolean;

package/package.json

@@ -1,72 +1,108 @@
 {
-    "name": "bromcom-ui",
-    "version": "2.7.38-rc.1",
-    "description": "Stencil Component Starter",
-    "main": "dist/index.cjs.js",
-    "module": "dist/index.js",
-    "es2015": "dist/esm/index.mjs",
-    "es2017": "dist/esm/index.mjs",
-    "collection": "dist/collection/collection-manifest.json",
-    "collection:main": "dist/collection/index.js",
-    "types": "dist/types/components.d.ts",
-    "unpkg": "dist/bromcom-ui/bromcom-ui.js",
-    "files": [
-        "dist/",
-        "loader/"
-    ],
-    "scripts": {
-        "start": "npm-run-all clean:www -p dev:*",
-        "clean:www": "rm -rf www",
-        "dev:stencil": "stencil build --dev --watch --serve",
-        "dev:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --watch --minify",
-        "build": "run-s clean:dist clean:loader build:tailwind build:stencil build:aliases",
-        "clean:dist": "rm -rf dist",
-        "clean:loader": "rm -rf loader",
-        "build:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --minify",
-        "build:stencil": "stencil build --prod",
-        "build:aliases": "tsc-alias -p tsconfig.aliases.json",
-        "generate": "stencil generate",
-        "distRemove": "rm -rf ./dist/cjs && rm -rf ./dist/esm && rm -rf ./dist/types && rm -rf ./dist/collection && rm -r ./dist/index.cjs.js && rm -r ./dist/index.js",
-        "pre-version": "npm run build && npm version prerelease --preid=rc && npm run build",
-        "ds-version": "npm run build && npm version patch && npm run build"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@floating-ui/dom": "^1.0.1",
-        "@stencil/core": "^2.17.1",
-        "@stencil/sass": "^1.3.2",
-        "@stencil/store": "^1.5.0",
-        "@types/node": "^18.7.1",
-        "classnames": "^2.2.6",
-        "npm-run-all": "^4.1.5",
-        "rollup-plugin-dotenv": "^0.3.0",
-        "slugify": "^1.6.5",
-        "snq": "^1.0.3",
-        "tailwindcss": "^3.1.8",
-        "tsc-alias": "^1.7.0"
-    },
-    "__comment__": [
-        {
-            "@babel/core": "^7.12.3",
-            "@babel/plugin-syntax-jsx": "^7.12.1",
-            "@babel/plugin-transform-react-jsx": "^7.12.5",
-            "babel-loader": "^8.2.0",
-            "cpy-cli": "^3.1.1",
-            "fs-extra": "^9.0.1",
-            "glob": "^7.1.6",
-            "gulp": "^4.0.2",
-            "gulp-autoprefixer": "^8.0.0",
-            "gulp-concat": "^2.6.1",
-            "gulp-minify-css": "^1.2.4",
-            "gulp-sass": "^5.1.0",
-            "sass": "^1.49.8",
-            "@storybook/addon-actions": "^6.0.28",
-            "@storybook/addon-backgrounds": "^6.1.9",
-            "@storybook/addon-controls": "^6.0.28",
-            "@storybook/addon-docs": "^6.5.9",
-            "@storybook/addon-notes": "^5.3.21",
-            "@storybook/addon-viewport": "^6.1.9",
-            "@storybook/html": "^6.0.28"
-        }
-    ]
+  "name": "bromcom-ui",
+  "version": "2.7.38-rc.10",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "types": "dist/types/components.d.ts",
+  "unpkg": "dist/bromcom-ui/bromcom-ui.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "start": "npm-run-all clean:www -p dev:*",
+    "clean:www": "rm -rf www",
+    "dev:stencil": "stencil build --dev --watch --serve",
+    "dev:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --watch --minify",
+    "build": "run-s clean:dist clean:loader build:tailwind build:stencil build:aliases",
+    "clean:dist": "rm -rf dist",
+    "clean:loader": "rm -rf loader",
+    "build:tailwind": "tailwindcss -i ./src/directives.css -o ./src/global/tailwind.css --minify",
+    "build:stencil": "stencil build --prod",
+    "build:aliases": "tsc-alias -p tsconfig.aliases.json",
+    "generate": "stencil generate",
+    "distRemove": "rm -rf ./dist/cjs && rm -rf ./dist/esm && rm -rf ./dist/types && rm -rf ./dist/collection && rm -r ./dist/index.cjs.js && rm -r ./dist/index.js",
+    "pre-version": "npm run build && npm version prerelease --preid=rc && npm run build",
+    "ds-version": "npm run build && npm version patch && npm run build",
+    "storybook": "start-storybook -p 8000",
+    "build:storybook": "build-storybook",
+    "generate:storybook": "npm run build && npm run build:storybook"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.5",
+    "@etchteam/storybook-addon-status": "^4.2.2",
+    "@floating-ui/dom": "^1.0.1",
+    "@stencil/core": "^2.17.1",
+    "@stencil/sass": "^1.3.2",
+    "@stencil/store": "^1.5.0",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-notes": "^5.3.21",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/html": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/node": "^18.7.1",
+    "babel-loader": "^8.2.0",
+    "classnames": "^2.2.6",
+    "cpy-cli": "^4.2.0",
+    "fs-extra": "^11.1.0",
+    "jsx-dom": "^6.4.23",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.2",
+    "react": "^16.14.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^16.14.0",
+    "rollup-plugin-dotenv": "^0.3.0",
+    "slugify": "^1.6.5",
+    "snq": "^1.0.3",
+    "storybook-fetch-addon": "^1.2.1",
+    "tailwindcss": "^3.1.8",
+    "ts-dedent": "^2.2.0",
+    "tsc-alias": "^1.7.0"
+  },
+  "__comment__": [
+    {
+      "@babel/core": "^7.12.3",
+      "@babel/plugin-syntax-jsx": "^7.12.1",
+      "@babel/plugin-transform-react-jsx": "^7.12.5",
+      "babel-loader": "^8.2.0",
+      "cpy-cli": "^3.1.1",
+      "fs-extra": "^9.0.1",
+      "glob": "^7.1.6",
+      "gulp": "^4.0.2",
+      "gulp-autoprefixer": "^8.0.0",
+      "gulp-concat": "^2.6.1",
+      "gulp-minify-css": "^1.2.4",
+      "gulp-sass": "^5.1.0",
+      "sass": "^1.49.8",
+      "@storybook/addon-actions": "^6.0.28",
+      "@storybook/addon-backgrounds": "^6.1.9",
+      "@storybook/addon-controls": "^6.0.28",
+      "@storybook/addon-docs": "^6.5.9",
+      "@storybook/addon-notes": "^5.3.21",
+      "@storybook/addon-viewport": "^6.1.9",
+      "@storybook/html": "^6.0.28"
+    }
+  ],
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
+  }
 }