@reapit/elements 4.0.4 → 4.1.0

package/dist/esm/storybook/render-html-markup.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
-type RenderHtmlMarkupProps = {
-    component: string;
-    story: string | string[];
-    label?: string;
-};
-export declare const RenderHtmlMarkup: ({ component, story, label }: RenderHtmlMarkupProps) => React.JSX.Element;
-export {};
+import { Dispatch, FC, SetStateAction } from 'react';
+import { SourceProps } from '@storybook/blocks';
+import { Args, Renderer, StoryContextForLoaders } from '@storybook/types';
+export declare const handleTransform: (setStoryContext: Dispatch<SetStateAction<StoryContextForLoaders<Renderer, Args> | null>>, storyContext: StoryContextForLoaders<Renderer, Args> | null, html: string) => (code: string, context: StoryContextForLoaders<Renderer, Args>) => string;
+export declare const RenderHtmlMarkup: FC<SourceProps>;

package/dist/esm/styles/flexbox.stories.d.ts

@@ -0,0 +1,116 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Flex: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const IsFlexColumn: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexRow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexRowReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexColumn: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexColumnReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexWrap: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexNoWrap: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexWrapReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const Flex1: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAuto: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexInitial: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexGrow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexGrow0: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexShrink: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexShrink0: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyBetween: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyAround: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyEvenly: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/esm/styles/theming.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const BasicExample: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/styles/utilities.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Margin: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Padding: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HeightAndWidth: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const BorderRadiusAndBoxShadow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/index.css

@@ -332,9 +332,9 @@
 .el-icon-size-large{font-size:5rem;}
 .el-icon-size-largest{font-size:8.75rem;}
 .el-icon-menu svg{background:var(--nav-menu-background-dark);}
-.el-icon-new{font-size:1.5rem;}
+.el-icon-new{font-size:1.5rem !important;}
 .el-icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--color-black);}.el-icon svg{width:1em;height:1em;}.el-icon.el-intent-primary{color:var(--intent-primary);}.el-icon.el-intent-neutral{color:var(--intent-neutral);}.el-icon.el-intent-success{color:var(--intent-success);}.el-icon.el-intent-pending{color:var(--intent-pending);}.el-icon.el-intent-warning{color:var(--intent-warning);}.el-icon.el-intent-danger{color:var(--intent-danger);}.el-icon.el-intent-default{color:var(--intent-default);}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL2ljb24vX19zdHlsZXNfXy9pbmRleC50cyJdLCJuYW1lcyI6WyIuZWwtaWNvbi1zaXplLXNtYWxsZXN0IiwiLmVsLWljb24tc2l6ZS1zbWFsbCIsIi5lbC1pY29uLXNpemUtbWVkaXVtIiwiLmVsLWljb24tc2l6ZS1sYXJnZSIsIi5lbC1pY29uLXNpemUtbGFyZ2VzdCIsIi5lbC1pY29uLW1lbnUiLCIuZWwtaWNvbi1uZXciLCIuZWwtaWNvbiJdLCJtYXBwaW5ncyI6IkFBR2tDQTtBQUdIQztBQUdDQztBQUdEQztBQUdFQztBQUdQQztBQUtEQztBQUdIQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9lbGVtZW50cy9lbGVtZW50cy9zcmMvY29tcG9uZW50cy9pY29uL19fc3R5bGVzX18vaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWQgfSBmcm9tICdAbGluYXJpYS9yZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAbGluYXJpYS9jb3JlJztcbmltcG9ydCB7IGVsSW50ZW50UHJpbWFyeSwgZWxJbnRlbnRTdWNjZXNzLCBlbEludGVudERhbmdlciwgZWxJbnRlbnROZXV0cmFsLCBlbEludGVudFBlbmRpbmcsIGVsSW50ZW50V2FybmluZywgZWxJbnRlbnREZWZhdWx0LCB9IGZyb20gJy4uLy4uLy4uL3N0eWxlcy9pbnRlbnQnO1xuZXhwb3J0IGNvbnN0IGVsSWNvblNpemVTbWFsbGVzdCA9IGNzcyBgXG4gIGZvbnQtc2l6ZTogMC43NXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uU2l6ZVNtYWxsID0gY3NzIGBcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtc3ViaGVhZGluZyk7XG5gO1xuZXhwb3J0IGNvbnN0IGVsSWNvblNpemVNZWRpdW0gPSBjc3MgYFxuICBmb250LXNpemU6IDIuNXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uU2l6ZUxhcmdlID0gY3NzIGBcbiAgZm9udC1zaXplOiA1cmVtO1xuYDtcbmV4cG9ydCBjb25zdCBlbEljb25TaXplTGFyZ2VzdCA9IGNzcyBgXG4gIGZvbnQtc2l6ZTogOC43NXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uTWVudSA9IGNzcyBgXG4gIHN2ZyB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmF2LW1lbnUtYmFja2dyb3VuZC1kYXJrKTtcbiAgfVxuYDtcbmV4cG9ydCBjb25zdCBlbEljb25OZXcgPSBjc3MgYFxuICBmb250LXNpemU6IDEuNXJlbTtcbmA7XG5leHBvcnQgY29uc3QgRWxJY29uID0gc3R5bGVkLnNwYW4gYFxuICBkaXNwbGF5OiBmbGV4O1xuICBjb2xvcjogdmFyKC0tY29sb3ItYmxhY2spO1xuXG4gIHN2ZyB7XG4gICAgd2lkdGg6IDFlbTtcbiAgICBoZWlnaHQ6IDFlbTtcbiAgfVxuXG4gICYuJHtlbEludGVudFByaW1hcnl9IHtcbiAgICBjb2xvcjogdmFyKC0taW50ZW50LXByaW1hcnkpO1xuICB9XG5cbiAgJi4ke2VsSW50ZW50TmV1dHJhbH0ge1xuICAgIGNvbG9yOiB2YXIoLS1pbnRlbnQtbmV1dHJhbCk7XG4gIH1cblxuICAmLiR7ZWxJbnRlbnRTdWNjZXNzfSB7XG4gICAgY29sb3I6IHZhcigtLWludGVudC1zdWNjZXNzKTtcbiAgfVxuXG4gICYuJHtlbEludGVudFBlbmRpbmd9IHtcbiAgICBjb2xvcjogdmFyKC0taW50ZW50LXBlbmRpbmcpO1xuICB9XG5cbiAgJi4ke2VsSW50ZW50V2FybmluZ30ge1xuICAgIGNvbG9yOiB2YXIoLS1pbnRlbnQtd2FybmluZyk7XG4gIH1cblxuICAmLiR7ZWxJbnRlbnREYW5nZXJ9IHtcbiAgICBjb2xvcjogdmFyKC0taW50ZW50LWRhbmdlcik7XG4gIH1cblxuICAmLiR7ZWxJbnRlbnREZWZhdWx0fSB7XG4gICAgY29sb3I6IHZhcigtLWludGVudC1kZWZhdWx0KTtcbiAgfVxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWluZGV4LmpzLm1hcCJdfQ==*/
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL2ljb24vX19zdHlsZXNfXy9pbmRleC50cyJdLCJuYW1lcyI6WyIuZWwtaWNvbi1zaXplLXNtYWxsZXN0IiwiLmVsLWljb24tc2l6ZS1zbWFsbCIsIi5lbC1pY29uLXNpemUtbWVkaXVtIiwiLmVsLWljb24tc2l6ZS1sYXJnZSIsIi5lbC1pY29uLXNpemUtbGFyZ2VzdCIsIi5lbC1pY29uLW1lbnUiLCIuZWwtaWNvbi1uZXciLCIuZWwtaWNvbiJdLCJtYXBwaW5ncyI6IkFBR2tDQTtBQUdIQztBQUdDQztBQUdEQztBQUdFQztBQUdQQztBQUtEQztBQUdIQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9lbGVtZW50cy9lbGVtZW50cy9zcmMvY29tcG9uZW50cy9pY29uL19fc3R5bGVzX18vaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWQgfSBmcm9tICdAbGluYXJpYS9yZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAbGluYXJpYS9jb3JlJztcbmltcG9ydCB7IGVsSW50ZW50UHJpbWFyeSwgZWxJbnRlbnRTdWNjZXNzLCBlbEludGVudERhbmdlciwgZWxJbnRlbnROZXV0cmFsLCBlbEludGVudFBlbmRpbmcsIGVsSW50ZW50V2FybmluZywgZWxJbnRlbnREZWZhdWx0LCB9IGZyb20gJy4uLy4uLy4uL3N0eWxlcy9pbnRlbnQnO1xuZXhwb3J0IGNvbnN0IGVsSWNvblNpemVTbWFsbGVzdCA9IGNzcyBgXG4gIGZvbnQtc2l6ZTogMC43NXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uU2l6ZVNtYWxsID0gY3NzIGBcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtc3ViaGVhZGluZyk7XG5gO1xuZXhwb3J0IGNvbnN0IGVsSWNvblNpemVNZWRpdW0gPSBjc3MgYFxuICBmb250LXNpemU6IDIuNXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uU2l6ZUxhcmdlID0gY3NzIGBcbiAgZm9udC1zaXplOiA1cmVtO1xuYDtcbmV4cG9ydCBjb25zdCBlbEljb25TaXplTGFyZ2VzdCA9IGNzcyBgXG4gIGZvbnQtc2l6ZTogOC43NXJlbTtcbmA7XG5leHBvcnQgY29uc3QgZWxJY29uTWVudSA9IGNzcyBgXG4gIHN2ZyB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmF2LW1lbnUtYmFja2dyb3VuZC1kYXJrKTtcbiAgfVxuYDtcbmV4cG9ydCBjb25zdCBlbEljb25OZXcgPSBjc3MgYFxuICBmb250LXNpemU6IDEuNXJlbSAhaW1wb3J0YW50O1xuYDtcbmV4cG9ydCBjb25zdCBFbEljb24gPSBzdHlsZWQuc3BhbiBgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1ibGFjayk7XG5cbiAgc3ZnIHtcbiAgICB3aWR0aDogMWVtO1xuICAgIGhlaWdodDogMWVtO1xuICB9XG5cbiAgJi4ke2VsSW50ZW50UHJpbWFyeX0ge1xuICAgIGNvbG9yOiB2YXIoLS1pbnRlbnQtcHJpbWFyeSk7XG4gIH1cblxuICAmLiR7ZWxJbnRlbnROZXV0cmFsfSB7XG4gICAgY29sb3I6IHZhcigtLWludGVudC1uZXV0cmFsKTtcbiAgfVxuXG4gICYuJHtlbEludGVudFN1Y2Nlc3N9IHtcbiAgICBjb2xvcjogdmFyKC0taW50ZW50LXN1Y2Nlc3MpO1xuICB9XG5cbiAgJi4ke2VsSW50ZW50UGVuZGluZ30ge1xuICAgIGNvbG9yOiB2YXIoLS1pbnRlbnQtcGVuZGluZyk7XG4gIH1cblxuICAmLiR7ZWxJbnRlbnRXYXJuaW5nfSB7XG4gICAgY29sb3I6IHZhcigtLWludGVudC13YXJuaW5nKTtcbiAgfVxuXG4gICYuJHtlbEludGVudERhbmdlcn0ge1xuICAgIGNvbG9yOiB2YXIoLS1pbnRlbnQtZGFuZ2VyKTtcbiAgfVxuXG4gICYuJHtlbEludGVudERlZmF1bHR9IHtcbiAgICBjb2xvcjogdmFyKC0taW50ZW50LWRlZmF1bHQpO1xuICB9XG5gO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9aW5kZXguanMubWFwIl19*/
 .el-card-context-menu-open{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .el-card-focussed{background-color:var(--color-purple-50);}
 .el-card-wrap{padding:1rem;border-radius:0.25rem;box-shadow:2px 4px 20px rgba(0,0,0,0.03);background:var(--color-white);position:relative;}@media screen and (min-width:768px){.el-card-wrap{padding:1.25rem;box-shadow:2px 4px 20px rgba(0,0,0,0.05);}}.el-card-wrap.el-card-focussed{background-color:var(--color-purple-50);}
@@ -661,8 +661,8 @@
 .el-mobile-controls-visible{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .el-mobile-controls-bg{display:none;z-index:98;width:100%;height:100%;top:0;left:0;background:var(--color-grey-500);opacity:0.2;}.el-mobile-controls-bg.el-is-active{display:block;position:fixed;}
 .el-mobile-controls{position:fixed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;bottom:0.75rem;right:0.75rem;z-index:99;}.el-mobile-controls .el-icon.el-intent-default{color:var(--color-white);}@media screen and (min-width:768px){.el-mobile-controls{display:none;}.el-mobile-controls.el-mobile-controls-visible{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}
-.el-mobile-control-item{padding:0.5rem 1rem;background:var(--color-white);-webkit-text-decoration:none;text-decoration:none;border-radius:var(--default-border-radius);border:1px solid var(--color-grey-100);font-size:var(--font-size-small);font-family:var(--font-sans-serif);font-weight:var(--font-weight-medium);color:var(--color-grey-400);margin:0 0.5rem 1.25rem 0;display:none;opacity:1;}.el-mobile-control-item:last-of-type{margin:0 0.5rem 0.75rem 0;}.el-mobile-control-item.el-is-active{display:block;}.el-mobile-control-item:hover{border:1px solid var(--color-grey-400);color:var(--color-grey-700);}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL21vYmlsZS1jb250cm9scy9fX3N0eWxlc19fL2luZGV4LnRzIl0sIm5hbWVzIjpbIi5lbC1tb2JpbGUtY29udHJvbHMtdmlzaWJsZSIsIi5lbC1tb2JpbGUtY29udHJvbHMtYmciLCIuZWwtbW9iaWxlLWNvbnRyb2xzIiwiLmVsLW1vYmlsZS1jb250cm9sLWl0ZW0iXSwibWFwcGluZ3MiOiJBQU11Q0E7QUFHTEM7QUFlRkM7QUFzQkdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL21vYmlsZS1jb250cm9scy9fX3N0eWxlc19fL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkIH0gZnJvbSAnQGxpbmFyaWEvcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGxpbmFyaWEvY29yZSc7XG5pbXBvcnQgeyBpc1RhYmxldCB9IGZyb20gJy4uLy4uLy4uL3N0eWxlcy9tZWRpYSc7XG5pbXBvcnQgeyBlbElzQWN0aXZlIH0gZnJvbSAnLi4vLi4vLi4vc3R5bGVzL3N0YXRlcyc7XG5pbXBvcnQgeyBFbEljb24gfSBmcm9tICcuLi8uLi9pY29uL19fc3R5bGVzX18nO1xuaW1wb3J0IHsgZWxJbnRlbnREZWZhdWx0IH0gZnJvbSAnLi4vLi4vLi4vc3R5bGVzL2ludGVudCc7XG5leHBvcnQgY29uc3QgZWxNb2JpbGVDb250cm9sc1Zpc2libGUgPSBjc3MgYFxuICBkaXNwbGF5OiBmbGV4O1xuYDtcbmV4cG9ydCBjb25zdCBFbE1vYmlsZUNvbnRyb2xzQmcgPSBzdHlsZWQuZGl2IGBcbiAgZGlzcGxheTogbm9uZTtcbiAgei1pbmRleDogOTg7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3ItZ3JleS01MDApO1xuICBvcGFjaXR5OiAwLjI7XG5cbiAgJi4ke2VsSXNBY3RpdmV9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gIH1cbmA7XG5leHBvcnQgY29uc3QgRWxNb2JpbGVDb250cm9scyA9IHN0eWxlZC5kaXYgYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgYm90dG9tOiAwLjc1cmVtO1xuICByaWdodDogMC43NXJlbTtcbiAgei1pbmRleDogOTk7XG5cbiAgJHtFbEljb259LiR7ZWxJbnRlbnREZWZhdWx0fSB7XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLXdoaXRlKTtcbiAgfVxuXG4gICR7aXNUYWJsZXR9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuXG4gICAgJi4ke2VsTW9iaWxlQ29udHJvbHNWaXNpYmxlfSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgfVxuYDtcbmV4cG9ydCBjb25zdCBFbE1vYmlsZUNvbnRyb2xJdGVtID0gc3R5bGVkLmEgYFxuICBwYWRkaW5nOiAwLjVyZW0gMXJlbTtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3Itd2hpdGUpO1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWRlZmF1bHQtYm9yZGVyLXJhZGl1cyk7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWdyZXktMTAwKTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtc21hbGwpO1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1zYW5zLXNlcmlmKTtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LW1lZGl1bSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LTQwMCk7XG4gIG1hcmdpbjogMCAwLjVyZW0gMS4yNXJlbSAwO1xuICBkaXNwbGF5OiBub25lO1xuICBvcGFjaXR5OiAxO1xuXG4gICY6bGFzdC1vZi10eXBlIHtcbiAgICBtYXJnaW46IDAgMC41cmVtIDAuNzVyZW0gMDtcbiAgfVxuXG4gICYuJHtlbElzQWN0aXZlfSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvci1ncmV5LTQwMCk7XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLWdyZXktNzAwKTtcbiAgfVxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWluZGV4LmpzLm1hcCJdfQ==*/
+.el-mobile-control-item{padding:0.5rem 1rem;background:var(--color-white);-webkit-text-decoration:none;text-decoration:none;border-radius:var(--default-border-radius);border:1px solid var(--color-grey-100);font-size:var(--font-size-small);font-family:var(--font-sans-serif);font-weight:var(--font-weight-medium);color:var(--color-grey-400);margin:0 0.5rem 0.25rem 0;display:none;opacity:1;}.el-mobile-control-item:last-of-type{margin:0 0.5rem 0rem 0;}.el-mobile-control-item.el-is-active{display:block;}.el-mobile-control-item:hover{border:1px solid var(--color-grey-400);color:var(--color-grey-700);}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL21vYmlsZS1jb250cm9scy9fX3N0eWxlc19fL2luZGV4LnRzIl0sIm5hbWVzIjpbIi5lbC1tb2JpbGUtY29udHJvbHMtdmlzaWJsZSIsIi5lbC1tb2JpbGUtY29udHJvbHMtYmciLCIuZWwtbW9iaWxlLWNvbnRyb2xzIiwiLmVsLW1vYmlsZS1jb250cm9sLWl0ZW0iXSwibWFwcGluZ3MiOiJBQU11Q0E7QUFHTEM7QUFlRkM7QUFzQkdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2VsZW1lbnRzL2VsZW1lbnRzL3NyYy9jb21wb25lbnRzL21vYmlsZS1jb250cm9scy9fX3N0eWxlc19fL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkIH0gZnJvbSAnQGxpbmFyaWEvcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGxpbmFyaWEvY29yZSc7XG5pbXBvcnQgeyBpc1RhYmxldCB9IGZyb20gJy4uLy4uLy4uL3N0eWxlcy9tZWRpYSc7XG5pbXBvcnQgeyBlbElzQWN0aXZlIH0gZnJvbSAnLi4vLi4vLi4vc3R5bGVzL3N0YXRlcyc7XG5pbXBvcnQgeyBFbEljb24gfSBmcm9tICcuLi8uLi9pY29uL19fc3R5bGVzX18nO1xuaW1wb3J0IHsgZWxJbnRlbnREZWZhdWx0IH0gZnJvbSAnLi4vLi4vLi4vc3R5bGVzL2ludGVudCc7XG5leHBvcnQgY29uc3QgZWxNb2JpbGVDb250cm9sc1Zpc2libGUgPSBjc3MgYFxuICBkaXNwbGF5OiBmbGV4O1xuYDtcbmV4cG9ydCBjb25zdCBFbE1vYmlsZUNvbnRyb2xzQmcgPSBzdHlsZWQuZGl2IGBcbiAgZGlzcGxheTogbm9uZTtcbiAgei1pbmRleDogOTg7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3ItZ3JleS01MDApO1xuICBvcGFjaXR5OiAwLjI7XG5cbiAgJi4ke2VsSXNBY3RpdmV9IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gIH1cbmA7XG5leHBvcnQgY29uc3QgRWxNb2JpbGVDb250cm9scyA9IHN0eWxlZC5kaXYgYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgYm90dG9tOiAwLjc1cmVtO1xuICByaWdodDogMC43NXJlbTtcbiAgei1pbmRleDogOTk7XG5cbiAgJHtFbEljb259LiR7ZWxJbnRlbnREZWZhdWx0fSB7XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLXdoaXRlKTtcbiAgfVxuXG4gICR7aXNUYWJsZXR9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuXG4gICAgJi4ke2VsTW9iaWxlQ29udHJvbHNWaXNpYmxlfSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgfVxuYDtcbmV4cG9ydCBjb25zdCBFbE1vYmlsZUNvbnRyb2xJdGVtID0gc3R5bGVkLmEgYFxuICBwYWRkaW5nOiAwLjVyZW0gMXJlbTtcbiAgYmFja2dyb3VuZDogdmFyKC0tY29sb3Itd2hpdGUpO1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWRlZmF1bHQtYm9yZGVyLXJhZGl1cyk7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWdyZXktMTAwKTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtc21hbGwpO1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1zYW5zLXNlcmlmKTtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LW1lZGl1bSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1ncmV5LTQwMCk7XG4gIG1hcmdpbjogMCAwLjVyZW0gMC4yNXJlbSAwO1xuICBkaXNwbGF5OiBub25lO1xuICBvcGFjaXR5OiAxO1xuXG4gICY6bGFzdC1vZi10eXBlIHtcbiAgICBtYXJnaW46IDAgMC41cmVtIDByZW0gMDtcbiAgfVxuXG4gICYuJHtlbElzQWN0aXZlfSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvci1ncmV5LTQwMCk7XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLWdyZXktNzAwKTtcbiAgfVxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWluZGV4LmpzLm1hcCJdfQ==*/
 .el-drawer-bg{display:none;z-index:98;width:100%;height:100%;top:0;left:0;background:var(--color-grey-500);opacity:0.2;}.el-drawer-bg.el-is-active{display:block;position:fixed;}
 .el-drawer{display:none;top:0;box-shadow:0px 4px 16px 0px rgba(34,43,51,0.16);background:white;z-index:99;width:100%;height:100%;}.el-drawer.el-is-active{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:fixed;}@media screen and (min-width:768px){.el-drawer{right:-480px;width:480px;}.el-drawer.el-is-active{-webkit-transform:translate(-480px,0);-ms-transform:translate(-480px,0);transform:translate(-480px,0);}}
 .el-drawer-header{padding:1.5rem 2rem;border-bottom:1px solid var(--color-grey-100);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/foundations#readme",
   "bugs": {
@@ -29,14 +29,14 @@
   ],
   "scripts": {
     "build": "yarn build:dist && yarn build:storybook",
-    "build:storybook": "cross-env NODE_ENV=production && build-storybook -o public/dist",
+    "build:storybook": "cross-env NODE_ENV=production && storybook build -o public/dist",
     "build:dist": "cross-env NODE_ENV=production && rimraf public/dist && rimraf dist && rollup -c",
     "commit": "yarn test --coverage --no-cache --silent --forceExit --detectOpenHandles --runInBand --watch=false && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges && yarn lint --fix && yarn check",
     "lint": "eslint --cache --ext=ts,tsx,js src",
     "check": "tsc --noEmit --skipLibCheck",
     "publish": "yarn npm publish --access public",
     "deploy": "elements-deploy deploy",
-    "start": "start-storybook -p 6006",
+    "start": "storybook dev -p 6006",
     "test": "cross-env TZ=UTC jest --watch --colors --silent"
   },
   "dependencies": {
@@ -45,101 +45,94 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@linaria/babel-preset": "^5.0.4",
     "@linaria/rollup": "^5.0.4",
     "@linaria/shaker": "^5.0.3",
+    "@linaria/vite": "^5.0.4",
     "@linaria/webpack-loader": "^5.0.4",
     "@mdx-js/react": "^1.6.22",
-    "@reapit/storybook-addon-html": "^5.0.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/cli": "^6.5.16",
-    "@storybook/csf": "^0.1.2",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/react-docgen-typescript-plugin": "1.0.1",
-    "@storybook/theming": "^6.5.16",
-    "@svgr/rollup": "^6.5.1",
+    "@storybook/addon-a11y": "^8.0.0-rc.0",
+    "@storybook/addon-actions": "^8.0.0-rc.0",
+    "@storybook/addon-docs": "^8.0.0-rc.0",
+    "@storybook/addon-essentials": "^8.0.0-rc.0",
+    "@storybook/addon-links": "^8.0.0-rc.0",
+    "@storybook/addon-storysource": "^8.0.0-rc.0",
+    "@storybook/blocks": "^8.0.0-rc.0",
+    "@storybook/cli": "^8.0.0-rc.0",
+    "@storybook/csf": "0.1.2-next.0",
+    "@storybook/icons": "^1.2.5",
+    "@storybook/manager-api": "^8.0.0-rc.0",
+    "@storybook/preview-api": "^8.0.0-rc.0",
+    "@storybook/react": "^8.0.0-rc.0",
+    "@storybook/react-dom-shim": "^8.0.0-rc.0",
+    "@storybook/react-vite": "^8.0.0-rc.0",
+    "@storybook/theming": "^8.0.0-rc.0",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/babel__core": "^7",
     "@types/jest": "^29.5.10",
     "@types/node": "^18",
+    "@types/postcss-flexbugs-fixes": "^5",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
-    "@types/uuid": "^8.3.4",
+    "@types/react-syntax-highlighter": "^15",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "aws-cdk": "^2.124.0",
     "aws-cdk-lib": "^2.124.0",
     "aws-sdk": "^2.1545.0",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
     "colord": "^2.9.3",
     "concurrently": "^6.5.1",
     "constructs": "^10.3.0",
     "cross-env": "^7.0.3",
     "dashify": "2.0.0",
-    "esbuild-loader": "^3.2.0",
     "eslint": "8.54.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "jest-coverage-badges": "^1.1.2",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.7.7",
     "move-file-cli": "^2.0.0",
-    "node-polyfill-webpack-plugin": "^1.1.4",
     "postcss": "^8.4.31",
-    "prettier": "2.2.1",
-    "react": "^18.0.2",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^18.0.2",
-    "react-is": "^16.13.1",
-    "require-from-string": "^2.0.2",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.29.4",
     "rollup-plugin-css-only": "^4.5.2",
     "snyk": "^1.1259.0",
+    "storybook": "^8.0.0-rc.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
     "typescript": "4.9.5",
-    "url-loader": "^4.1.1",
-    "vite": "^5.0.12",
-    "webpack": "^5.89.0"
+    "vite": "^5.1.4",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "peerDependencies": {
     "react": ">=18.0.2",
     "react-dom": ">=18.0.2"
   },
-  "resolutions": {
-    "webpack": "^5.0.0",
-    "css-loader": "^5.0.0",
-    "dotenv-webpack": "^6.0.0",
-    "html-webpack-plugin": "^5.0.0",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.0.0",
-    "webpack-dev-middleware": "^4.1.0",
-    "webpack-virtual-modules": "^0.4.2",
-    "prettier": "2.2.1"
-  },
   "snyk": true,
   "packageManager": "yarn@4.0.2"
 }

package/dist/cjs/components/snack/use-snack-hook.stories.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const UseSnackHookStory: () => React.JSX.Element;

package/dist/esm/components/snack/use-snack-hook.stories.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const UseSnackHookStory: () => React.JSX.Element;