@infomaximum/ui-kit 0.9.1

package/dist/components/Tag/Tag.styles.d.ts

@@ -0,0 +1,303 @@
+import { Theme } from 'themes';
+import { TagDefaultStylesProps } from './Tag.types';
+export declare const getTagDefaultStyle: ({ color, type }: TagDefaultStylesProps) => {
+    wrapper: (theme: Theme) => {
+        readonly background: "#F5F5F5";
+        readonly color: "#262626";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#FFF1F0";
+        readonly color: "#F5222D";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#FFF7E6";
+        readonly color: "#FA8C16";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#FEFFE6";
+        readonly color: "#D4B106";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#F6FFED";
+        readonly color: "#52C41A";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#E6FFFB";
+        readonly color: "#13C2C2";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#E6F4FF";
+        readonly color: "#1677FF";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#F9F0FF";
+        readonly color: "#722ED1";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly background: "#FFF0F6";
+        readonly color: "#EB2F96";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#8C8C8C";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#F5222D";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#FA8C16";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#D4B106";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#52C41A";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#13C2C2";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#1677FF";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#722ED1";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    } | {
+        readonly color: "#FFFFFF";
+        readonly background: "#EB2F96";
+        readonly border: string;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly maxWidth: "100%";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly gap: 4;
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+        readonly boxSizing: "border-box";
+    };
+    closeIcon: (theme: Theme) => {
+        color: `rgba(${number}, ${number}, ${number}, 0.8)` | `rgba(${number}, ${number}, ${number}, 0.3)`;
+        cursor: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        ":hover": {
+            color: "#FFFFFF" | `rgba(${number}, ${number}, ${number}, 0.7)`;
+        };
+    };
+};

package/dist/components/Tag/Tag.styles.js

@@ -0,0 +1,52 @@
+import { getOutlinedColorFeatures, getFilledColorFeatures } from "./Tag.utils.js";
+const getOutlinedFeaturesByColor = (theme, color) => {
+  const outlinedFeatures = getOutlinedColorFeatures(theme);
+  return outlinedFeatures[color];
+};
+const getFilledFeaturesByColor = (theme, color) => {
+  const filledFeatures = getFilledColorFeatures(theme);
+  return {
+    ...filledFeatures[color],
+    color: theme.textContrast
+  };
+};
+const getTagDefaultStyle = ({
+  color,
+  type
+}) => {
+  const isOutlined = type === "outlined";
+  return {
+    wrapper: (theme) => {
+      const generalStyles = {
+        height: theme.x5,
+        maxWidth: "100%",
+        display: "inline-flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: theme.marginXS,
+        padding: `0px ${theme.paddingM}px`,
+        borderRadius: theme.borderRadiusM,
+        boxSizing: "border-box",
+        ...theme.typography.body3
+      };
+      const colorFeatures = isOutlined ? getOutlinedFeaturesByColor(theme, color) : getFilledFeaturesByColor(theme, color);
+      return {
+        ...generalStyles,
+        ...colorFeatures
+      };
+    },
+    closeIcon: (theme) => ({
+      color: isOutlined ? theme.textIcon : theme.textIconContrast,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ":hover": {
+        color: isOutlined ? theme.textIconHover : theme.textIconContrastHover
+      }
+    })
+  };
+};
+export {
+  getTagDefaultStyle
+};

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

@@ -0,0 +1,23 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from '../../themes';
+import { TagComponent } from './Tag';
+import { Checkable } from './components/Checkable/Checkable';
+import { HTMLAttributes, ReactNode } from 'react';
+export type TagColor = "neutral" | "red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "magenta";
+export type TagType = "outlined" | "filled";
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: TagColor;
+    type?: TagType;
+    closable?: boolean;
+    className?: string;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        closeIcon?: (theme: Theme) => Interpolation;
+    };
+    onClose?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    children?: ReactNode | string;
+}
+export type TagDefaultStylesProps = Required<Pick<TagProps, "color" | "type">>;
+export type TagFullType = typeof TagComponent & {
+    Checkable: typeof Checkable;
+};

package/dist/components/Tag/Tag.utils.d.ts

@@ -0,0 +1,86 @@
+import { Theme } from 'themes';
+export declare const getOutlinedColorFeatures: (theme: Theme) => {
+    neutral: {
+        background: "#F5F5F5";
+        color: "#262626";
+        border: string;
+    };
+    red: {
+        background: "#FFF1F0";
+        color: "#F5222D";
+        border: string;
+    };
+    orange: {
+        background: "#FFF7E6";
+        color: "#FA8C16";
+        border: string;
+    };
+    yellow: {
+        background: "#FEFFE6";
+        color: "#D4B106";
+        border: string;
+    };
+    green: {
+        background: "#F6FFED";
+        color: "#52C41A";
+        border: string;
+    };
+    cyan: {
+        background: "#E6FFFB";
+        color: "#13C2C2";
+        border: string;
+    };
+    blue: {
+        background: "#E6F4FF";
+        color: "#1677FF";
+        border: string;
+    };
+    purple: {
+        background: "#F9F0FF";
+        color: "#722ED1";
+        border: string;
+    };
+    magenta: {
+        background: "#FFF0F6";
+        color: "#EB2F96";
+        border: string;
+    };
+};
+export declare const getFilledColorFeatures: (theme: Theme) => {
+    neutral: {
+        background: "#8C8C8C";
+        border: string;
+    };
+    red: {
+        background: "#F5222D";
+        border: string;
+    };
+    orange: {
+        background: "#FA8C16";
+        border: string;
+    };
+    yellow: {
+        background: "#D4B106";
+        border: string;
+    };
+    green: {
+        background: "#52C41A";
+        border: string;
+    };
+    cyan: {
+        background: "#13C2C2";
+        border: string;
+    };
+    blue: {
+        background: "#1677FF";
+        border: string;
+    };
+    purple: {
+        background: "#722ED1";
+        border: string;
+    };
+    magenta: {
+        background: "#EB2F96";
+        border: string;
+    };
+};

package/dist/components/Tag/Tag.utils.js

@@ -0,0 +1,90 @@
+const checkedBorder = `1px solid transparent`;
+const getOutlinedColorFeatures = (theme) => ({
+  neutral: {
+    background: theme.tagNeutralBg,
+    color: theme.tagNeutralText,
+    border: `1px solid ${theme.tagNeutralBorder}`
+  },
+  red: {
+    background: theme.tagRedBg,
+    color: theme.tagRedText,
+    border: `1px solid ${theme.tagRedBorder}`
+  },
+  orange: {
+    background: theme.tagOrangeBg,
+    color: theme.tagOrangeText,
+    border: `1px solid ${theme.tagOrangeBorder}`
+  },
+  yellow: {
+    background: theme.tagYellowBg,
+    color: theme.tagYellowText,
+    border: `1px solid ${theme.tagYellowBorder}`
+  },
+  green: {
+    background: theme.tagGreenBg,
+    color: theme.tagGreenText,
+    border: `1px solid ${theme.tagGreenBorder}`
+  },
+  cyan: {
+    background: theme.tagCyanBg,
+    color: theme.tagCyanText,
+    border: `1px solid ${theme.tagCyanBorder}`
+  },
+  blue: {
+    background: theme.tagBlueBg,
+    color: theme.tagBlueText,
+    border: `1px solid ${theme.tagBlueBorder}`
+  },
+  purple: {
+    background: theme.tagPurpleBg,
+    color: theme.tagPurpleText,
+    border: `1px solid ${theme.tagPurpleBorder}`
+  },
+  magenta: {
+    background: theme.tagMagentaBg,
+    color: theme.tagMagentaText,
+    border: `1px solid ${theme.tagMagentaBorder}`
+  }
+});
+const getFilledColorFeatures = (theme) => ({
+  neutral: {
+    background: theme.tagNeutralContrast,
+    border: checkedBorder
+  },
+  red: {
+    background: theme.tagRedContrast,
+    border: checkedBorder
+  },
+  orange: {
+    background: theme.tagOrangeContrast,
+    border: checkedBorder
+  },
+  yellow: {
+    background: theme.tagYellowContrast,
+    border: checkedBorder
+  },
+  green: {
+    background: theme.tagGreenContrast,
+    border: checkedBorder
+  },
+  cyan: {
+    background: theme.tagCyanContrast,
+    border: checkedBorder
+  },
+  blue: {
+    background: theme.tagBlueContrast,
+    border: checkedBorder
+  },
+  purple: {
+    background: theme.tagPurpleContrast,
+    border: checkedBorder
+  },
+  magenta: {
+    background: theme.tagMagentaContrast,
+    border: checkedBorder
+  }
+});
+export {
+  getFilledColorFeatures,
+  getOutlinedColorFeatures
+};

package/dist/components/Tag/components/AddTagController/AddTagController.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { AddTagControllerProps } from './AddTagController.types';
+export declare const AddTagController: FC<AddTagControllerProps>;

package/dist/components/Tag/components/AddTagController/AddTagController.styles.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from 'themes';
+export declare const getNewTagDefaultStyle: () => {
+    input: (theme: Theme) => {
+        width: number;
+        borderRadius: 4;
+        padding: string;
+        border: string;
+        boxShadow: string;
+        outline: "#0CB3B3";
+    };
+    tag: (theme: Theme) => {
+        borderStyle: string;
+        background: "#FFFFFF";
+    };
+};

package/dist/components/Tag/components/AddTagController/AddTagController.types.d.ts

@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from 'react';
+export interface AddTagControllerProps extends InputHTMLAttributes<HTMLInputElement> {
+    title: string;
+    onConfirm?: (value: string) => void;
+}
+export interface TagItemInterface {
+    tag: string;
+    id: string;
+}
+export interface RenderTagProps {
+    content: TagItemInterface;
+    onClose: (removedTagItem: TagItemInterface) => void;
+}

package/dist/components/Tag/components/AddTagController/forStories/utilsForStories.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { AddTagControllerProps } from '../AddTagController.types';
+export declare const TagList: FC<AddTagControllerProps>;

package/dist/components/Tag/components/Checkable/Checkable.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import { CheckableProps } from './Checkable.types';
+export declare const CheckableComponent: FC<PropsWithChildren<CheckableProps>>;
+export declare const Checkable: FC<PropsWithChildren<CheckableProps>>;

package/dist/components/Tag/components/Checkable/Checkable.js

@@ -0,0 +1,34 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { withThemeProvider } from "../../../../hocs/withThemeProvider.js";
+import { memo, useState, useRef } from "react";
+import { isUndefined } from "lodash-es";
+import { getCheckableStyle } from "./Checkable.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const CheckableComponent = memo(({
+  checked,
+  defaultChecked = false,
+  onChange,
+  onClick,
+  children,
+  styles
+}) => {
+  var _a;
+  const theme = useTheme();
+  const [localChecked, setLocalChecked] = useState(defaultChecked);
+  const currentChecked = useRef(checked ?? localChecked);
+  currentChecked.current = checked ?? localChecked;
+  const checkableStyle = getCheckableStyle(currentChecked.current);
+  const handleClick = (e) => {
+    if (isUndefined(checked)) {
+      setLocalChecked((prev) => !prev);
+      onChange == null ? void 0 : onChange(!localChecked);
+    }
+    onClick == null ? void 0 : onClick(currentChecked.current, e);
+  };
+  return /* @__PURE__ */ jsx("span", { css: [checkableStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:CheckableComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL2NvbXBvbmVudHMvQ2hlY2thYmxlL0NoZWNrYWJsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFnL2NvbXBvbmVudHMvQ2hlY2thYmxlL0NoZWNrYWJsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB3aXRoVGhlbWVQcm92aWRlciB9IGZyb20gXCJob2NzL3dpdGhUaGVtZVByb3ZpZGVyXCI7XG5pbXBvcnQgeyB0eXBlIEZDLCBtZW1vLCB0eXBlIE1vdXNlRXZlbnQsIHR5cGUgUHJvcHNXaXRoQ2hpbGRyZW4sIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgQ2hlY2thYmxlUHJvcHMgfSBmcm9tIFwiLi9DaGVja2FibGUudHlwZXNcIjtcbmltcG9ydCB7IGlzVW5kZWZpbmVkIH0gZnJvbSBcImxvZGFzaC1lc1wiO1xuaW1wb3J0IHsgZ2V0Q2hlY2thYmxlU3R5bGUgfSBmcm9tIFwiLi9DaGVja2FibGUuc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuXG5leHBvcnQgY29uc3QgQ2hlY2thYmxlQ29tcG9uZW50OiBGQzxQcm9wc1dpdGhDaGlsZHJlbjxDaGVja2FibGVQcm9wcz4+ID0gbWVtbyhcbiAgKHsgY2hlY2tlZCwgZGVmYXVsdENoZWNrZWQgPSBmYWxzZSwgb25DaGFuZ2UsIG9uQ2xpY2ssIGNoaWxkcmVuLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBbbG9jYWxDaGVja2VkLCBzZXRMb2NhbENoZWNrZWRdID0gdXNlU3RhdGUoZGVmYXVsdENoZWNrZWQpO1xuXG4gICAgY29uc3QgY3VycmVudENoZWNrZWQgPSB1c2VSZWYoY2hlY2tlZCA/PyBsb2NhbENoZWNrZWQpO1xuXG4gICAgY3VycmVudENoZWNrZWQuY3VycmVudCA9IGNoZWNrZWQgPz8gbG9jYWxDaGVja2VkO1xuXG4gICAgY29uc3QgY2hlY2thYmxlU3R5bGUgPSBnZXRDaGVja2FibGVTdHlsZShjdXJyZW50Q2hlY2tlZC5jdXJyZW50KTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGU6IE1vdXNlRXZlbnQ8SFRNTFNwYW5FbGVtZW50PikgPT4ge1xuICAgICAgaWYgKGlzVW5kZWZpbmVkKGNoZWNrZWQpKSB7XG4gICAgICAgIHNldExvY2FsQ2hlY2tlZCgocHJldikgPT4gIXByZXYpO1xuICAgICAgICBvbkNoYW5nZT8uKCFsb2NhbENoZWNrZWQpO1xuICAgICAgfVxuXG4gICAgICBvbkNsaWNrPy4oY3VycmVudENoZWNrZWQuY3VycmVudCwgZSk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8c3BhbiBjc3M9e1tjaGVja2FibGVTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX0gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L3NwYW4+XG4gICAgKTtcbiAgfVxuKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrYWJsZSA9IHdpdGhUaGVtZVByb3ZpZGVyPENoZWNrYWJsZVByb3BzPihDaGVja2FibGVDb21wb25lbnQpO1xuIl19 */"], onClick: handleClick, children });
+});
+const Checkable = withThemeProvider(CheckableComponent);
+export {
+  Checkable,
+  CheckableComponent
+};

package/dist/components/Tag/components/Checkable/Checkable.styles.d.ts

@@ -0,0 +1,30 @@
+import { Theme } from 'themes';
+export declare const getCheckableStyle: (checked: boolean) => {
+    wrapper: (theme: Theme) => {
+        readonly transition: "background .3s, border .3s, color .3s";
+        readonly cursor: "pointer";
+        readonly background: "#FFFFFF" | "#0CB3B3";
+        readonly border: string;
+        readonly color: "#262626" | "#FFFFFF";
+        readonly ":hover": {
+            readonly background: "#FFFFFF" | "#50CCC4";
+            readonly border: string;
+            readonly color: "#FFFFFF" | "#50CCC4";
+        };
+        readonly ":active": {
+            readonly background: "#FFFFFF" | "#03888C";
+            readonly border: string;
+            readonly color: "#FFFFFF" | "#03888C";
+        };
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+        readonly height: 20;
+        readonly boxSizing: "border-box";
+        readonly display: "inline-flex";
+        readonly justifyContent: "center";
+        readonly alignItems: "center";
+        readonly padding: "0px 8px";
+        readonly borderRadius: 4;
+    };
+};