colibri-ui 0.8.65 → 0.8.67

package/CodeField/CodeField.js

@@ -0,0 +1,316 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var tslib = require('tslib');
+var React = require('react');
+var styles = require('./CodeField.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var ONLY_DIGITS_PATTERN = "^\\d+$";
+var ONLY_CHARS_PATTERN = "^[a-zA-Z]+$";
+var ONLY_DIGITS_AND_CHARS_PATTERN = "^[a-zA-Z0-9]+$";
+var cx = function cx() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var getPattern = function getPattern(pattern) {
+  return typeof pattern === "string" ? new RegExp(pattern) : pattern;
+};
+var testSymbol = function testSymbol(pattern, symbol) {
+  pattern.lastIndex = 0;
+  return pattern.test(symbol);
+};
+var getPlaceholder = function getPlaceholder(placeholder, length) {
+  if (!placeholder) return [];
+  return placeholder.length === 1 ? Array(length).fill(placeholder) : placeholder.slice(0, length).split("");
+};
+var CodeField = /*#__PURE__*/React.forwardRef(function CodeFieldComponent(_a, forwardedRef) {
+  var _b;
+  var value = _a.value,
+    placeholder = _a.placeholder,
+    _a$codeLength = _a.codeLength,
+    codeLength = _a$codeLength === void 0 ? 6 : _a$codeLength,
+    caption = _a.caption,
+    _a$captionAlign = _a.captionAlign,
+    captionAlign = _a$captionAlign === void 0 ? "left" : _a$captionAlign,
+    width = _a.width,
+    _a$view = _a.view,
+    view = _a$view === void 0 ? "default" : _a$view,
+    _a$shape = _a.shape,
+    shape = _a$shape === void 0 ? "default" : _a$shape,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? "l" : _a$size,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    _a$isError = _a.isError,
+    isError = _a$isError === void 0 ? false : _a$isError,
+    setIsError = _a.setIsError,
+    _a$allowedSymbols = _a.allowedSymbols,
+    allowedSymbols = _a$allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _a$allowedSymbols,
+    _a$itemErrorBehavior = _a.itemErrorBehavior,
+    itemErrorBehavior = _a$itemErrorBehavior === void 0 ? "remove-symbol" : _a$itemErrorBehavior,
+    _a$codeErrorBehavior = _a.codeErrorBehavior,
+    codeErrorBehavior = _a$codeErrorBehavior === void 0 ? "remove-code" : _a$codeErrorBehavior,
+    _a$autoComplete = _a.autoComplete,
+    autoComplete = _a$autoComplete === void 0 ? "one-time-code" : _a$autoComplete,
+    _a$inputMode = _a.inputMode,
+    inputMode = _a$inputMode === void 0 ? "numeric" : _a$inputMode,
+    autoFocus = _a.autoFocus,
+    className = _a.className,
+    style = _a.style,
+    onChange = _a.onChange,
+    onFullCodeEnter = _a.onFullCodeEnter,
+    onClick = _a.onClick,
+    _onFocus = _a.onFocus,
+    _onBlur = _a.onBlur,
+    _onSelect = _a.onSelect,
+    _onPaste = _a.onPaste,
+    _onKeyDown = _a.onKeyDown,
+    inputProps = tslib.__rest(_a, ["value", "placeholder", "codeLength", "caption", "captionAlign", "width", "view", "shape", "size", "disabled", "isError", "setIsError", "allowedSymbols", "itemErrorBehavior", "codeErrorBehavior", "autoComplete", "inputMode", "autoFocus", "className", "style", "onChange", "onFullCodeEnter", "onClick", "onFocus", "onBlur", "onSelect", "onPaste", "onKeyDown"]);
+  var inputRef = React.useRef(null);
+  var _useState = React.useState((_b = value === null || value === void 0 ? void 0 : value.slice(0, codeLength)) !== null && _b !== void 0 ? _b : ""),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    selectedIndex = _useState6[0],
+    setSelectedIndex = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray__default.default(_useState7, 2),
+    invalidIndex = _useState8[0],
+    setInvalidIndex = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray__default.default(_useState9, 2),
+    shaking = _useState0[0],
+    setShaking = _useState0[1];
+  var completedCode = React.useRef(null);
+  var fullCodeEffectMounted = React.useRef(false);
+  var errorEffectMounted = React.useRef(false);
+  var timerRef = React.useRef(null);
+  var pattern = React.useMemo(function () {
+    return getPattern(allowedSymbols);
+  }, [allowedSymbols]);
+  var currentValue = value === undefined ? internalValue : value.slice(0, codeLength);
+  var placeholders = getPlaceholder(placeholder, codeLength);
+  var items = Array.from({
+    length: codeLength
+  }, function (_, index) {
+    var _a;
+    return (_a = currentValue[index]) !== null && _a !== void 0 ? _a : "";
+  });
+  var setInputRef = function setInputRef(element) {
+    inputRef.current = element;
+    if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
+  };
+  var publishValue = React.useCallback(function (nextValue) {
+    var normalized = nextValue.slice(0, codeLength);
+    if (value === undefined) setInternalValue(normalized);
+    onChange === null || onChange === void 0 ? void 0 : onChange(normalized);
+  }, [codeLength, onChange, value]);
+  var selectPosition = React.useCallback(function (position) {
+    var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : position;
+    var input = inputRef.current;
+    if (!input) return;
+    var safePosition = Math.min(position, currentValue.length, codeLength);
+    input.setSelectionRange(safePosition, Math.min(end, currentValue.length));
+    setActiveIndex(Math.min(safePosition, codeLength - 1));
+    setSelectedIndex(safePosition < end ? Math.min(safePosition, codeLength - 1) : null);
+  }, [codeLength, currentValue.length]);
+  var clearError = React.useCallback(function () {
+    setInvalidIndex(null);
+    setShaking(false);
+    if (isError) setIsError === null || setIsError === void 0 ? void 0 : setIsError(false);
+  }, [isError, setIsError]);
+  var showTemporaryItemError = React.useCallback(function (rawValue, index) {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setInvalidIndex(index);
+    setShaking(true);
+    if (itemErrorBehavior === "keep") {
+      publishValue(rawValue);
+      timerRef.current = setTimeout(function () {
+        return setShaking(false);
+      }, 300);
+      return;
+    }
+    if (value === undefined) setInternalValue(rawValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(rawValue);
+    timerRef.current = setTimeout(function () {
+      var cleaned = rawValue.split("").filter(function (symbol) {
+        return testSymbol(pattern, symbol);
+      }).join("");
+      setInvalidIndex(null);
+      setShaking(false);
+      publishValue(cleaned);
+      requestAnimationFrame(function () {
+        return selectPosition(index);
+      });
+    }, 300);
+  }, [itemErrorBehavior, onChange, pattern, publishValue, selectPosition, value]);
+  React.useEffect(function () {
+    if (value === undefined) setInternalValue(function (current) {
+      return current.slice(0, codeLength);
+    });
+  }, [codeLength, value]);
+  React.useEffect(function () {
+    return function () {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (!fullCodeEffectMounted.current) {
+      fullCodeEffectMounted.current = true;
+      return;
+    }
+    if (currentValue.length !== codeLength) {
+      completedCode.current = null;
+      return;
+    }
+    if (completedCode.current !== currentValue) {
+      completedCode.current = currentValue;
+      onFullCodeEnter === null || onFullCodeEnter === void 0 ? void 0 : onFullCodeEnter(currentValue);
+    }
+  }, [codeLength, currentValue, onFullCodeEnter]);
+  React.useEffect(function () {
+    if (!errorEffectMounted.current) {
+      errorEffectMounted.current = true;
+      return;
+    }
+    if (!isError) return;
+    setShaking(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(function () {
+      setShaking(false);
+      if (codeErrorBehavior === "remove-code") publishValue("");
+      requestAnimationFrame(function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        selectPosition(codeErrorBehavior === "remove-code" ? 0 : codeLength - 1, codeLength);
+      });
+    }, 300);
+  }, [codeErrorBehavior, codeLength, isError, publishValue, selectPosition]);
+  var handleRootClick = function handleRootClick(event) {
+    var _a;
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    if (event.defaultPrevented || disabled) return;
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    selectPosition(currentValue.length);
+  };
+  var rootWidth = typeof width === "number" ? "".concat(width, "rem") : width;
+  var isGrouped = codeLength === 6;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: cx(styles__default.default.root, styles__default.default[view], styles__default.default[size], styles__default.default[shape], disabled && styles__default.default.disabled, className),
+    style: Object.assign(Object.assign({}, style), {
+      width: rootWidth
+    }),
+    onClick: handleRootClick,
+    role: "presentation"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: cx(styles__default.default.code_wrapper, (isError || shaking) && styles__default.default.code_error, shaking && styles__default.default.shaking)
+  }, items.map(function (symbol, index) {
+    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, {
+      key: index
+    }, isGrouped && index === codeLength / 2 && (/*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default.separator
+    })), /*#__PURE__*/React__default.default.createElement("span", {
+      className: cx(styles__default.default.item, activeIndex === index && styles__default.default.focused, selectedIndex === index && styles__default.default.selected, invalidIndex === index && styles__default.default.item_error),
+      "aria-hidden": "true",
+      "data-code-field-item": ""
+    }, /*#__PURE__*/React__default.default.createElement("span", {
+      className: symbol ? styles__default.default.value : styles__default.default.placeholder
+    }, symbol || placeholders[index] || ""), activeIndex === index && selectedIndex === null && (/*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default.caret
+    }))));
+  }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, inputProps, {
+    ref: setInputRef,
+    className: styles__default.default.native_input,
+    type: "text",
+    value: currentValue,
+    minLength: codeLength,
+    maxLength: codeLength,
+    autoComplete: autoComplete,
+    inputMode: inputMode,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    spellCheck: false,
+    onChange: function onChange(event) {
+      if (disabled) return;
+      var rawValue = event.currentTarget.value.slice(0, codeLength);
+      var nextInvalidIndex = rawValue.split("").findIndex(function (symbol) {
+        return !testSymbol(pattern, symbol);
+      });
+      clearError();
+      if (nextInvalidIndex < 0) publishValue(rawValue);else if (itemErrorBehavior === "forbid-enter") {
+        var cleaned = rawValue.split("").filter(function (symbol) {
+          return testSymbol(pattern, symbol);
+        }).join("");
+        publishValue(cleaned);
+        requestAnimationFrame(function () {
+          return selectPosition(nextInvalidIndex);
+        });
+      } else showTemporaryItemError(rawValue, nextInvalidIndex);
+    },
+    onPaste: function onPaste(event) {
+      var _a, _b;
+      _onPaste === null || _onPaste === void 0 ? void 0 : _onPaste(event);
+      if (event.defaultPrevented || disabled) return;
+      event.preventDefault();
+      var pasted = event.clipboardData.getData("text/plain").split("").filter(function (symbol) {
+        return testSymbol(pattern, symbol);
+      });
+      var start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0;
+      var end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
+      var nextValue = (pasted.length >= codeLength ? pasted.join("") : "".concat(currentValue.slice(0, start)).concat(pasted.join("")).concat(currentValue.slice(end))).slice(0, codeLength);
+      clearError();
+      publishValue(nextValue);
+      requestAnimationFrame(function () {
+        return selectPosition(Math.min(start + pasted.length, nextValue.length));
+      });
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (!disabled && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Delete"].includes(event.key)) {
+        event.preventDefault();
+      }
+      _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+    },
+    onFocus: function onFocus(event) {
+      selectPosition(currentValue.length);
+      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+    },
+    onBlur: function onBlur(event) {
+      setActiveIndex(null);
+      setSelectedIndex(null);
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+    },
+    onSelect: function onSelect(event) {
+      var _a, _b;
+      var start = (_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : currentValue.length;
+      var end = (_b = event.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : start;
+      setActiveIndex(Math.min(start, codeLength - 1));
+      setSelectedIndex(start < end ? Math.min(start, codeLength - 1) : null);
+      _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(event);
+    }
+  }))), caption && (/*#__PURE__*/React__default.default.createElement("div", {
+    className: cx(styles__default.default.caption, isError && styles__default.default.caption_error),
+    style: {
+      textAlign: captionAlign,
+      alignSelf: captionAlign === "left" ? "flex-start" : "center"
+    }
+  }, caption)));
+});
+
+exports.CodeField = CodeField;
+exports.ONLY_CHARS_PATTERN = ONLY_CHARS_PATTERN;
+exports.ONLY_DIGITS_AND_CHARS_PATTERN = ONLY_DIGITS_AND_CHARS_PATTERN;
+exports.ONLY_DIGITS_PATTERN = ONLY_DIGITS_PATTERN;

package/CodeField/CodeField.module.css

@@ -0,0 +1,211 @@
+.root {
+  --code-field-background: var(--component-input-bg, transparent);
+  --code-field-background-disabled: var(--component-input-bg-disabled);
+  --code-field-background-focus: var(--component-input-bg, transparent);
+  --code-field-background-hover: var(--component-input-bg, transparent);
+  --code-field-border-color: var(--component-input-border);
+  --code-field-border-disabled-color: var(--component-input-border-disabled);
+  --code-field-border-focus-color: var(--component-input-border-focus);
+  --code-field-border-hover-color: var(--component-input-border-hover);
+  --code-field-caption-color: var(--color-text-secondary);
+  --code-field-caret-color: var(--component-input-border-focus);
+  --code-field-color: var(--component-input-text);
+  --code-field-disabled-color: var(--component-input-text-disabled);
+  --code-field-error-color: var(--component-input-border-error);
+  --code-field-error-helper-color: var(
+    --component-input-helper-error,
+    var(--code-field-error-color)
+  );
+  --code-field-focus-ring-color: var(--component-input-focus-ring);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family-ui);
+  justify-content: center;
+  width: min-content;
+}
+
+.code_wrapper {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+  position: relative;
+}
+
+.item {
+  align-items: center;
+  background: var(--code-field-background);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--code-field-border-color);
+  box-sizing: border-box;
+  color: var(--code-field-color);
+  display: flex;
+  flex: none;
+  font-weight: 600;
+  height: var(--code-field-height);
+  justify-content: center;
+  pointer-events: none;
+  position: relative;
+  text-align: center;
+  width: var(--code-field-width);
+}
+
+.code_error .item,
+.item_error {
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--code-field-error-color) !important;
+  color: var(--code-field-error-color);
+}
+
+.disabled .item {
+  background: var(--code-field-background-disabled);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--code-field-border-disabled-color);
+  color: var(--code-field-disabled-color);
+}
+
+.default .item {
+  border-radius: var(--code-field-radius);
+}
+
+.segmented .item {
+  border-radius: var(--code-field-segmented-radius);
+}
+
+.segmented .item:first-of-type {
+  border-radius: var(--code-field-radius) var(--code-field-segmented-radius) var(--code-field-segmented-radius) var(--code-field-radius);
+}
+
+.segmented .item:last-of-type {
+  border-radius: var(--code-field-segmented-radius) var(--code-field-radius) var(--code-field-radius) var(--code-field-segmented-radius);
+}
+
+.m {
+  --code-field-height: var(--component-code-field-height-m);
+  --code-field-radius: var(--radius-sm);
+  --code-field-segmented-radius: var(--radius-xs);
+  --code-field-width: var(--component-code-field-width-m);
+  font-size: var(--component-code-field-font-size-m);
+  gap: var(--space-3);
+}
+
+.l {
+  --code-field-height: var(--component-code-field-height-l);
+  --code-field-radius: var(--radius-sm);
+  --code-field-segmented-radius: var(--radius-xs);
+  --code-field-width: var(--component-code-field-width-l);
+  font-size: var(--component-code-field-font-size-l);
+  gap: var(--space-3);
+}
+
+.xl {
+  --code-field-height: var(--component-code-field-height-xl);
+  --code-field-radius: var(--radius-sm);
+  --code-field-segmented-radius: var(--radius-xs);
+  --code-field-width: var(--component-code-field-width-xl);
+  font-size: var(--component-code-field-font-size-xl);
+  gap: var(--space-3);
+}
+
+.separator {
+  width: var(--component-code-field-separator-width);
+}
+
+.value {
+  position: relative;
+}
+
+.placeholder {
+  opacity: 0.54;
+}
+
+.caret {
+  animation: caret-blink 1s step-end infinite;
+  background: var(--code-field-caret-color);
+  height: 1em;
+  position: absolute;
+  width: var(--component-code-field-caret-width);
+}
+
+.selected .value {
+  background: highlight;
+  color: highlighttext;
+}
+
+.native_input {
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  caret-color: transparent;
+  color: transparent;
+  cursor: text;
+  font-size: var(--code-field-height);
+  height: 100%;
+  inset: 0;
+  letter-spacing: -0.5em;
+  line-height: 1;
+  outline: 0;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.native_input::selection {
+  background: transparent;
+  color: transparent;
+}
+
+.caption {
+  color: var(--code-field-caption-color);
+  font-size: var(--component-code-field-caption-font-size);
+  font-weight: 400;
+  white-space: pre-line;
+  width: 100%;
+}
+
+.caption_error {
+  color: var(--code-field-error-helper-color);
+}
+
+.shaking {
+  animation: shaking-error 0.3s;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.disabled .native_input {
+  cursor: not-allowed;
+}
+
+.root:hover:not(.disabled) .item {
+  background: var(--code-field-background-hover);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--code-field-border-hover-color);
+}
+
+.root:focus-within .focused {
+  background: var(--code-field-background-focus);
+  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--code-field-border-focus-color), 0 0 0 var(--focus-ring-width) var(--code-field-focus-ring-color);
+}
+
+@keyframes caret-blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  50.01%, 100% {
+    opacity: 0;
+  }
+}
+@keyframes shaking-error {
+  20%, 60% {
+    transform: translateX(-0.125rem);
+  }
+  40%, 80% {
+    transform: translateX(0.125rem);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .caret,
+  .shaking {
+    animation: none;
+  }
+}

package/CodeField/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeField as default, CodeField, ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, } from "./CodeField";
+export type { CodeFieldProps, CodeFieldShape, CodeFieldSize, ItemErrorBehavior, CodeErrorBehavior, } from "./CodeField";

package/CodeField/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CodeField = require('./CodeField.js');
+
+
+
+exports.CodeField = CodeField.CodeField;
+exports.ONLY_CHARS_PATTERN = CodeField.ONLY_CHARS_PATTERN;
+exports.ONLY_DIGITS_AND_CHARS_PATTERN = CodeField.ONLY_DIGITS_AND_CHARS_PATTERN;
+exports.ONLY_DIGITS_PATTERN = CodeField.ONLY_DIGITS_PATTERN;
+exports.default = CodeField.CodeField;

package/CodeField/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/CodeField/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Counter/Counter.module.css

@@ -1,11 +1,12 @@
 .root {
-  background-color: var(--palette-white);
-  block-size: 40px;
-  border-radius: 4px;
+  background-color: var(--component-counter-bg);
+  block-size: var(--component-counter-block-size);
+  border-radius: var(--component-counter-radius);
   box-sizing: border-box;
+  color: var(--component-counter-text);
   display: inline-block;
-  font-size: 16px;
-  min-inline-size: 96px;
+  font-size: var(--component-control-font-size);
+  min-inline-size: var(--component-counter-min-inline-size);
   overflow: hidden;
   position: relative;
 }
@@ -15,9 +16,9 @@
 
 .control {
   align-items: center;
-  block-size: 38px;
+  block-size: var(--component-counter-control-block-size);
   display: flex;
-  gap: 4px;
+  gap: var(--space-1);
   justify-content: space-between;
 }
 .control_fullWidth {
@@ -25,9 +26,9 @@
 }
 
 .value {
-  font-size: 18px;
-  font-weight: 500;
-  inline-size: 24px;
+  font-size: var(--font-size-text-lg);
+  font-weight: var(--font-weight-medium, 500);
+  inline-size: var(--component-counter-value-inline-size);
   text-align: center;
   user-select: none;
 }

package/Datepicker/Datepicker.module.css

@@ -1,4 +1,4 @@
 .root {
   display: flex;
-  font-size: 14px;
+  font-size: var(--font-size-text-sm);
 }

package/Datepicker/components/DatePicker/index.module.css

@@ -1,12 +1,13 @@
 .input-container {
   align-items: center;
-  border: 1px solid var(--palette-bg-3);
-  border-bottom-right-radius: 0.375rem;
+  background-color: var(--component-input-bg);
+  border: var(--border-width-hairline) solid var(--component-input-border);
+  border-bottom-right-radius: var(--component-input-radius);
   border-left: none;
-  border-top-right-radius: 0.375rem;
+  border-top-right-radius: var(--component-input-radius);
   box-sizing: border-box;
   display: flex;
-  height: 36px;
+  height: var(--component-input-height-m);
   justify-content: center;
 }
 
@@ -16,41 +17,46 @@
   box-sizing: border-box;
   height: 100%;
   outline: none;
-  padding: 4px;
+  padding: var(--space-1);
   text-align: center;
   width: 100%;
 }
 
 .input-date {
-  border-bottom: 1px solid var(--palette-bg-3);
-  border-right: 1px solid var(--palette-bg-3);
-  border-top: 1px solid var(--palette-bg-3);
+  border-bottom: var(--border-width-hairline) solid var(--component-input-border);
+  border-right: var(--border-width-hairline) solid var(--component-input-border);
+  border-top: var(--border-width-hairline) solid var(--component-input-border);
+  color: var(--component-input-text);
   cursor: pointer;
   flex: 3;
   position: relative;
 }
 
+.input-date:hover {
+  border-color: var(--component-input-border-hover);
+}
+
 .input-date:focus-within {
-  border-color: var(--palette-primary-3);
-  box-shadow: 0 0 0 2px var(--palette-primary-2);
+  border-color: var(--component-input-border-focus);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--component-input-focus-ring);
 }
 
 .input-date:focus-within::before {
-  background-color: var(--palette-primary-3);
+  background-color: var(--component-input-border-focus);
   content: "";
   height: 100%;
   left: 0;
   position: absolute;
-  width: 1px;
+  width: var(--border-width-hairline);
 }
 
 .calendar {
-  max-width: 250px;
+  max-width: var(--component-date-picker-calendar-max-width);
 }
 
 .calendar-icon {
   cursor: pointer;
-  height: 24px;
-  margin-right: 10px;
-  width: 24px;
+  height: var(--space-6);
+  margin-right: var(--space-2);
+  width: var(--space-6);
 }