flipper-ui 0.35.15 → 0.36.0

package/core/data-display/actions/styles.d.ts

@@ -3,5 +3,8 @@ interface IWrapper {
     margin?: number | string;
     align?: 'flex-end' | 'flex-start' | 'center';
 }
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IWrapper>> & string;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IWrapper, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/core/data-display/actions/styles.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Wrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    justify-content: ", ";\n    padding: ", ";\n    margin: ", ";\n"])), function (props) {
+var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    grid-area: actions;\n    display: flex;\n    flex: 1;\n    justify-content: ", ";\n    padding: ", ";\n    margin: ", ";\n"])), function (props) {
   return props.align;
 }, function (props) {
   return props.padding;

package/core/data-display/advertise/styles.d.ts

@@ -1,6 +1,10 @@
-export declare const AdvertiseTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+export declare const AdvertiseTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType;
-} & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const AdvertiseContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/surfaces/paper").IPaperProps, never>> & string & Omit<({ children, style, padding, margin, ...otherProps }: import("@/core/surfaces/paper").IPaperProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+} & import("../../types").DefaultProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const AdvertiseContainer: import("@emotion/styled").StyledComponent<import("@/core/surfaces/paper").IPaperProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/data-display/advertise/styles.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AdvertiseTypography = exports.AdvertiseContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _paper = _interopRequireDefault(require("../../surfaces/paper"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
 var gray = _theme.theme.colors.gray;
-var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
-var AdvertiseContainer = exports.AdvertiseContainer = (0, _styledComponents["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));
+var AdvertiseTypography = exports.AdvertiseTypography = (0, _styled["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
+var AdvertiseContainer = exports.AdvertiseContainer = (0, _styled["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));

package/core/data-display/chapter/styles.d.ts

@@ -1,3 +1,9 @@
 import type { LineProps } from '.';
-export declare const Line: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LineProps>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Line: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & LineProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/data-display/chapter/styles.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Line = exports.Container = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
 var gray = _theme.theme.colors.gray;
-var Line = exports.Line = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
+var Line = exports.Line = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
   return props.primary ? gray[500] : gray[300];
 });
-var Container = exports.Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var Container = exports.Container = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));

package/core/data-display/data-table/styles.d.ts

@@ -1,7 +1,16 @@
-import MuiTableCell from '@mui/material/TableCell';
-export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const PaginationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TableCellRows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/TableCell").TableCellProps, never>> & string & Omit<typeof MuiTableCell, keyof import("react").Component<any, {}, any>>;
-export declare const RowTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+export declare const FieldWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PaginationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableCellRows: import("@emotion/styled").StyledComponent<import("@mui/material/TableCell").TableCellProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const RowTable: import("@emotion/styled").StyledComponent<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
-}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/TableRow").TableRowTypeMap<{}, "tr">>, keyof import("react").Component<any, {}, any>>;
+}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/data-display/data-table/styles.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableCellRows = exports.RowTable = exports.PaginationWrapper = exports.FieldWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var FieldWrapper = exports.FieldWrapper = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
-var PaginationWrapper = exports.PaginationWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    margin-left: 12px;\n"])));
-var TableCellRows = exports.TableCellRows = (0, _styledComponents["default"])(_TableCell["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
-var RowTable = exports.RowTable = (0, _styledComponents["default"])(_TableRow["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));
+var FieldWrapper = exports.FieldWrapper = _styled["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var PaginationWrapper = exports.PaginationWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    margin-left: 12px;\n"])));
+var TableCellRows = exports.TableCellRows = (0, _styled["default"])(_TableCell["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
+var RowTable = exports.RowTable = (0, _styled["default"])(_TableRow["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));

package/core/data-display/password-visibility/styles.d.ts

@@ -1 +1,3 @@
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@/core/inputs/icon-button").IconButtonProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/data-display/password-visibility/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _templateObject;
-var StyledButton = exports.StyledButton = (0, _styledComponents["default"])(_iconButton["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));
+var StyledButton = exports.StyledButton = (0, _styled["default"])(_iconButton["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 36px !important;\n    height: 36px !important;\n"])));

package/core/feedback/dialog/styles.d.ts

@@ -1,5 +1,20 @@
-export declare const PaperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TitleAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Snippet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SnippetContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PaperContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleAction: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Snippet: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SnippetContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/dialog/styles.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleWrapper = exports.TitleAction = exports.SnippetContent = exports.Snippet = exports.PaperContent = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var PaperContent = exports.PaperContent = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
-var TitleWrapper = exports.TitleWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
-var TitleAction = exports.TitleAction = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 16px 24px;\n    align-items: center;\n    display: flex;\n"])));
-var Snippet = exports.Snippet = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n"])));
-var SnippetContent = exports.SnippetContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: inherit;\n    display: flex;\n"])));
+var PaperContent = exports.PaperContent = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var TitleWrapper = exports.TitleWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var TitleAction = exports.TitleAction = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 16px 24px;\n    align-items: center;\n    display: flex;\n"])));
+var Snippet = exports.Snippet = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n"])));
+var SnippetContent = exports.SnippetContent = _styled["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: inherit;\n    display: flex;\n"])));

package/core/feedback/loading/styles.d.ts

@@ -1 +1,4 @@
-export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/loading/styles.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LoadingContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var LoadingContainer = exports.LoadingContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n"])));
+var LoadingContainer = exports.LoadingContainer = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n"])));

package/core/feedback/snackbar/styles.d.ts

@@ -1,2 +1,8 @@
-export declare const Message: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Message: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StoriesWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/snackbar/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StoriesWrapper = exports.Message = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = require("styled-components");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2;
-var Message = exports.Message = _styledComponents.styled.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    gap: 12px;\n"])));
-var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 150px;\n"])));
+var Message = exports.Message = _styled["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    gap: 12px;\n"])));
+var StoriesWrapper = exports.StoriesWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 150px;\n"])));

package/core/feedback/tooltip/styles.d.ts

@@ -1 +1,4 @@
-export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StoriesWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/tooltip/styles.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StoriesWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = require("styled-components");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: center;\n"])));
+var StoriesWrapper = exports.StoriesWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: center;\n"])));

package/core/feedback/validation-dialog/styles.d.ts

@@ -1,2 +1,7 @@
-export declare const MuiDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../dialog").IDialogProps, never>> & string & Omit<({ snippet, style, padding, margin, scroll, PaperProps, open, fullScreen, fullWidth, maxWidth, onClose, titleAction, titleWrapperStyle, titleStyle, titleActionStyle, contentStyle, contentTextStyle, actionsStyle, actions, content, text, title, snippetStyle, snippetContentStyle, "aria-title": ariaTitle, ...otherProps }: import("../dialog").IDialogProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ValidationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MuiDialog: import("@emotion/styled").StyledComponent<import("../dialog").IDialogProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const ValidationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/validation-dialog/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ValidationWrapper = exports.MuiDialog = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _dialog = _interopRequireDefault(require("../dialog"));
 var _templateObject, _templateObject2;
-var MuiDialog = exports.MuiDialog = (0, _styledComponents["default"])(_dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    div > div > h2 {\n        margin-top: 20px;\n    }\n"])));
-var ValidationWrapper = exports.ValidationWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    gap: 15px;\n"])));
+var MuiDialog = exports.MuiDialog = (0, _styled["default"])(_dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    div > div > h2 {\n        margin-top: 20px;\n    }\n"])));
+var ValidationWrapper = exports.ValidationWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    gap: 15px;\n"])));

package/core/inputs/add-button/styles.d.ts

@@ -1 +1,3 @@
-export declare const ButtonAdd: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/button").IButtonProps, never>> & string & Omit<({ children, color, dashed, href, margin, padding, style, variant, ...otherProps }: import("@/core/inputs/button").IButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ButtonAdd: import("@emotion/styled").StyledComponent<import("@/core/inputs/button").IButtonProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/inputs/add-button/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonAdd = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _button = _interopRequireDefault(require("../button"));
 var _templateObject;
-var ButtonAdd = exports.ButtonAdd = (0, _styledComponents["default"])(_button["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n"])));
+var ButtonAdd = exports.ButtonAdd = (0, _styled["default"])(_button["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n"])));

package/core/inputs/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChangeEvent, ReactNode } from 'react';
+import type { ChangeEvent, CSSProperties, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 import type { CheckboxProps } from '@mui/material/Checkbox';
 export interface ICheckboxProps extends DefaultProps {
@@ -12,6 +12,7 @@ export interface ICheckboxProps extends DefaultProps {
     dense?: boolean;
     type?: 'switch' | 'checkbox';
     helperIcon?: ReactNode;
+    sx?: CSSProperties;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
     checkboxProps?: CheckboxProps;

package/core/inputs/checkbox/index.js

@@ -31,9 +31,10 @@ var Checkbox = function Checkbox(props) {
   }));
   var renderCheckbox = function renderCheckbox(checkboxProps) {
     return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, checkboxProps, {
+      sx: props.sx,
       name: props.name,
-      checked: props.checked,
       value: props.name,
+      checked: props.checked,
       color: props.color || 'secondary',
       style: props.dense ? _styles.DENSE : {},
       disabled: props.disabled,
@@ -43,6 +44,7 @@ var Checkbox = function Checkbox(props) {
   var renderSwitch = function renderSwitch(checkboxProps) {
     return /*#__PURE__*/_react["default"].createElement(_Switch["default"], (0, _extends2["default"])({}, checkboxProps, {
       role: "switch",
+      sx: props.sx,
       name: props.name,
       value: props.name,
       checked: props.checked,

package/core/inputs/checkbox/styles.d.ts

@@ -2,4 +2,7 @@ export declare const DENSE: {
     padding: string;
     margin: string;
 };
-export declare const CheckFieldsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckFieldsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/inputs/checkbox/styles.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DENSE = exports.CheckFieldsWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
 var DENSE = exports.DENSE = {
   padding: '2px',
   margin: '0px 7px'
 };
-var CheckFieldsWrapper = exports.CheckFieldsWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var CheckFieldsWrapper = exports.CheckFieldsWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));

package/core/inputs/date-time/styles.d.ts

@@ -1 +1,4 @@
-export declare const CustomWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CustomWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/inputs/date-time/styles.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = require("styled-components");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var CustomWrapper = exports.CustomWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    border-radius: 5px;\n    overflow: hidden;\n"])));
+var CustomWrapper = exports.CustomWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    border-radius: 5px;\n    overflow: hidden;\n"])));

package/core/inputs/pin-input/styles.d.ts

@@ -1,3 +1,12 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ValidateContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ValidateContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/inputs/pin-input/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ValidateContainer = exports.Container = exports.ButtonContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3;
-var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
-var ValidateContainer = exports.ValidateContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-bottom: 2rem;\n"])));
-var ButtonContainer = exports.ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-top: 3rem;\n"])));
+var Container = exports.Container = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
+var ValidateContainer = exports.ValidateContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-bottom: 2rem;\n"])));
+var ButtonContainer = exports.ButtonContainer = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-top: 3rem;\n"])));

package/core/inputs/text-field/styles.d.ts

@@ -1,5 +1,20 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Helper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StaticTextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CharactersCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Helper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextFieldWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StaticTextFieldWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CharactersCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/core/inputs/text-field/styles.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Wrapper = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.Helper = exports.CharactersCount = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var gray = _theme.theme.colors.gray;
-var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
-var Helper = exports.Helper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
-var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n"])));
-var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);
+var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var Helper = exports.Helper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
+var TextFieldWrapper = exports.TextFieldWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n"])));
+var CharactersCount = exports.CharactersCount = _styled["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);

package/core/navigation/breadcrumbs/styles.d.ts

@@ -1 +1,4 @@
-export declare const BreadcrumbLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const BreadcrumbLink: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/core/navigation/breadcrumbs/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BreadcrumbLink = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _theme = require("../../../theme");
 var _templateObject;
 var primary = _theme.theme.colors.primary;
-var BreadcrumbLink = exports.BreadcrumbLink = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);
+var BreadcrumbLink = exports.BreadcrumbLink = _styled["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);

package/core/navigation/sidebar/styles.d.ts

@@ -2,9 +2,17 @@ interface IAction {
     anchor?: 'top' | 'left' | 'bottom' | 'right';
     minWidth?: number | string;
 }
-export declare const Action: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAction>> & string;
-export declare const AnchorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@/core/inputs/button").IButtonProps, {
+export declare const Action: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IAction, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AnchorButton: import("@emotion/styled").StyledComponent<import("@/core/inputs/button").IButtonProps & {
+    theme?: import("@emotion/react").Theme;
+} & {
     minwidth: string | number;
-}>> & string & Omit<({ children, color, dashed, href, margin, padding, style, variant, ...otherProps }: import("@/core/inputs/button").IButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const SidebarStorie: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, {}, {}>;
+export declare const SidebarStorie: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/core/navigation/sidebar/styles.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SidebarStorie = exports.AnchorButton = exports.Action = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _button = _interopRequireDefault(require("../../inputs/button"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3;
 var gray = _theme.theme.colors.gray;
-var Action = exports.Action = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
+var Action = exports.Action = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
   return props.anchor === 'left' ? 'row-reverse' : 'row';
 });
-var AnchorButton = exports.AnchorButton = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        max-width: ", "px;\n        border-radius: 4px;\n        box-shadow: none;\n        min-width: auto;\n        width: 100%;\n        background-color: transparent;\n    }\n\n    &:active {\n        box-shadow: none;\n    }\n\n    &:hover {\n        background-color: ", " !important;\n    }\n"])), function (props) {
+var AnchorButton = exports.AnchorButton = (0, _styled["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        max-width: ", "px;\n        border-radius: 4px;\n        box-shadow: none;\n        min-width: auto;\n        width: 100%;\n        background-color: transparent;\n    }\n\n    &:active {\n        box-shadow: none;\n    }\n\n    &:hover {\n        background-color: ", " !important;\n    }\n"])), function (props) {
   return props.minwidth;
 }, gray[300]);
-var SidebarStorie = exports.SidebarStorie = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 500px;\n"])));
+var SidebarStorie = exports.SidebarStorie = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 500px;\n"])));

package/core/surfaces/card/styles.d.ts

@@ -1,3 +1,11 @@
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Header: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CardButton: import("@emotion/styled").StyledComponent<import("@/core/inputs/icon-button").IconButtonProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/core/surfaces/card/styles.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Header = exports.CardWrapper = exports.CardButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _templateObject, _templateObject2, _templateObject3;
-var Header = exports.Header = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
-var CardWrapper = exports.CardWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
-var CardButton = exports.CardButton = (0, _styledComponents["default"])(_iconButton["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));
+var Header = exports.Header = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var CardWrapper = exports.CardWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
+var CardButton = exports.CardButton = (0, _styled["default"])(_iconButton["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));

package/core/surfaces/expansion-panel/styles.d.ts

@@ -1 +1,4 @@
-export declare const ExpansionPanelHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ExpansionPanelHeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/surfaces/expansion-panel/styles.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ExpansionPanelHeaderWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var ExpansionPanelHeaderWrapper = exports.ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var ExpansionPanelHeaderWrapper = exports.ExpansionPanelHeaderWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));

package/core/surfaces/header/styles.d.ts

@@ -1 +1,4 @@
-export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StoriesWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/surfaces/header/styles.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StoriesWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = require("styled-components");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 75px;\n"])));
+var StoriesWrapper = exports.StoriesWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 75px;\n"])));

package/core/surfaces/panel/styles.d.ts

@@ -1,2 +1,7 @@
-export declare const ExpansionPaperPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../expansion-panel").ExpansionPanelProps, never>> & string & Omit<({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: import("../expansion-panel").ExpansionPanelProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const Summary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ExpansionPaperPanel: import("@emotion/styled").StyledComponent<import("../expansion-panel").ExpansionPanelProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const Summary: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/surfaces/panel/styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Summary = exports.ExpansionPaperPanel = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _expansionPanel = _interopRequireDefault(require("../expansion-panel"));
 var _templateObject, _templateObject2;
-var ExpansionPaperPanel = exports.ExpansionPaperPanel = (0, _styledComponents["default"])(_expansionPanel["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n    }\n\n    &::before {\n        height: 0px !important;\n        top: 0px !important;\n        background-color: transparent;\n    }\n"])));
-var Summary = exports.Summary = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));
+var ExpansionPaperPanel = exports.ExpansionPaperPanel = (0, _styled["default"])(_expansionPanel["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n    }\n\n    &::before {\n        height: 0px !important;\n        top: 0px !important;\n        background-color: transparent;\n    }\n"])));
+var Summary = exports.Summary = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));

package/core/surfaces/step-card/styles.d.ts

@@ -12,12 +12,36 @@ interface IContainerProps {
 interface IColumnProps {
     justifyContent: string | number;
 }
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IContainerProps>> & string;
-export declare const StepCardRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IRowProps>> & string;
-export declare const StepContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepContainerProps>> & string;
-export declare const StepCardColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IColumnProps>> & string;
-export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NormalProgressContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NormalProgressContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepCardRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IStepContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepCardColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & IColumnProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NormalProgressContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NormalProgressContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/core/surfaces/step-card/styles.js

@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContent = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n    ", "\n"])), function (props) {
+var Container = exports.Container = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n    ", "\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var StepCardRow = exports.StepCardRow = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n    max-width: ", ";\n    min-height: ", ";\n"])), function (props) {
+var StepCardRow = exports.StepCardRow = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n    max-width: ", ";\n    min-height: ", ";\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
 }, function (props) {
   return props.minHeight;
 });
-var StepContainer = exports.StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    ", "\n"])), function (props) {
+var StepContainer = exports.StepContainer = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    ", "\n"])), function (props) {
   return props.padding ? "padding: ".concat(props.padding, ";") : '';
 });
-var StepCardColumn = exports.StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    padding-inline: 30px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) {
+var StepCardColumn = exports.StepCardColumn = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    padding-inline: 30px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) {
   return props.justifyContent;
 }, function (props) {
   if (props.justifyContent === 'start') {
@@ -29,7 +29,7 @@ var StepCardColumn = exports.StepCardColumn = _styledComponents["default"].div(_
   }
   return '';
 });
-var ListItemContainer = exports.ListItemContainer = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
-var TitleContainer = exports.TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
-var NormalProgressContainer = exports.NormalProgressContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n"])));
-var NormalProgressContent = exports.NormalProgressContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n"])));
+var ListItemContainer = exports.ListItemContainer = _styled["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
+var TitleContainer = exports.TitleContainer = _styled["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
+var NormalProgressContainer = exports.NormalProgressContainer = _styled["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n"])));
+var NormalProgressContent = exports.NormalProgressContent = _styled["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.15",
+    "version": "0.36.0",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -36,7 +36,6 @@
         "@mui/material": "6.4.8",
         "@mui/system": "6.4.8",
         "@mui/x-date-pickers": "7.28.2",
-        "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
         "react-number-format": "5.4.4"
     },
@@ -59,17 +58,17 @@
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.15.15",
+        "@types/node": "22.15.18",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.32.0",
-        "@typescript-eslint/parser": "8.32.0",
+        "@typescript-eslint/eslint-plugin": "8.32.1",
+        "@typescript-eslint/parser": "8.32.1",
         "babel-loader": "10.0.0",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
         "eslint": "9.26.0",
-        "eslint-config-prettier": "10.1.3",
+        "eslint-config-prettier": "10.1.5",
         "eslint-import-resolver-typescript": "4.3.4",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.4.0",
@@ -80,22 +79,22 @@
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "prettier": "3.5.3",
+        "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "8.6.12",
-        "styled-components": "6.1.17",
         "ts-jest": "29.3.2",
         "ts-loader": "9.5.2",
         "typescript": "5.8.3",
-        "typescript-eslint": "8.32.0",
+        "typescript-eslint": "8.32.1",
         "uuid": "11.1.0",
         "webpack": "5.99.8"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",
+        "ramda": "^0.30.1",
         "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0",
-        "styled-components": "^6.0.0"
+        "react-dom": "^17.0.0 || ^18.0.0"
     },
     "publishConfig": {
         "ignore": [