@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.21

package/src/components/Button/AGENTS.md

@@ -0,0 +1,65 @@
+# Button — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Button } from "@stamcat/craftsman/Button";
+```
+
+Props:
+
+- Inherits all native `<button>` props.
+- `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `size?: number` (default visual scale is `1`)
+- `styles?: React.CSSProperties` (inline style override)
+
+Behavior notes:
+
+- `type` defaults to `"button"`.
+- For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+- `className` is preserved and merged after component classes.
+- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
+- If `children` is empty (per `isEmpty`), the component renders nothing.
+- `size` is clamped to `[0.1, 10]` before styling is applied.
+- When `size` is provided, Button sets a single `--btn-size` CSS variable inline; all scaling math lives in SCSS:
+  - `border-radius: calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `padding: calc(var(--w-gutter) * 0.5 * var(--btn-size)) calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `font-size: max(10px, calc(var(--w-text) * var(--btn-size)))`
+  - This is the standard sizing pattern used across the library (see `Toggle`'s `--toggle-width`): components expose one scale/size CSS variable, and SCSS does all the `calc()` work.
+- There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
+- Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
+- Native button modes are supported (`type="button" | "submit" | "reset"`).
+- Accessibility props such as `aria-label` pass through unchanged.
+
+Example:
+
+```tsx
+<Button variant="primary" onClick={onSave}>Save</Button>
+```
+
+Story-aligned usage examples:
+
+```tsx
+// Scaled compact button (size is clamped to [0.1, 10])
+<Button variant="primary" size={0.5}>Mini Action</Button>
+
+// Icon content
+<Button variant="primary">
+  <TruckIcon size={20} /> <span>Ship</span>
+</Button>
+
+// Loading content
+<Button aria-label="Saving">
+  <Loader type="boxy" width={32} color="#de13ca" />
+</Button>
+
+// Style-only disabled appearance while still allowing click handlers
+<Button className="disabled" onClick={onClick}>Disabled Look</Button>
+
+// Native submit behavior
+<Button type="submit" aria-label="Save form">Save</Button>
+```
+
+Implementation caution:
+
+- Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).

package/src/components/{Button.d.ts → Button/Button.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonType } from '../styles/global/components/button';
+import { ButtonType } from '../../utilities/types';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/Button/Button.esm.js

@@ -0,0 +1,20 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import t from "clsx";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var i = (i) => {
+	let { type: a = "button", variant: o = "default", size: s, styles: c, className: l, style: u, ...d } = i, f = typeof s == "number" ? Math.min(10, Math.max(.1, s)) : void 0, p = e(c) ? void 0 : c, m = f ? { "--btn-size": f } : void 0;
+	return e(i.children) ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("button", {
+		type: a,
+		className: t("button", o, l),
+		style: {
+			...m,
+			...p,
+			...u
+		},
+		...d
+	});
+};
+//#endregion
+export { i as Button };

package/src/components/Carousel/AGENTS.md

@@ -0,0 +1,41 @@
+# Carousel — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Carousel } from "@stamcat/craftsman/Carousel";
+```
+
+Props:
+
+- Extends `EmblaOptionsType` from `embla-carousel`, except `slides`.
+- `slides?: React.ReactNode[]`
+- `className?: string`
+- `style?: React.CSSProperties`
+- `buttons?: boolean` (default: `true`)
+- `pagination?: "dots" | "numbers"` (default: `"dots"`)
+
+Behavior notes:
+
+- `slides` is an array prop; do not pass slide content as `children`.
+- Built on `embla-carousel-react`, so standard Embla options such as `loop`, `align`, `dragFree`, and `slidesToScroll` pass through.
+- Previous/next controls are built in and can be hidden with `buttons={false}`.
+- Pagination can render dots or the shared `Pagination` component in number mode.
+- Number pagination uses zero-based indexes internally, consistent with `Pagination`.
+- The component manages its own selected index from the Embla instance; there is no separate controlled index prop.
+
+Example:
+
+```tsx
+const slides = [
+  <figure key="one"><img src="/slide-1.jpg" alt="First slide" /></figure>,
+  <figure key="two"><img src="/slide-2.jpg" alt="Second slide" /></figure>,
+];
+
+<Carousel
+  slides={slides}
+  loop={false}
+  pagination="dots"
+  align="center"
+/>
+```

package/src/components/Carousel/Carousel.css

@@ -0,0 +1 @@
+@layer craftsman-component{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}

package/src/components/Carousel/Carousel.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
+import { CarouselPageType } from '../../utilities/types';
+export type CarouselProps = Omit<EmblaOptionsType, "slides"> & {
+    slides?: React.ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+    buttons?: boolean;
+    pagination?: CarouselPageType;
+};
+export declare const Carousel: React.FC<CarouselProps>;

package/src/components/Carousel/Carousel.scss

@@ -0,0 +1,34 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .carousel {
+        position: relative;
+
+        &__viewport {
+            overflow: hidden;
+        }
+
+        &__container {
+            display: flex;
+            touch-action: pan-y pinch-zoom;
+        }
+
+        &__slide {
+            flex: 0 0 100%;
+            min-width: 0;
+        }
+
+        &__controls {
+            display: inline-flex;
+            justify-content: space-between;
+            flex-flow: row nowrap;
+            gap: #{u.width("gutter", 0.5)};
+            margin-top: #{u.width("gutter", 0.75)};
+            width: 100%;
+        }
+        &__dots button {
+            margin: 0 #{u.width("gutter", 0.125)};
+        }
+
+    }
+}

package/src/components/Carousel/Carousel2.esm.js

@@ -0,0 +1,75 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Pagination as t } from "../Pagination/Pagination2.esm.js";
+import n from "../../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.esm.js";
+import './Carousel.css';/* empty css             */
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useSyncExternalStore as s } from "react";
+import { FaAngleLeft as c, FaAngleRight as l, FaCircle as u, FaRegCircle as d } from "react-icons/fa6";
+//#region src/components/Carousel/Carousel.tsx
+var f = (f) => {
+	let { slides: p = [], className: m, style: h, buttons: g = !0, pagination: _ = "dots", ...v } = f, [y, b] = n(v), x = o((e) => b ? (b.on("select", e).on("reInit", e), () => {
+		b.off("select", e), b.off("reInit", e);
+	}) : () => {}, [b]), S = s(x, () => !!b?.canScrollPrev(), () => !1), C = s(x, () => !!b?.canScrollNext(), () => !1), w = s(x, () => b?.selectedScrollSnap() ?? 0, () => 0), T = () => b?.scrollPrev(), E = () => b?.scrollNext(), D = (e) => {
+		let t = parseInt(e.currentTarget.value, 10) || 0;
+		b?.scrollTo(t);
+	};
+	return /* @__PURE__ */ a("div", {
+		className: r("carousel", m),
+		style: h,
+		children: [/* @__PURE__ */ i("div", {
+			className: "carousel__viewport",
+			ref: y,
+			children: /* @__PURE__ */ i("div", {
+				className: "carousel__container",
+				children: p.map((e, t) => /* @__PURE__ */ i("div", {
+					className: "carousel__slide",
+					children: e
+				}, `slide-${t}`))
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: "carousel__controls",
+			children: [
+				g && /* @__PURE__ */ a("div", {
+					className: "carousel__buttons",
+					children: [/* @__PURE__ */ i(e, {
+						variant: "text",
+						onClick: T,
+						disabled: !S,
+						name: "prev",
+						children: /* @__PURE__ */ i(c, {
+							size: 24,
+							"aria-label": "prev"
+						})
+					}), /* @__PURE__ */ i(e, {
+						variant: "text",
+						onClick: E,
+						disabled: !C,
+						name: "next",
+						children: /* @__PURE__ */ i(l, {
+							size: 24,
+							"aria-label": "next"
+						})
+					})]
+				}),
+				_ === "dots" && /* @__PURE__ */ i("div", {
+					className: "carousel__dots",
+					children: p.map((t, n) => /* @__PURE__ */ i(e, {
+						variant: "text",
+						value: n,
+						onClick: D,
+						children: i(w === n ? u : d, { size: 16 })
+					}, `dot-${n}`))
+				}),
+				_ === "numbers" && /* @__PURE__ */ i(t, {
+					total: p.length,
+					current: w,
+					onChange: D
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { f as Carousel };

package/src/components/Checkbox/AGENTS.md

@@ -0,0 +1,34 @@
+# Checkbox — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "checkbox"` (default: `"checkbox"`)
+- `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
+- `size?: number` (default visual scale is `1`, clamped to `[0.1, 10]`)
+
+Behavior notes:
+
+- `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
+- The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+- When `size` is provided, Checkbox sets a single `--checkbox-size` CSS variable inline; the checkbox box and checkmark scale via SCSS `calc()` from that variable (same pattern as `Button`'s `--btn-size` and `Toggle`'s `--toggle-width`).
+
+Example:
+
+```tsx
+<Checkbox
+  id="accept-terms"
+  name="terms"
+  value="accepted"
+  label="Accept terms"
+  checked={accepted}
+  onChange={(event) => setAccepted(event.currentTarget.checked)}
+/>
+```

package/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from '../Input/Input';
+import { CheckboxLabelPosition } from '../../utilities/types';
+export type CheckboxProps = InputProps & {
+    type?: "checkbox";
+    labelPosition?: CheckboxLabelPosition;
+    size?: number;
+};
+export declare const Checkbox: React.FC<CheckboxProps>;

package/src/components/Checkbox/Checkbox.esm.js

@@ -0,0 +1,18 @@
+"use client";
+import { Input as e } from "../Input/Input2.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Checkbox/Checkbox.tsx
+var n = ({ type: n = "checkbox", labelPosition: r = "right", size: i, style: a, ...o }) => {
+	let s = typeof i == "number" ? Math.min(10, Math.max(.1, i)) : void 0;
+	return /* @__PURE__ */ t(e, {
+		type: n,
+		labelPosition: r,
+		style: {
+			...s ? { "--checkbox-size": s } : void 0,
+			...a
+		},
+		...o
+	});
+};
+//#endregion
+export { n as Checkbox };

package/src/components/DatePicker/AGENTS.md

@@ -0,0 +1,36 @@
+# DatePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { DatePicker } from "@stamcat/craftsman/DatePicker";
+```
+
+Props:
+
+- Extends `DatePickerProps` from `react-date-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `value?: Date | null`
+- `onChange?: (value: DatePickerProps["value"]) => void`
+
+Behavior notes:
+
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has at least 400px of vertical space.
+- Use `useState` to manage the selected date value.
+
+Example:
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker
+  label="Appointment Date"
+  value={date}
+  onChange={setDate}
+  required
+/>
+```

package/src/components/DatePicker/DatePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer craftsman-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}

package/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DatePickerProps as ReactDatePickerProps } from 'react-date-picker';
+export type DatePickerProps = ReactDatePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+};
+export declare const DatePicker: React.FC<DatePickerProps>;

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,61 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "./_DatePicker";
+@layer craftsman-base {
+    .react-date-picker,
+    .react-date-picker *,
+    .react-date-picker *:before,
+    .react-date-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-date-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar {
+            width: 350px;
+            max-width: 100vw;
+            z-index: 1;
+            .react-calendar {
+                    border-width: thin;
+            }
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-date-picker__calendar 
+    .react-date-picker__inputGroup__input:invalid {
+        background: unset;
+    }
+}

package/src/components/DatePicker/DatePicker2.esm.js

@@ -0,0 +1,29 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import './ReactCalendar.css';import './DatePicker.css';/* empty css               */
+/* empty css                  */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import { DatePicker as i } from "react-date-picker";
+import { FaRegCalendar as a, FaX as o } from "react-icons/fa6";
+//#region src/components/DatePicker/DatePicker.tsx
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
+	let h = r();
+	return /* @__PURE__ */ n(e, {
+		id: c || h,
+		className: t("datePicker", p),
+		label: s,
+		labelPosition: l,
+		error: d,
+		required: u,
+		style: f,
+		children: /* @__PURE__ */ n(i, {
+			calendarIcon: /* @__PURE__ */ n(a, { size: 16 }),
+			clearIcon: /* @__PURE__ */ n(o, { size: 14 }),
+			...m
+		})
+	});
+};
+//#endregion
+export { s as DatePicker };

package/src/components/DatePicker/ReactCalendar.css

@@ -0,0 +1 @@
+.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{border-radius:unset;justify-content:center;padding:12px 0}.react-calendar__year-view button,.react-calendar__decade-view button,.react-calendar__century-view button{padding:18px 0}}

package/src/components/DatePicker/ReactCalendar.scss

@@ -0,0 +1,158 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-base {
+    .react-calendar,
+    .react-calendar *,
+    .react-calendar *:before,
+    .react-calendar *:after {
+        @extend %border-box;
+    }
+
+    .react-calendar {
+        width: 350px;
+        max-width: 100%;
+        background: white;
+        border: 1px solid #a0a096;
+        line-height: 1.125em;
+    }
+
+    .react-calendar--doubleView {
+        width: 700px;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer {
+        display: flex;
+        margin: -0.5em;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer > * {
+        width: 50%;
+        margin: 0.5em;
+    }
+    .react-calendar button {
+        margin: 0;
+        border: 0;
+        outline: none;
+    }
+
+    .react-calendar button:enabled:hover {
+        cursor: pointer;
+    }
+
+    .react-calendar__navigation {
+        display: flex;
+        height: 44px;
+        margin-bottom: 1em;
+    }
+
+    .react-calendar__navigation button {
+        min-width: 44px;
+        background: none;
+    }
+
+    .react-calendar__navigation button:disabled {
+        background-color: #f0f0f0;
+    }
+
+    .react-calendar__navigation button:enabled:hover,
+    .react-calendar__navigation button:enabled:focus {
+        background-color: #e6e6e6;
+    }
+
+    .react-calendar__month-view__weekdays {
+        text-align: center;
+        text-transform: uppercase;
+        font: inherit;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    .react-calendar__month-view__weekdays__weekday {
+        padding: 0.5em;
+    }
+
+    .react-calendar__month-view__weekNumbers .react-calendar__tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font: inherit;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    .react-calendar__month-view__days__day--weekend {
+        color: #d10000;
+    }
+
+    .react-calendar__month-view__days__day--neighboringMonth,
+    .react-calendar__decade-view__years__year--neighboringDecade,
+    .react-calendar__century-view__decades__decade--neighboringCentury {
+        color: #757575;
+    }
+    .react-calendar__tile:disabled {
+        background-color: #f0f0f0;
+        color: #ababab;
+    }
+
+    .react-calendar__month-view__days__day--neighboringMonth:disabled,
+    .react-calendar__decade-view__years__year--neighboringDecade:disabled,
+    .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+        color: #cdcdcd;
+    }
+
+    .react-calendar__tile:enabled:hover,
+    .react-calendar__tile:enabled:focus {
+        background-color: #e6e6e6;
+    }
+
+    .react-calendar__tile--now {
+        background: #ffff76;
+    }
+
+    .react-calendar__tile--now:enabled:hover,
+    .react-calendar__tile--now:enabled:focus {
+        background: #ffffa9;
+    }
+
+    .react-calendar__tile--hasActive {
+        background: #76baff;
+    }
+
+    .react-calendar__tile--hasActive:enabled:hover,
+    .react-calendar__tile--hasActive:enabled:focus {
+        background: #a9d4ff;
+    }
+
+    .react-calendar__tile--active {
+        background: #006edc;
+        color: white;
+    }
+
+    .react-calendar__tile--active:enabled:hover,
+    .react-calendar__tile--active:enabled:focus {
+        background: #1087ff;
+    }
+
+    .react-calendar--selectRange .react-calendar__tile--hover {
+        background-color: #e6e6e6;
+    }
+    .react-calendar {
+        border-color: #{u.color("gray400")};
+    }
+    .react-calendar button {
+        justify-content: center;
+    }
+    .react-calendar {
+        button {
+            border-radius: unset;
+            padding: 12px 0px;
+        }
+    }
+    .react-calendar__year-view, .react-calendar__decade-view, .react-calendar__century-view {
+        button {
+            padding: 18px 0px;
+        }
+    }
+
+}