colibri-ui 0.7.35 → 0.7.37

package/Theme/themes/default.js

@@ -1,233 +1,87 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var color = require('../color.js');
-var breakpoints = require('../breakpoints.js');
 
-var ButtonThemeDefault = {
-  base: {
-    borderRadius: "26px"
-  },
-  primary: {
-    normal: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.PRIMARY_4,
-      borderColor: color.Color.PRIMARY_4
-    },
-    hovered: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.PRIMARY_5,
-      borderColor: color.Color.PRIMARY_5
-    },
-    focused: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.PRIMARY_5,
-      borderColor: color.Color.PRIMARY_5
-    },
-    active: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.PRIMARY_5,
-      borderColor: color.Color.PRIMARY_5
-    },
-    disabled: {
-      color: color.Color.PRIMARY_2,
-      backgroundColor: color.Color.PRIMARY_1,
-      borderColor: color.Color.PRIMARY_1
-    }
-  },
-  secondary: {
-    normal: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.SECONDARY_4,
-      borderColor: color.Color.SECONDARY_4
-    },
-    hovered: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.SECONDARY_5,
-      borderColor: color.Color.SECONDARY_5
-    },
-    focused: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.SECONDARY_5,
-      borderColor: color.Color.SECONDARY_5
-    },
-    active: {
-      color: color.Color.WHITE,
-      backgroundColor: color.Color.SECONDARY_5,
-      borderColor: color.Color.SECONDARY_5
-    },
-    disabled: {
-      color: color.Color.SECONDARY_2,
-      backgroundColor: color.Color.SECONDARY_1,
-      borderColor: color.Color.SECONDARY_1
-    }
-  },
-  pseudo: {
-    normal: {
-      color: color.Color.TRETIARY_5,
-      backgroundColor: color.Color.WHITE,
-      borderColor: color.Color.WHITE
-    },
-    hovered: {
-      color: color.Color.TRETIARY_5,
-      backgroundColor: color.Color.TRETIARY_2,
-      borderColor: color.Color.TRETIARY_2
-    },
-    active: {
-      color: color.Color.TRETIARY_5,
-      backgroundColor: color.Color.TRETIARY_2,
-      borderColor: color.Color.TRETIARY_2
-    },
-    disabled: {
-      color: color.Color.TRETIARY_3,
-      backgroundColor: color.Color.TRETIARY_1,
-      borderColor: color.Color.TRETIARY_1
-    }
-  },
-  clear: {
-    normal: {
-      color: color.Color.PRIMARY_4,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    hovered: {
-      color: color.Color.PRIMARY_5,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    active: {
-      color: color.Color.PRIMARY_5,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    disabled: {
-      color: color.Color.BG_3,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    }
-  }
-};
-var InputThemeDefault = {
-  placeholder: {
-    color: color.Color.BG_2
-  },
-  primary: {
-    normal: {
-      borderColor: color.Color.BG_3
-    },
-    hovered: {
-      borderColor: color.Color.PRIMARY_3,
-      boxShadow: "0px 0px 0px 2px ".concat(color.Color.PRIMARY_2)
-    },
-    focused: {
-      borderColor: color.Color.PRIMARY_4
-    },
-    disabled: {
-      color: color.Color.BG_3,
-      backgroundColor: color.Color.BG_1,
-      borderColor: color.Color.BG_3
-    },
-    error: {
-      normal: {
-        backgroundColor: color.Color.TRETIARY_2,
-        borderColor: color.Color.ALERT
-      },
-      hovered: {
-        backgroundColor: color.Color.WHITE,
-        borderColor: color.Color.ALERT,
-        boxShadow: "0px 0px 0px 2px ".concat(color.Color.TRETIARY_2)
-      },
-      focused: {
-        backgroundColor: color.Color.WHITE,
-        borderColor: color.Color.ALERT
-      }
-    }
-  }
-};
-var CheckboxThemeDefault = {
-  primary: {
-    normal: {
-      backgroundColor: color.Color.PRIMARY_4
-    },
-    hovered: {
-      backgroundColor: color.Color.PRIMARY_4
-    },
-    focused: {
-      boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_1)
-    },
-    checked: {
-      backgroundColor: color.Color.PRIMARY_4
-    },
-    active: {
-      backgroundColor: color.Color.PRIMARY_4,
-      borderColor: color.Color.PRIMARY_4,
-      boxShadow: color.Color.PRIMARY_4
-    },
-    disabled: {
-      backgroundColor: color.Color.BG_1
-    }
-  }
-};
-var TypographyThemeDefault = {
-  alert: {
-    color: color.Color.ALERT
-  },
-  success: {
-    color: color.Color.SUCCESS
-  },
-  secondary: {
-    color: color.Color.BG_3
-  }
-};
-var SwitchThemeDefault = {
-  circle: {
-    backgroundColor: color.Color.WHITE
-  },
-  state: {
-    normal: {
-      backgroundColor: color.Color.BG_2,
-      borderColor: color.Color.BG_2
-    },
-    checked: {
-      backgroundColor: color.Color.PRIMARY_5,
-      borderColor: color.Color.PRIMARY_5
-    }
-  }
-};
-var MenuThemeDefault = {
-  primary: {
-    normal: {
-      backgroundColor: color.Color.WHITE
-    },
-    hovered: {
-      backgroundColor: color.Color.PRIMARY_2
-    },
-    focused: {
-      backgroundColor: color.Color.PRIMARY_2
-    },
-    selected: {
-      backgroundColor: color.Color.PRIMARY_2
-    },
-    disabled: {
-      color: color.Color.BG_2,
-      backgroundColor: color.Color.WHITE
-    }
-  }
-};
 var THEME_DEFAULT = {
-  breakpoints: breakpoints.default,
-  button: ButtonThemeDefault,
-  menu: MenuThemeDefault,
-  input: InputThemeDefault,
-  checkbox: CheckboxThemeDefault,
-  typography: TypographyThemeDefault,
-  "switch": SwitchThemeDefault,
-  palette: color.Color
+  "palette-black": color.Color.BLACK,
+  "palette-white": color.Color.WHITE,
+  "palette-bg-1": color.Color.BG_1,
+  "palette-bg-2": color.Color.BG_2,
+  "palette-bg-3": color.Color.BG_3,
+  "palette-bg-4": color.Color.BG_4,
+  "palette-bg-5": color.Color.BG_5,
+  "palette-brand-default-1": color.Color.BRAND_DEFAULT_1,
+  "palette-brand-default-2": color.Color.BRAND_DEFAULT_2,
+  "palette-brand-default-3": color.Color.BRAND_DEFAULT_3,
+  "palette-primary-1": color.Color.PRIMARY_1,
+  "palette-primary-2": color.Color.PRIMARY_2,
+  "palette-primary-3": color.Color.PRIMARY_3,
+  "palette-primary-4": color.Color.PRIMARY_4,
+  "palette-primary-5": color.Color.PRIMARY_5,
+  "palette-tretiary-1": color.Color.TRETIARY_1,
+  "palette-tretiary-2": color.Color.TRETIARY_2,
+  "palette-tretiary-3": color.Color.TRETIARY_3,
+  "palette-tretiary-4": color.Color.TRETIARY_4,
+  "palette-tretiary-5": color.Color.TRETIARY_5,
+  "palette-alert": color.Color.ALERT,
+  "typography-alert": color.Color.ALERT,
+  "typography-success": color.Color.SUCCESS,
+  "typography-secondary": color.Color.BG_3,
+  "button-border-radius": "26px",
+  "button-primary-color": color.Color.WHITE,
+  "button-primary-background-color": color.Color.PRIMARY_4,
+  "button-primary-border-color": color.Color.PRIMARY_4,
+  "button-primary-color-hovered": color.Color.WHITE,
+  "button-primary-background-color-hovered": color.Color.PRIMARY_5,
+  "button-primary-border-color-hovered": color.Color.PRIMARY_5,
+  "button-primary-color-active": color.Color.WHITE,
+  "button-primary-background-color-active": color.Color.PRIMARY_5,
+  "button-primary-border-color-active": color.Color.PRIMARY_5,
+  "button-primary-color-disabled": color.Color.PRIMARY_2,
+  "button-primary-background-color-disabled": color.Color.PRIMARY_1,
+  "button-primary-border-color-disabled": color.Color.PRIMARY_1,
+  "button-secondary-color": color.Color.WHITE,
+  "button-secondary-background-color": color.Color.SECONDARY_4,
+  "button-secondary-border-color": color.Color.SECONDARY_4,
+  "button-secondary-color-hovered": color.Color.WHITE,
+  "button-secondary-background-color-hovered": color.Color.SECONDARY_5,
+  "button-secondary-border-color-hovered": color.Color.SECONDARY_5,
+  "button-secondary-color-active": color.Color.WHITE,
+  "button-secondary-background-color-active": color.Color.SECONDARY_5,
+  "button-secondary-border-color-active": color.Color.SECONDARY_5,
+  "button-secondary-color-disabled": color.Color.SECONDARY_2,
+  "button-secondary-background-color-disabled": color.Color.SECONDARY_1,
+  "button-secondary-border-color-disabled": color.Color.SECONDARY_1,
+  "button-pseudo-color": color.Color.TRETIARY_5,
+  "button-pseudo-background-color": color.Color.WHITE,
+  "button-pseudo-border-color": color.Color.WHITE,
+  "button-pseudo-color-hovered": color.Color.TRETIARY_5,
+  "button-pseudo-background-color-hovered": color.Color.TRETIARY_2,
+  "button-pseudo-border-color-hovered": color.Color.TRETIARY_2,
+  "button-pseudo-color-active": color.Color.TRETIARY_5,
+  "button-pseudo-background-color-active": color.Color.TRETIARY_2,
+  "button-pseudo-border-color-active": color.Color.TRETIARY_2,
+  "button-pseudo-color-disabled": color.Color.SECONDARY_2,
+  "button-pseudo-background-color-disabled": color.Color.SECONDARY_1,
+  "button-pseudo-border-color-disabled": color.Color.SECONDARY_1,
+  "button-clear-color": color.Color.PRIMARY_4,
+  "button-clear-color-hovered": color.Color.PRIMARY_5,
+  "button-clear-color-active": color.Color.PRIMARY_5,
+  "input-primary-border-color": color.Color.BG_3,
+  "input-primary-plaseholder-color": color.Color.BG_2,
+  "checkbox-primary-background-color-checked": color.Color.PRIMARY_4,
+  "checkbox-primary-background-color-hovered": color.Color.PRIMARY_4,
+  "checkbox-primary-box-shadow-focused": color.Color.PRIMARY_1,
+  "checkbox-primary-background-color-active": color.Color.PRIMARY_4,
+  "checkbox-primary-border-color-active": color.Color.PRIMARY_4,
+  "checkbox-primary-box-shadow-active": color.Color.PRIMARY_4,
+  "checkbox-primary-background-color-disabled": color.Color.PRIMARY_1,
+  "switch-primary-background-color": color.Color.BG_2,
+  "switch-primary-border-color": color.Color.BG_2,
+  "switch-primary-background-color-checked": color.Color.PRIMARY_5,
+  "switch-primary-border-color-checked": color.Color.PRIMARY_5
 };
 
-exports.ButtonThemeDefault = ButtonThemeDefault;
-exports.CheckboxThemeDefault = CheckboxThemeDefault;
-exports.InputThemeDefault = InputThemeDefault;
-exports.MenuThemeDefault = MenuThemeDefault;
-exports.SwitchThemeDefault = SwitchThemeDefault;
-exports.THEME_DEFAULT = THEME_DEFAULT;
-exports.TypographyThemeDefault = TypographyThemeDefault;
+exports.default = THEME_DEFAULT;

package/Typography/Typography.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".root {\n  color: var(--palette-black);\n}\n\n.size_xs {\n  font-size: 12px;\n  line-height: 16px;\n}\n.size_s {\n  font-size: 14px;\n  line-height: 18px;\n}\n.size_m {\n  font-size: 16px;\n  line-height: 22px;\n}\n.size_l {\n  font-size: 18px;\n  line-height: 28px;\n}\n.size_h1 {\n  font-size: 40px;\n  line-height: 56px;\n}\n.size_h2 {\n  font-size: 32px;\n  line-height: 40px;\n}\n.size_h3 {\n  font-size: 24px;\n  line-height: 32px;\n}\n.size_h4 {\n  font-size: 20px;\n  line-height: 28px;\n}\n.size_h5 {\n  font-size: 16px;\n  line-height: 24px;\n}\n.size_h6 {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.fontWeight_normal {\n  font-weight: 400;\n}\n.fontWeight_medium {\n  font-weight: 500;\n}\n.fontWeight_bold {\n  font-weight: 700;\n}\n\n.variant_alert {\n  color: var(--typography-alert);\n}\n.variant_success {\n  color: var(--typography-success);\n}\n.variant_secondary {\n  color: var(--typography-secondary);\n}";
+
+exports.default = styles;

package/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { type TypographyProps } from "./index.props";
+import { type Props } from "./index.props";
 import type { FC, PropsWithChildren } from "react";
-declare const Typography: FC<PropsWithChildren<TypographyProps>>;
+declare const Typography: FC<PropsWithChildren<Props>>;
 export default Typography;

package/Typography/index.js

@@ -3,40 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var styles = require('./styles.js');
+var classNames = require('classnames/bind');
+var Typography_module = require('./Typography.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Typography_module.default);
 var Typography = function Typography(_a) {
-  var _b = _a.tag,
-    Element = _b === void 0 ? "span" : _b,
+  var _b;
+  var _c = _a.tag,
+    Element = _c === void 0 ? "span" : _c,
     children = _a.children,
     variant = _a.variant,
     size = _a.size,
     fontWeight = _a.fontWeight,
-    className = _a.className;
-  var isNotComponent = typeof children === "string";
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var child = React.useMemo(function () {
-    return React.Children.only(isNotComponent ? jsxRuntime.jsx(Element, {
-      children: children
-    }) : children);
-  }, [children, Element, isNotComponent]);
-  var Component = React.useMemo(function () {
-    return styles.BaseTypography.withComponent(child.type, process.env.NODE_ENV === "production" ? {
-      target: "en3tlk10"
-    } : {
-      target: "en3tlk10",
-      label: "Component"
-    });
-  }, [child.type]);
-  return jsxRuntime.jsx(Component, tslib.__assign({}, child.props, {
-    ref: child.ref,
-    size: size,
-    variant: variant,
-    fontWeight: fontWeight,
-    className: className
-  }));
+    className = _a.className,
+    props = tslib.__rest(_a, ["tag", "children", "variant", "size", "fontWeight", "className"]);
+  return /*#__PURE__*/React__default.default.createElement(Element, tslib.__assign({}, props, {
+    className: clx((_b = {
+      root: true
+    }, _b["size_".concat(size)] = !!size, _b["fontWeight_".concat(fontWeight)] = !!fontWeight, _b["variant_".concat(variant)] = !!variant, _b), className)
+  }), children);
 };
 
 exports.default = Typography;

package/Typography/index.props.d.ts

@@ -1,20 +1,11 @@
-import type { CSSObject } from "@emotion/react";
-type VariantStyles = {
-    color?: CSSObject["color"];
-};
-export type TypographyVariant = {
-    alert: VariantStyles;
-    success: VariantStyles;
-    secondary: VariantStyles;
-};
+export type TypographyVariant = "alert" | "success" | "secondary";
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
-export type TypographyProps = {
+export type Props = {
     className?: string;
     tag?: TypographyTag;
-    variant?: keyof TypographyVariant;
+    variant?: TypographyVariant;
     size?: TypographySize;
     fontWeight?: TypographyFontWeight;
 };
-export {};

package/base/BaseInput/BaseInput.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".baseInput {\n  margin: 7px 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.baseInput ::placeholder {\n  color: var(--palette-bg-2);\n}";
+
+exports.default = styles;

package/base/BaseInput/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const BaseInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default BaseInput;

package/base/BaseInput/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var BaseInput_module = require('./BaseInput.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var BaseInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    onChange = _a.onChange,
+    props = tslib.__rest(_a, ["className", "onChange"]);
+  var onChangeHandler = function onChangeHandler(e) {
+    if (onChange) onChange(e, e.target.value);
+  };
+  return /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
+    className: classNames__default.default(BaseInput_module.default.baseInput, className),
+    onChange: onChangeHandler,
+    ref: ref,
+    type: "text"
+  }, props));
+});
+
+exports.default = BaseInput;

package/base/BaseInput/index.props.d.ts

@@ -0,0 +1,4 @@
+import type { ChangeEvent, InputHTMLAttributes } from "react";
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+}

package/base/FormField/FormField.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}";
+
+exports.default = styles;

package/base/FormField/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { FormFieldProps } from "./index.props";
-declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 export default FormField;

package/base/FormField/index.js

@@ -2,10 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var classNames = require('classnames');
 var index = require('../../Typography/index.js');
-var styles = require('./styles.js');
+var FormField_module = require('./FormField.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -13,18 +18,15 @@ var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children,
     error = _a.error,
     className = _a.className;
-  return jsxRuntime.jsxs(styles.BaseContainer, {
-    className: className,
-    ref: ref,
-    children: [label && jsxRuntime.jsx(index.default, {
-      tag: "label",
-      children: label
-    }), children, hint && jsxRuntime.jsx(index.default, {
-      variant: error ? "alert" : "secondary",
-      tag: "span",
-      children: hint
-    })]
-  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(FormField_module.default.container, className),
+    ref: ref
+  }, label && /*#__PURE__*/React__default.default.createElement(index.default, {
+    tag: "label"
+  }, label), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: error ? "alert" : "secondary",
+    tag: "span"
+  }, hint)));
 });
 
 exports.default = FormField;

package/base/InputRoot/InputRoot.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = ".baseIcon {\n  display: inline-flex;\n  align-items: center;\n  font-size: 16px;\n  color: inherit;\n}\n\n.baseDisableWrapper {\n  position: absolute;\n  left: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  cursor: not-allowed;\n}\n\n.root {\n  background-color: var(--palette-white);\n  color: var(--palette-black);\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  padding: 5px 10px;\n}\n\n.variant_primary {\n  border-color: var(--input-primary-border-color);\n}\n.variant_primary:hover {\n  border-color: var(--palette-primary-3);\n  box-shadow: 0px 0px 0px 2px var(--palette-primary-2);\n}\n.variant_primary:active {\n  border-color: var(--palette-primary-4);\n}\n.variant_primary:focus, .variant_primary:focus-within {\n  border-color: var(--palette-primary-4);\n}\n.variant_primary_disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--palette-bg-3);\n  background-color: var(--palette-bg-1);\n  border-color: var(--palette-bg-3);\n}\n.variant_primary_error {\n  background-color: var(--palette-tretiary-2);\n  border-color: var(--palette-alert);\n}\n.variant_primary_error:hover {\n  background-color: var(--palette-white);\n  border-color: var(--palette-alert);\n  box-shadow: 0px 0px 0px 2px var(--palette-tretiary-2);\n}\n.variant_primary_error:focus, .variant_primary_error:focus-within {\n  border-color: var(--palette-alert);\n  background-color: var(--palette-white);\n}\n\n.size_s {\n  height: 32px;\n}\n.size_m {\n  height: 36px;\n}\n.size_l {\n  height: 42px;\n}";
+
+exports.default = styles;

package/base/InputRoot/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import type { InputProps } from "./index.props";
-declare const InputRoot: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const InputRoot: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
 export default InputRoot;

package/base/InputRoot/index.js

@@ -2,33 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var styles = require('./styles.js');
+var classNames = require('classnames/bind');
+var InputRoot_module = require('./InputRoot.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(InputRoot_module.default);
 var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
   var className = _a.className,
     startIcon = _a.startIcon,
     endIcon = _a.endIcon,
     children = _a.children,
-    _b = _a.variant,
-    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
     error = _a.error,
     size = _a.size;
-  return jsxRuntime.jsxs(styles.BaseInputRoot, {
+  return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
-    className: className,
-    variant: variant,
-    isError: error ? 1 : 0,
-    disabled: disabled,
-    size: size,
-    children: [startIcon && jsxRuntime.jsx(styles.BaseIcon, {
-      children: startIcon
-    }), children, endIcon && jsxRuntime.jsx(styles.BaseIcon, {
-      children: endIcon
-    }), disabled && jsxRuntime.jsx(styles.BaseDisableWrapper, {})]
-  });
+    className: clx(InputRoot_module.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
+  }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(InputRoot_module.default.baseIcon)
+  }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(InputRoot_module.default.baseIcon)
+  }, endIcon), disabled && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(InputRoot_module.default.baseDisableWrapper)
+  }));
 });
 
 exports.default = InputRoot;

package/base/InputRoot/index.props.d.ts

@@ -1,41 +1,13 @@
-import type { CSSObject } from "@emotion/react";
 import type { ReactNode } from "react";
-export type InputSize = "s" | "m" | "l";
-type VariantStyles = {
-    color?: CSSObject["color"];
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-    boxShadow?: CSSObject["boxShadow"];
-};
-type PlaceholderStyles = {
-    color?: CSSObject["color"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    focused?: VariantStyles;
-    active?: VariantStyles;
-    disabled?: VariantStyles;
-    error?: {
-        normal?: VariantStyles;
-        hovered?: VariantStyles;
-        focused?: VariantStyles;
-    };
-};
-export type InputVariant = {
-    primary: VariantStates;
-};
-export type PlaceholderProps = {
-    placeholder: PlaceholderStyles;
-};
+export type Size = "s" | "m" | "l";
+export type Variant = "primary";
 export type InputProps = {
-    variant?: keyof InputVariant;
+    children: ReactNode;
+    variant?: Variant;
     disabled: boolean;
     error?: boolean;
     className?: string;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
-    children: ReactNode;
-    size?: InputSize;
+    size?: Size;
 };
-export {};

package/esm/Badge/Badge.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  position: absolute;\n  z-index: 1;\n  user-select: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  font-size: 12px;\n  border-radius: 10px;\n  background-color: var(--palette-brand-default-1);\n  color: var(--palette-white);\n}\n.root_direction_right {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(60%, -50%);\n}\n.root_direction_left {\n  top: 0;\n  left: 0;\n  transform: scale(1) translate(-60%, -50%);\n}\n.root_invisible {\n  transform: scale(0) translate(50%, -50%);\n}";
+
+export { styles as default };

package/esm/Badge/Control/Control.module.scss.js

@@ -0,0 +1,3 @@
+var styles = ".root {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  vertical-align: middle;\n}";
+
+export { styles as default };