@plexui/ui 0.2.0

package/dist/es/components/DateRangePicker/Calendar.module.css

@@ -0,0 +1,295 @@
+@layer components {.CalendarContainer {
+  position: relative;
+  width: 210px;
+  /*  Default size of the calendar is assumed to be 224px */
+  /*  and then is dynamically set via JS measuring */
+  height: 224px;
+}
+
+  @media (min-width: 576px) {.CalendarContainer {
+    width: 452px;
+}
+}.Previous {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Previous::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Previous::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }.Next {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Next::before {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Next::after {
+    position: absolute;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }/*  Lift the inner button above the pseudo elements to avoid clipping in the focus ring box shadow. */.Next button[type="button"],
+.Previous button[type="button"] {
+  z-index: 2;
+}.CalendarWrapper {
+  overflow: hidden;
+  padding: 10px 12px 12px;
+}.CalendarRange {
+  transition: transform 0.25s var(--cubic-move);
+}.ButtonText {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-weight: var(--font-weight-normal);
+  text-align: left;
+}
+
+  [data-active] .ButtonText {
+    font-weight: var(--font-weight-semibold);
+  }.Calendar {
+  --cell-size: 30px;
+  --cell-vertical-gutter: 2px;
+
+  position: absolute;
+  top: 0;
+  width: 210px;
+  font-size: 14px;
+}.Week {
+  display: flex;
+  margin-bottom: var(--cell-vertical-gutter);
+}
+
+  .Week:last-child {
+    margin-bottom: 0;
+  }.DayLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  letter-spacing: var(--tracking-none);
+  text-align: center;
+}.MonthLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0;
+  margin: 0 0 6px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+}.Day {
+  position: relative;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  .Day:first-child {
+    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  }
+
+  .Day:last-child {
+    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  }
+
+  .Day[data-is-start], .Day[data-is-end], .Day[data-is-in-range], :where([data-theme="light"]) .Day[data-is-start], :where([data-theme="light"]) .Day[data-is-end], :where([data-theme="light"]) .Day[data-is-in-range] {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .Day[data-is-start], :where([data-theme="dark"]) .Day[data-is-end], :where([data-theme="dark"]) .Day[data-is-in-range] {
+background-color: var(--alpha-08);
+}
+
+  .Day[data-is-start][data-is-end] {
+    background: none;
+  }
+
+  .Day[data-is-first-range-trail] {
+    border-radius: 0;
+  }
+
+    .Day[data-is-first-range-trail]::before {
+      position: absolute;
+      top: 0;
+      right: 100%;
+      bottom: 0;
+      width: 15px;
+      content: "";
+      -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+              mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+      transition: opacity 0.15s var(--cubic-enter);
+    }
+
+    .Day[data-is-first-range-trail]::before, :where([data-theme="light"]) .Day[data-is-first-range-trail]::before {
+background-color: var(--alpha-06);
+}
+
+    :where([data-theme="dark"]) .Day[data-is-first-range-trail]::before {
+background-color: var(--alpha-08);
+}
+
+      @starting-style {
+
+    .Day[data-is-first-range-trail]::before {
+        opacity: 0
+    }
+      }
+
+  .Day[data-is-last-range-trail] {
+    border-radius: 0;
+  }
+
+    .Day[data-is-last-range-trail]::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 100%;
+      width: 15px;
+      content: "";
+      -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+              mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+      transition: opacity 0.15s var(--cubic-enter);
+    }
+
+    .Day[data-is-last-range-trail]::before, :where([data-theme="light"]) .Day[data-is-last-range-trail]::before {
+background-color: var(--alpha-06);
+}
+
+    :where([data-theme="dark"]) .Day[data-is-last-range-trail]::before {
+background-color: var(--alpha-08);
+}
+
+      @starting-style {
+
+    .Day[data-is-last-range-trail]::before {
+        opacity: 0
+    }
+      }
+
+  .Day[data-is-start] {
+    border-bottom-left-radius: var(--radius-full);
+    border-top-left-radius: var(--radius-full);
+  }
+
+  .Day[data-is-end] {
+    border-bottom-right-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+  }.InteractiveDay {
+  position: relative;
+  display: block;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 0;
+  border-radius: var(--radius-full);
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
+  background: none;
+  cursor: pointer;
+  font-size: var(--font-text-sm-size);
+}
+
+  .InteractiveDay::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--color-text);
+    border-radius: var(--radius-full);
+    content: "";
+    opacity: 0;
+    transition:
+      color,
+      0.15s var(--cubic-enter),
+      opacity 0.15s var(--cubic-enter);
+  }
+
+  .InteractiveDay:hover::before {
+    opacity: 1;
+  }
+
+  .InteractiveDay[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+    .InteractiveDay[disabled]::before {
+      display: none;
+    }
+
+  [data-is-start] .InteractiveDay,
+  [data-is-end] .InteractiveDay {
+    background: var(--color-text);
+    color: var(--color-text-inverse);
+  }.TodayDot {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  margin-left: -1px;
+  background-color: var(--color-text);
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  [data-is-start] .TodayDot,
+  [data-is-end] .TodayDot {
+    background-color: var(--gray-0);
+  }.Shortcuts {
+  flex: 1;
+  width: 150px;
+  padding: calc(var(--spacing) * 2);
+  border-right: 1px solid var(--color-border);
+}
+}

package/dist/es/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import { useMemo } from "react";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { isBefore } from "../../lib/dateUtils";
+import { Popover } from "../Popover";
+import { DateRangeCalendar, DateRangeShortcuts } from "./Calendar";
+import { DateRangeContext } from "./context";
+import { DateRangeTrigger } from "./Trigger";
+import {} from "./types";
+export const DateRangePicker = (props) => {
+    const { value, onChange, min, max, maxRangeDays, shortcuts, side = "bottom", sideOffset = 8, align = "center", alignOffset, variant = "outline", size = "md", clearable = false, disabled = false, dropdownIconType, placeholder = "Select date range...", pill = true, block = false, triggerStepperUnit, triggerClassName, triggerShowIcon = true, triggerDateFormat = "MM/dd/yy", } = props;
+    if (min && max && !isBefore(min, max)) {
+        throw new Error("DateRangePicker error: `min` date must be before the `max` date");
+    }
+    // Create stable, mutable references to avoid memoization requirements from consumers
+    const onChangeRef = useLatestValue(onChange);
+    const store = useMemo(() => ({
+        value,
+        min,
+        max,
+        maxRangeDays,
+        variant,
+        size,
+        dropdownIconType,
+        clearable,
+        disabled,
+        placeholder,
+        block,
+        pill,
+        shortcuts,
+        triggerStepperUnit,
+        triggerClassName,
+        triggerShowIcon,
+        triggerDateFormat,
+        onChangeRef,
+    }), [
+        value,
+        min,
+        max,
+        maxRangeDays,
+        variant,
+        size,
+        dropdownIconType,
+        clearable,
+        disabled,
+        placeholder,
+        block,
+        pill,
+        shortcuts,
+        triggerStepperUnit,
+        triggerClassName,
+        triggerShowIcon,
+        triggerDateFormat,
+        onChangeRef,
+    ]);
+    return (_jsx(DateRangeContext, { value: store, children: _jsxs(Popover, { children: [_jsx(Popover.Trigger, { children: _jsx(DateRangeTrigger, {}) }), _jsx(Popover.Content, { minWidth: 230, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset ?? (align === "center" ? 0 : -5), children: _jsxs("div", { className: "flex", children: [_jsx(DateRangeShortcuts, { shortcuts: shortcuts }), _jsx(DateRangeCalendar, {})] }) })] }) }));
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/es/components/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAA4B,MAAM,YAAY,CAAA;AAE9D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAA8B,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAA0C,MAAM,SAAS,CAAA;AAkHhE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,YAAY,EACZ,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,CAAC,EACd,KAAK,GAAG,QAAQ,EAChB,WAAW,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,gBAAgB,EAChB,WAAW,GAAG,sBAAsB,EACpC,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,KAAK,EACb,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,GAAG,IAAI,EACtB,iBAAiB,GAAG,UAAU,GAC/B,GAAG,KAAK,CAAA;IAET,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;QACtC,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;IACpF,CAAC;IAED,qFAAqF;IACrF,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;IAE5C,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK;QACL,GAAG;QACH,GAAG;QACH,YAAY;QACZ,OAAO;QACP,IAAI;QACJ,gBAAgB;QAChB,SAAS;QACT,QAAQ;QACR,WAAW;QACX,KAAK;QACL,IAAI;QACJ,SAAS;QACT,kBAAkB;QAClB,gBAAgB;QAChB,eAAe;QACf,iBAAiB;QACjB,WAAW;KACZ,CAAC,EACF;QACE,KAAK;QACL,GAAG;QACH,GAAG;QACH,YAAY;QACZ,OAAO;QACP,IAAI;QACJ,gBAAgB;QAChB,SAAS;QACT,QAAQ;QACR,WAAW;QACX,KAAK;QACL,IAAI;QACJ,SAAS;QACT,kBAAkB;QAClB,gBAAgB;QAChB,eAAe;QACf,iBAAiB;QACjB,WAAW;KACZ,CACF,CAAA;IAED,OAAO,CACL,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAC5B,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,OAAO,cACd,KAAC,gBAAgB,KAAG,GACJ,EAClB,KAAC,OAAO,CAAC,OAAO,IACd,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAEzD,eAAK,SAAS,EAAC,MAAM,aACnB,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,GAAI,EAC5C,KAAC,iBAAiB,KAAG,IACjB,GACU,IACV,GACO,CACpB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { useMemo } from \"react\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { isBefore } from \"../../lib/dateUtils\"\nimport { Popover, type PopoverContentProps } from \"../Popover\"\nimport type { SelectControlProps } from \"../SelectControl\"\nimport { DateRangeCalendar, DateRangeShortcuts } from \"./Calendar\"\nimport { DateRangeContext, type DateRangeContextValue } from \"./context\"\nimport { DateRangeTrigger } from \"./Trigger\"\nimport { type DateRange, type DateRangeShortcut } from \"./types\"\n\nexport type DateRangePickerProps = {\n  /**\n   * The selected date range value.\n   */\n  value: DateRange | null\n  /**\n   * Handler that is triggered when the date range changes.\n   */\n  onChange: (nextValue: DateRange | null, shortcut?: DateRangeShortcut) => void\n  /**\n   * Defines the earliest selectable date (inclusive).\n   */\n  min?: DateTime\n  /**\n   * Defines the latest selectable date (inclusive).\n   */\n  max?: DateTime\n  /**\n   * Maximum length of the selectable range in days (inclusive).\n   * When set, the end date cannot be more than this many days after the start date.\n   */\n  maxRangeDays?: number\n  /**\n   * List of date range shortcuts displayed for quick selection, shown to the left of the calendar.\n   */\n  shortcuts?: DateRangeShortcut[]\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default bottom\n   */\n  side?: PopoverContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 8\n   */\n  sideOffset?: PopoverContentProps[\"sideOffset\"]\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: PopoverContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: PopoverContentProps[\"alignOffset\"]\n\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Placeholder text for the select\n   * @default Select date range...\n   */\n  placeholder?: string\n  /**\n   * Style variant for the select trigger\n   * @default outline\n   */\n  variant?: SelectControlProps[\"variant\"]\n  /**\n   * Determines if the select trigger should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Determines size of the size and spacing of the control.\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   * @default md\n   */\n  size?: SelectControlProps[\"size\"]\n  /**\n   * Icon displayed in the far right of the select trigger\n   * @default dropdown\n   */\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  /**\n   * Custom class applied to the select trigger\n   */\n  triggerClassName?: string\n  /**\n   * Display calendar icon at the start of the trigger\n   * @default true\n   */\n  triggerShowIcon?: boolean\n  /**\n   * Allows the trigger to display as a stepper when the selected date matches the unit.\n   * Currently 'month' is the only supported unit.\n   */\n  triggerStepperUnit?: \"month\"\n  /**\n   * Format of dates displayed in the trigger\n   * @default \"MM/dd/yy\"\n   */\n  triggerDateFormat?: string\n  /**\n   * Display a clear action that allows the select to be unset.\n   * @default false\n   */\n  clearable?: boolean\n  /**\n   * Extends select to 100% of available width.\n   * @default true\n   */\n  block?: boolean\n}\n\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n  const {\n    value,\n    onChange,\n    min,\n    max,\n    maxRangeDays,\n    shortcuts,\n    side = \"bottom\",\n    sideOffset = 8,\n    align = \"center\",\n    alignOffset,\n    variant = \"outline\",\n    size = \"md\",\n    clearable = false,\n    disabled = false,\n    dropdownIconType,\n    placeholder = \"Select date range...\",\n    pill = true,\n    block = false,\n    triggerStepperUnit,\n    triggerClassName,\n    triggerShowIcon = true,\n    triggerDateFormat = \"MM/dd/yy\",\n  } = props\n\n  if (min && max && !isBefore(min, max)) {\n    throw new Error(\"DateRangePicker error: `min` date must be before the `max` date\")\n  }\n\n  // Create stable, mutable references to avoid memoization requirements from consumers\n  const onChangeRef = useLatestValue(onChange)\n\n  const store = useMemo<DateRangeContextValue>(\n    () => ({\n      value,\n      min,\n      max,\n      maxRangeDays,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      shortcuts,\n      triggerStepperUnit,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    }),\n    [\n      value,\n      min,\n      max,\n      maxRangeDays,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      shortcuts,\n      triggerStepperUnit,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    ],\n  )\n\n  return (\n    <DateRangeContext value={store}>\n      <Popover>\n        <Popover.Trigger>\n          <DateRangeTrigger />\n        </Popover.Trigger>\n        <Popover.Content\n          minWidth={230}\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n        >\n          <div className=\"flex\">\n            <DateRangeShortcuts shortcuts={shortcuts} />\n            <DateRangeCalendar />\n          </div>\n        </Popover.Content>\n      </Popover>\n    </DateRangeContext>\n  )\n}\n"]}

package/dist/es/components/DateRangePicker/Trigger.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { getMonthStartAndEnd, isBefore, isSameDay } from "../../lib/dateUtils";
+import { Button } from "../Button";
+import { Calendar, ChevronLeft, ChevronRight } from "../Icon";
+import { SelectControl } from "../SelectControl";
+import s from "./Trigger.module.css";
+import { useDateRangeContext } from "./context";
+import {} from "./types";
+export const DateRangeTrigger = (props) => {
+    const { value, min, max, disabled, variant, pill, size, block, triggerStepperUnit, triggerClassName, clearable, dropdownIconType, triggerShowIcon, onChangeRef, } = useDateRangeContext();
+    const isStepperView = useMemo(() => rangeMatchesStepperUnit(value, triggerStepperUnit, {
+        min,
+        max,
+    }), [value, triggerStepperUnit, min, max]);
+    const handleClearClick = () => {
+        onChangeRef.current(null);
+    };
+    return (_jsx(SelectControl, { className: clsx(isStepperView && s.StepperControl, triggerClassName), selected: !!value, variant: variant, pill: pill, block: block, size: size, disabled: disabled, StartIcon: triggerShowIcon && !isStepperView ? Calendar : undefined, dropdownIconType: !isStepperView ? dropdownIconType : "none", onClearClick: clearable && !isStepperView ? handleClearClick : undefined, ...props, children: isStepperView ? _jsx(TriggerStepperView, {}) : _jsx(TriggerDisplayView, {}) }));
+};
+const TriggerStepperView = () => {
+    const { value, min, max, disabled, pill, onChangeRef } = useDateRangeContext();
+    if (!value) {
+        return null;
+    }
+    const [startDate, endDate] = value;
+    const canGoBack = !min || isBefore(min, startDate.startOf("month"));
+    const canGoForward = !max || isBefore(endDate.endOf("month"), max);
+    return (_jsxs("span", { className: s.StepperContent, children: [_jsx(Button, { className: s.StepperPrevious, color: "secondary", variant: "ghost", disabled: disabled || !canGoBack, size: "3xs", uniform: true, pill: pill, onPointerDown: (evt) => {
+                    evt.stopPropagation();
+                    onChangeRef.current(getMonthStartAndEnd(startDate.minus({ months: 1 }), { min, max }));
+                }, children: _jsx(ChevronLeft, {}) }), _jsxs("span", { className: s.StepperText, children: [startDate.monthLong, " ", startDate.year] }), _jsx(Button, { className: s.StepperNext, color: "secondary", variant: "ghost", disabled: disabled || !canGoForward, size: "3xs", uniform: true, pill: pill, onPointerDown: (evt) => {
+                    evt.stopPropagation();
+                    onChangeRef.current(getMonthStartAndEnd(startDate.plus({ months: 1 }), { min, max }));
+                }, children: _jsx(ChevronRight, {}) })] }));
+};
+const TriggerDisplayView = () => {
+    const { placeholder, value, triggerDateFormat, shortcuts } = useDateRangeContext();
+    const activeShortcut = useMemo(() => {
+        if (!value || !shortcuts?.length) {
+            return undefined;
+        }
+        return shortcuts.find((sc) => {
+            const [start, end] = sc.getDateRange();
+            return isSameDay(start, value[0]) && isSameDay(end, value[1]);
+        });
+    }, [value, shortcuts]);
+    return (_jsx(_Fragment, { children: activeShortcut ? (_jsx("span", { className: "inline-block", children: activeShortcut.label })) : value && isSameDay(value[0], value[1]) ? (_jsx("span", { className: "inline-block tabular-nums", children: value[0].toFormat(triggerDateFormat) })) : value ? (_jsxs("span", { className: "inline-block tabular-nums", children: [value[0].toFormat(triggerDateFormat), _jsx("span", { className: s.RangeTextSeparator, children: "-" }), value[1].toFormat(triggerDateFormat)] })) : (placeholder) }));
+};
+const rangeMatchesStepperUnit = (range, stepperUnit, { min, max } = {}) => {
+    // Allows method to be called lazily
+    if (!range || !stepperUnit) {
+        return false;
+    }
+    const [startDate, endDate] = range;
+    const [startDateCompare, endDateCompare] = getMonthStartAndEnd(startDate, {
+        min,
+        max,
+    });
+    return isSameDay(startDateCompare, startDate) && isSameDay(endDateCompare, endDate);
+};
+//# sourceMappingURL=Trigger.js.map

package/dist/es/components/DateRangePicker/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/Trigger.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport type { DateTime } from \"luxon\"\nimport { useMemo, type ComponentProps } from \"react\"\nimport { getMonthStartAndEnd, isBefore, isSameDay } from \"../../lib/dateUtils\"\nimport { Button } from \"../Button\"\nimport { Calendar, ChevronLeft, ChevronRight } from \"../Icon\"\nimport { SelectControl } from \"../SelectControl\"\nimport s from \"./Trigger.module.css\"\nimport { useDateRangeContext } from \"./context\"\nimport { type DateRange, type DateRangeShortcut } from \"./types\"\n\nexport const DateRangeTrigger = (props: ComponentProps<\"span\">) => {\n  const {\n    value,\n    min,\n    max,\n    disabled,\n    variant,\n    pill,\n    size,\n    block,\n    triggerStepperUnit,\n    triggerClassName,\n    clearable,\n    dropdownIconType,\n    triggerShowIcon,\n    onChangeRef,\n  } = useDateRangeContext()\n\n  const isStepperView = useMemo<boolean>(\n    () =>\n      rangeMatchesStepperUnit(value, triggerStepperUnit, {\n        min,\n        max,\n      }),\n    [value, triggerStepperUnit, min, max],\n  )\n\n  const handleClearClick = () => {\n    onChangeRef.current(null)\n  }\n\n  return (\n    <SelectControl\n      className={clsx(isStepperView && s.StepperControl, triggerClassName)}\n      selected={!!value}\n      variant={variant}\n      pill={pill}\n      block={block}\n      size={size}\n      disabled={disabled}\n      StartIcon={triggerShowIcon && !isStepperView ? Calendar : undefined}\n      dropdownIconType={!isStepperView ? dropdownIconType : \"none\"}\n      onClearClick={clearable && !isStepperView ? handleClearClick : undefined}\n      {...props}\n    >\n      {isStepperView ? <TriggerStepperView /> : <TriggerDisplayView />}\n    </SelectControl>\n  )\n}\n\nconst TriggerStepperView = () => {\n  const { value, min, max, disabled, pill, onChangeRef } = useDateRangeContext()\n\n  if (!value) {\n    return null\n  }\n\n  const [startDate, endDate] = value\n  const canGoBack = !min || isBefore(min, startDate.startOf(\"month\"))\n  const canGoForward = !max || isBefore(endDate.endOf(\"month\"), max)\n\n  return (\n    <span className={s.StepperContent}>\n      <Button\n        className={s.StepperPrevious}\n        color=\"secondary\"\n        variant=\"ghost\"\n        disabled={disabled || !canGoBack}\n        size=\"3xs\"\n        uniform\n        pill={pill}\n        onPointerDown={(evt) => {\n          evt.stopPropagation()\n          onChangeRef.current(getMonthStartAndEnd(startDate.minus({ months: 1 }), { min, max }))\n        }}\n      >\n        <ChevronLeft />\n      </Button>\n      <span className={s.StepperText}>\n        {startDate.monthLong} {startDate.year}\n      </span>\n      <Button\n        className={s.StepperNext}\n        color=\"secondary\"\n        variant=\"ghost\"\n        disabled={disabled || !canGoForward}\n        size=\"3xs\"\n        uniform\n        pill={pill}\n        onPointerDown={(evt) => {\n          evt.stopPropagation()\n          onChangeRef.current(getMonthStartAndEnd(startDate.plus({ months: 1 }), { min, max }))\n        }}\n      >\n        <ChevronRight />\n      </Button>\n    </span>\n  )\n}\n\nconst TriggerDisplayView = () => {\n  const { placeholder, value, triggerDateFormat, shortcuts } = useDateRangeContext()\n\n  const activeShortcut = useMemo<DateRangeShortcut | undefined>(() => {\n    if (!value || !shortcuts?.length) {\n      return undefined\n    }\n\n    return shortcuts.find((sc) => {\n      const [start, end] = sc.getDateRange()\n      return isSameDay(start, value[0]) && isSameDay(end, value[1])\n    })\n  }, [value, shortcuts])\n\n  return (\n    <>\n      {activeShortcut ? (\n        <span className=\"inline-block\">{activeShortcut.label}</span>\n      ) : value && isSameDay(value[0], value[1]) ? (\n        <span className=\"inline-block tabular-nums\">{value[0].toFormat(triggerDateFormat)}</span>\n      ) : value ? (\n        <span className=\"inline-block tabular-nums\">\n          {value[0].toFormat(triggerDateFormat)}\n          <span className={s.RangeTextSeparator}>-</span>\n          {value[1].toFormat(triggerDateFormat)}\n        </span>\n      ) : (\n        placeholder\n      )}\n    </>\n  )\n}\n\nconst rangeMatchesStepperUnit = (\n  range: DateRange | null,\n  stepperUnit: \"month\" | undefined,\n  { min, max }: { min?: DateTime; max?: DateTime } = {},\n): boolean => {\n  // Allows method to be called lazily\n  if (!range || !stepperUnit) {\n    return false\n  }\n\n  const [startDate, endDate] = range\n  const [startDateCompare, endDateCompare] = getMonthStartAndEnd(startDate, {\n    min,\n    max,\n  })\n\n  return isSameDay(startDateCompare, startDate) && isSameDay(endDateCompare, endDate)\n}\n"]}

package/dist/es/components/DateRangePicker/Trigger.module.css

@@ -0,0 +1,25 @@
+@layer components {.StepperControl {
+  padding-right: calc((var(--select-control-size) - var(--clear-size)) / 2);
+  padding-left: calc((var(--select-control-size) - var(--clear-size)) / 2);
+}
+
+  .StepperControl .StepperPrevious,
+  .StepperControl .StepperNext {
+    --button-size: var(--clear-size);
+    --button-icon-size: var(--clear-icon-size);
+  }.StepperContent {
+  display: flex;
+  align-items: center;
+  gap: var(--select-control-gap);
+}.StepperText {
+  min-width: 9em;
+  text-align: center;
+}.RangeText {
+  display: inline-block;
+  font-variant: tabular-nums;
+}.RangeTextSeparator {
+  margin: 0 calc(var(--spacing) * 1);
+  font-size: var(--font-text-sm-size);
+  letter-spacing: 0;
+}
+}

package/dist/es/components/DateRangePicker/context.js

@@ -0,0 +1,12 @@
+"use client";
+import { DateTime } from "luxon";
+import { createContext, use } from "react";
+export const DateRangeContext = createContext(null);
+export const useDateRangeContext = () => {
+    const context = use(DateRangeContext);
+    if (!context) {
+        throw new Error("DateRange components must be wrapped in <DateRangePicker />");
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map

package/dist/es/components/DateRangePicker/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AA4B1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAA;AAEjF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAErC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAA;IAChF,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { createContext, use } from \"react\"\nimport type { SelectControlProps } from \"../SelectControl\"\nimport type { DateRange, DateRangeShortcut } from \"./types\"\n\nexport type DateRangeContextValue = {\n  value: DateRange | null\n  min?: DateTime\n  max?: DateTime\n  maxRangeDays?: number\n  triggerStepperUnit?: \"month\"\n  triggerClassName?: string\n  triggerShowIcon?: boolean\n  triggerDateFormat: string\n  disabled: boolean\n  variant?: SelectControlProps[\"variant\"]\n  pill: boolean\n  block: boolean\n  size?: SelectControlProps[\"size\"]\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  clearable: boolean\n  placeholder: string\n  shortcuts?: DateRangeShortcut[]\n  // References\n  onChangeRef: React.MutableRefObject<\n    (nextValue: DateRange | null, shortcut?: DateRangeShortcut) => void\n  >\n}\n\nexport const DateRangeContext = createContext<DateRangeContextValue | null>(null)\n\nexport const useDateRangeContext = () => {\n  const context = use(DateRangeContext)\n\n  if (!context) {\n    throw new Error(\"DateRange components must be wrapped in <DateRangePicker />\")\n  }\n\n  return context\n}\n"]}

package/dist/es/components/DateRangePicker/index.js

@@ -0,0 +1,3 @@
+export { DateRangePicker } from "./DateRangePicker";
+export {} from "./types";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DateRangePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAE9E,OAAO,EAA0C,MAAM,SAAS,CAAA","sourcesContent":["export { DateRangePicker, type DateRangePickerProps } from \"./DateRangePicker\"\n\nexport { type DateRange, type DateRangeShortcut } from \"./types\"\n"]}

package/dist/es/components/DateRangePicker/types.js

@@ -0,0 +1,2 @@
+import {} from "luxon";
+//# sourceMappingURL=types.js.map

package/dist/es/components/DateRangePicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,MAAM,OAAO,CAAA","sourcesContent":["import { type DateTime } from \"luxon\"\n\nexport type DateRange = [DateTime, DateTime]\nexport type DateRangeShortcut = {\n  label: string\n  getDateRange: () => DateRange\n}\n"]}

package/dist/es/components/EmptyMessage/EmptyMessage.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import {} from "../../types";
+import s from "./EmptyMessage.module.css";
+export const EmptyMessage = ({ children, className, fill = "static" }) => {
+    return (_jsx("div", { className: clsx(s.EmptyMessage, className), "data-fill": fill, children: children }));
+};
+const Icon = ({ size = "md", color = "secondary", children, className }) => {
+    return (_jsx("div", { className: clsx(s.IconBadge, className), "data-size": size, "data-color": color, children: children }));
+};
+const Title = ({ children, className, color = "secondary" }) => {
+    return (_jsx("div", { className: clsx(s.Title, className), "data-color": color, children: children }));
+};
+const Description = ({ children, className }) => {
+    return _jsx("div", { className: clsx(s.Description, className), children: children });
+};
+const ActionRow = ({ children, className }) => {
+    return _jsx("div", { className: clsx(s.ActionRow, className), children: children });
+};
+EmptyMessage.Icon = Icon;
+EmptyMessage.Title = Title;
+EmptyMessage.Description = Description;
+EmptyMessage.ActionRow = ActionRow;
+//# sourceMappingURL=EmptyMessage.js.map

package/dist/es/components/EmptyMessage/EmptyMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyMessage.js","sourceRoot":"","sources":["../../../../src/components/EmptyMessage/EmptyMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAmC,MAAM,aAAa,CAAA;AAC7D,OAAO,CAAC,MAAM,2BAA2B,CAAA;AAYzC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAqB,EAAE,EAAE;IAC1F,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,eAAa,IAAI,YAC7D,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAeD,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAyB,EAAE,EAAE;IAChG,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,eAAa,IAAI,gBAAc,KAAK,YAC7E,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAG,WAAW,EAA0B,EAAE,EAAE;IACrF,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAc,KAAK,YACxD,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C,EAAE,EAAE;IAC3F,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C,EAAE,EAAE;IACzF,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAA;AACvE,CAAC,CAAA;AAED,YAAY,CAAC,IAAI,GAAG,IAAI,CAAA;AACxB,YAAY,CAAC,KAAK,GAAG,KAAK,CAAA;AAC1B,YAAY,CAAC,WAAW,GAAG,WAAW,CAAA;AACtC,YAAY,CAAC,SAAS,GAAG,SAAS,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { type ReactNode } from \"react\"\nimport { type SemanticColors, type Sizes } from \"../../types\"\nimport s from \"./EmptyMessage.module.css\"\n\nexport type EmptyMessageProps = {\n  children: ReactNode\n  className?: string\n  /**\n   * Determines how the container fills available space\n   * @default static\n   */\n  fill?: \"static\" | \"absolute\" | \"none\"\n}\n\nexport const EmptyMessage = ({ children, className, fill = \"static\" }: EmptyMessageProps) => {\n  return (\n    <div className={clsx(s.EmptyMessage, className)} data-fill={fill}>\n      {children}\n    </div>\n  )\n}\n\nexport type EmptyMessageIconProps = {\n  /**\n   * @default sm\n   */\n  size?: Sizes<\"sm\" | \"md\">\n  /**\n   * @default secondary\n   */\n  color?: SemanticColors<\"secondary\" | \"danger\" | \"warning\">\n  children: ReactNode\n  className?: string\n}\n\nconst Icon = ({ size = \"md\", color = \"secondary\", children, className }: EmptyMessageIconProps) => {\n  return (\n    <div className={clsx(s.IconBadge, className)} data-size={size} data-color={color}>\n      {children}\n    </div>\n  )\n}\n\nexport type EmptyMessageTitleProps = {\n  children: ReactNode\n  className?: string\n  /**\n   * @default secondary\n   */\n  color?: SemanticColors<\"secondary\" | \"danger\" | \"warning\">\n}\n\nconst Title = ({ children, className, color = \"secondary\" }: EmptyMessageTitleProps) => {\n  return (\n    <div className={clsx(s.Title, className)} data-color={color}>\n      {children}\n    </div>\n  )\n}\n\nconst Description = ({ children, className }: { children: ReactNode; className?: string }) => {\n  return <div className={clsx(s.Description, className)}>{children}</div>\n}\n\nconst ActionRow = ({ children, className }: { children: ReactNode; className?: string }) => {\n  return <div className={clsx(s.ActionRow, className)}>{children}</div>\n}\n\nEmptyMessage.Icon = Icon\nEmptyMessage.Title = Title\nEmptyMessage.Description = Description\nEmptyMessage.ActionRow = ActionRow\n"]}

package/dist/es/components/EmptyMessage/EmptyMessage.module.css

@@ -0,0 +1,80 @@
+@layer components {.EmptyMessage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+  .EmptyMessage[data-fill="static"] {
+    width: 100%;
+    height: 100%;
+  }
+
+  .EmptyMessage[data-fill="absolute"] {
+    position: absolute;
+    inset: 0;
+  }.IconBadge {
+  --badge-size: 40px;
+  --icon-size: 24px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--badge-size);
+  height: var(--badge-size);
+  border-radius: var(--radius-md);
+  margin: 0 0 12px;
+  background: var(--badge-background-color);
+  color: var(--badge-text-color);
+}
+
+  .IconBadge svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+
+  .IconBadge[data-size="sm"] {
+    --badge-size: 32px;
+    --icon-size: 20px;
+  }
+
+  .IconBadge[data-color="secondary"] {
+    --badge-background-color: var(--color-background-secondary-soft);
+    --badge-text-color: var(--color-text-secondary-soft);
+  }
+
+  .IconBadge[data-color="warning"] {
+    --badge-background-color: var(--color-background-warning-soft);
+    --badge-text-color: var(--color-text-warning-soft);
+  }
+
+  .IconBadge[data-color="danger"] {
+    --badge-background-color: var(--color-background-danger-soft);
+    --badge-text-color: var(--color-text-danger-soft);
+  }.Title {
+  max-width: 90%;
+  color: var(--color-text);
+  font-size: 16px;
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  text-wrap: balance;
+}
+
+  .Title:where([data-color="danger"]) {
+    color: var(--color-text-danger);
+  }
+
+  .Title:where([data-color="warning"]) {
+    color: var(--color-text-warning);
+  }.Description {
+  max-width: 90%;
+  margin: 6px 0 0;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  line-height: 1.45;
+  text-align: center;
+  text-wrap: balance;
+}.ActionRow {
+  margin-top: calc(var(--spacing) * 4);
+}
+}

package/dist/es/components/EmptyMessage/index.js

@@ -0,0 +1,2 @@
+export { EmptyMessage } from "./EmptyMessage";
+//# sourceMappingURL=index.js.map

package/dist/es/components/EmptyMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/EmptyMessage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsD,MAAM,gBAAgB,CAAA","sourcesContent":["export { EmptyMessage, type EmptyMessageIconProps, type EmptyMessageProps } from \"./EmptyMessage\"\n"]}

package/dist/es/components/FieldError/FieldError.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ExclamationMarkCircle } from "../Icon";
+import s from "./FieldError.module.css";
+export function FieldError({ children, className, id }) {
+    return (_jsxs("div", { className: clsx(s.FieldError, className), id: id, role: "alert", children: [_jsx(ExclamationMarkCircle, { className: s.Icon }), _jsx("span", { children: children })] }));
+}
+//# sourceMappingURL=FieldError.js.map

package/dist/es/components/FieldError/FieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../../../src/components/FieldError/FieldError.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,CAAC,MAAM,yBAAyB,CAAA;AAQvC,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAmB;IACrE,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aACjE,KAAC,qBAAqB,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,GAAI,EAC5C,yBAAO,QAAQ,GAAQ,IACnB,CACP,CAAA;AACH,CAAC","sourcesContent":["import clsx from \"clsx\"\n\nimport { ExclamationMarkCircle } from \"../Icon\"\n\nimport s from \"./FieldError.module.css\"\n\nexport type FieldErrorProps = {\n  children: React.ReactNode\n  className?: string\n  id?: string\n}\n\nexport function FieldError({ children, className, id }: FieldErrorProps) {\n  return (\n    <div className={clsx(s.FieldError, className)} id={id} role=\"alert\">\n      <ExclamationMarkCircle className={s.Icon} />\n      <span>{children}</span>\n    </div>\n  )\n}\n"]}