@koobiq/react-components 0.0.1-beta.31 → 0.0.1-beta.33

package/dist/components/Popover/Popover.js

@@ -1,143 +1,9 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, cloneElement, isValidElement } from "react";
-import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
-import { useOverlayTrigger, usePopover, Overlay, useOverlayTriggerState } from "@koobiq/react-primitives";
-import { Transition } from "react-transition-group";
-import s from "./Popover.module.css.js";
-import { normalizeInlineSize } from "./utils.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useOverlayTriggerState } from "@koobiq/react-primitives";
+import { PopoverInner } from "./PopoverInner.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const PopoverInner = (props) => {
-  const {
-    offset = 0,
-    size = "medium",
-    crossOffset = 0,
-    hideArrow = false,
-    containerPadding = 12,
-    arrowBoundaryOffset = 20,
-    placement: placementProp = "top",
-    maxBlockSize = 480,
-    type = "dialog",
-    state,
-    control,
-    children,
-    anchorRef,
-    slotProps,
-    className,
-    isNonModal,
-    popoverRef,
-    portalContainer,
-    hideCloseButton,
-    disableFocusManagement,
-    disableExitOnEscapeKeyDown,
-    shouldCloseOnInteractOutside,
-    ...other
-  } = props;
-  const showArrow = !hideArrow;
-  const domRef = useDOMRef(popoverRef);
-  const controlRef = useRef(null);
-  const openState = state.isOpen;
-  const [opened, { on, off }] = useBoolean(openState);
-  const { triggerProps, overlayProps } = useOverlayTrigger(
-    { type },
-    { ...state, isOpen: openState }
-  );
-  const {
-    popoverProps,
-    underlayProps,
-    arrowProps: arrowPropsCommon,
-    placement
-  } = usePopover(
-    {
-      ...props,
-      offset,
-      isNonModal,
-      crossOffset,
-      containerPadding,
-      popoverRef: domRef,
-      arrowBoundaryOffset,
-      maxHeight: maxBlockSize,
-      placement: placementProp,
-      shouldCloseOnInteractOutside,
-      triggerRef: anchorRef || controlRef,
-      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
-    },
-    { ...state, isOpen: openState || opened }
-  );
-  const resolvedChildren = () => {
-    if (typeof children === "function")
-      return cloneElement(children({ close: state.close }), overlayProps);
-    if (isValidElement(children)) return cloneElement(children, overlayProps);
-    return children;
-  };
-  const arrowProps = mergeProps(
-    { className: s.arrow },
-    arrowPropsCommon,
-    slotProps?.arrow
-  );
-  const dialogProps = mergeProps(
-    {
-      role: "dialog",
-      hideCloseButton,
-      className: s.dialog,
-      onClose: state.close
-    },
-    slotProps?.dialog
-  );
-  const backdropProps = mergeProps(
-    { className: s.underlay },
-    slotProps?.backdrop,
-    underlayProps
-  );
-  const transitionProps = mergeProps(
-    {
-      timeout: 120,
-      onEnter: on,
-      onExited: off,
-      appear: true,
-      in: openState,
-      nodeRef: domRef,
-      unmountOnExit: true
-    },
-    slotProps?.transition
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    control?.({
-      ref: controlRef,
-      ...triggerProps
-    }),
-    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
-      Overlay,
-      {
-        portalContainer,
-        disableFocusManagement,
-        children: [
-          /* @__PURE__ */ jsx("div", { ...backdropProps }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: domRef,
-              "data-size": size,
-              "data-arrow": showArrow,
-              "data-placement": placement,
-              "data-transition": transition,
-              className: clsx(s.base, s[size], className),
-              ...mergeProps(popoverProps, other),
-              style: {
-                ...popoverProps.style,
-                "--popover-inline-size": normalizeInlineSize(size)
-              },
-              children: [
-                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
-                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
-              ]
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-};
 const PopoverComponent = forwardRef(
   (props, ref) => {
     const { open, onOpenChange, defaultOpen, ...other } = props;
@@ -156,6 +22,5 @@ Popover.Header = Dialog.Header;
 Popover.Body = Dialog.Body;
 Popover.Footer = Dialog.Footer;
 export {
-  Popover,
-  PopoverInner
+  Popover
 };

package/dist/components/Popover/PopoverInner.d.ts

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

package/dist/components/Popover/PopoverInner.js

@@ -0,0 +1,142 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, cloneElement, isValidElement } from "react";
+import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./Popover.module.css.js";
+import { normalizeInlineSize } from "./utils.js";
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverInner = (props) => {
+  const {
+    offset = 0,
+    size = "medium",
+    crossOffset = 0,
+    hideArrow = false,
+    containerPadding = 12,
+    arrowBoundaryOffset = 20,
+    placement: placementProp = "top",
+    maxBlockSize = 480,
+    type = "dialog",
+    state,
+    control,
+    children,
+    anchorRef,
+    slotProps,
+    className,
+    isNonModal,
+    popoverRef,
+    portalContainer,
+    hideCloseButton,
+    disableFocusManagement,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
+    ...other
+  } = props;
+  const showArrow = !hideArrow;
+  const domRef = useDOMRef(popoverRef);
+  const controlRef = useRef(null);
+  const openState = state.isOpen;
+  const [opened, { on, off }] = useBoolean(openState);
+  const { triggerProps, overlayProps } = useOverlayTrigger(
+    { type },
+    { ...state, isOpen: openState }
+  );
+  const {
+    popoverProps,
+    underlayProps,
+    arrowProps: arrowPropsCommon,
+    placement
+  } = usePopover(
+    {
+      ...props,
+      offset,
+      isNonModal,
+      crossOffset,
+      containerPadding,
+      popoverRef: domRef,
+      arrowBoundaryOffset,
+      maxHeight: maxBlockSize,
+      placement: placementProp,
+      shouldCloseOnInteractOutside,
+      triggerRef: anchorRef || controlRef,
+      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+    },
+    { ...state, isOpen: openState || opened }
+  );
+  const resolvedChildren = () => {
+    if (typeof children === "function")
+      return cloneElement(children({ close: state.close }), overlayProps);
+    if (isValidElement(children)) return cloneElement(children, overlayProps);
+    return children;
+  };
+  const arrowProps = mergeProps(
+    { className: s.arrow },
+    arrowPropsCommon,
+    slotProps?.arrow
+  );
+  const dialogProps = mergeProps(
+    {
+      role: "dialog",
+      hideCloseButton,
+      className: s.dialog,
+      onClose: state.close
+    },
+    slotProps?.dialog
+  );
+  const backdropProps = mergeProps(
+    { className: s.underlay },
+    slotProps?.backdrop,
+    underlayProps
+  );
+  const transitionProps = mergeProps(
+    {
+      timeout: 120,
+      onEnter: on,
+      onExited: off,
+      appear: true,
+      in: openState,
+      nodeRef: domRef,
+      unmountOnExit: true
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      ...triggerProps
+    }),
+    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
+      Overlay,
+      {
+        portalContainer,
+        disableFocusManagement,
+        children: [
+          /* @__PURE__ */ jsx("div", { ...backdropProps }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: domRef,
+              "data-size": size,
+              "data-arrow": showArrow,
+              "data-placement": placement,
+              "data-transition": transition,
+              className: clsx(s.base, s[size], className),
+              ...mergeProps(popoverProps, other),
+              style: {
+                ...popoverProps.style,
+                "--popover-inline-size": normalizeInlineSize(size)
+              },
+              children: [
+                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
+                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  PopoverInner
+};

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

@@ -33,5 +33,5 @@ export type RadioGroupBaseProps = ExtendableProps<{
     defaultValue?: UseRadioGroupProps['defaultValue'];
     /** Handler that is called when the value changes. */
     onChange?: UseRadioGroupProps['onChange'];
-}, UseRadioGroupProps>;
+}, Omit<UseRadioGroupProps, 'validationBehavior' | 'validate' | 'validationState'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;

package/dist/components/Select/Select.js

@@ -4,9 +4,9 @@ import { deprecate } from "@koobiq/logger";
 import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
 import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
-import { PopoverInner } from "../Popover/Popover.js";
 import { ListInner } from "../List/List.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
@@ -114,7 +114,11 @@ function SelectRender(props, ref) {
     slotProps?.list,
     menuProps
   );
-  const labelProps = mergeProps({ isHidden: isLabelHidden, isRequired }, slotProps?.label, labelPropsAria);
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    slotProps?.label,
+    labelPropsAria
+  );
   const groupProps = mergeProps(
     {
       slotProps: {
@@ -142,8 +146,12 @@ function SelectRender(props, ref) {
     valueProps,
     triggerProps
   );
-  const captionProps = mergeProps({ isInvalid }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps({ isInvalid }, slotProps?.errorMessage, errorMessageProps);
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
   const popoverProps = mergeProps(
     {
       state,
@@ -167,7 +175,7 @@ function SelectRender(props, ref) {
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
       /* @__PURE__ */ jsx(
         HiddenSelect,
         {
@@ -179,8 +187,8 @@ function SelectRender(props, ref) {
         }
       ),
       /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
   ] });

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

@@ -69,14 +69,14 @@ export type SelectProps<T extends object> = {
      */
     isInvalid?: boolean;
     /** Message for the error state */
-    errorMessage?: string | number;
+    errorMessage?: ReactNode;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
      */
     isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false

package/dist/components/Textarea/Textarea.d.ts

@@ -4,17 +4,17 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "className" | "cols" | "rows" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "className" | "cols" | "rows" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "isLabelHidden" | "expand"> & {
     label?: import("react").ReactNode;
     className?: string;
     variant?: import("./types").TextareaPropVariant;
     isInvalid?: boolean;
     isReadOnly?: boolean;
-    errorMessage?: string | number;
+    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isDisabled?: boolean;
     isLabelHidden?: boolean;
-    caption?: string | number;
+    caption?: import("react").ReactNode;
     isRequired?: boolean;
     rows?: number;
     cols?: number;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -39,23 +39,20 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     },
     slotProps?.textarea
   );
-  const captionProps = mergeProps(
-    { isInvalid },
-    slotProps?.caption
-  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
   const errorProps = mergeProps(
-    { isInvalid },
+    { isInvalid, children: errorMessage },
     slotProps?.errorMessage
   );
   const labelProps = mergeProps(
-    { isHidden: isLabelHidden, isRequired },
+    { isHidden: isLabelHidden, children: label, isRequired },
     slotProps?.label
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: labelProps.children || label }),
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
     /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });
 });
 TextareaContextConsumer.displayName = "TextareaContextConsumer";

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

@@ -69,7 +69,7 @@ export type TextareaProps = ExtendableProps<{
      */
     isReadOnly?: boolean;
     /** Message for the error state */
-    errorMessage?: string | number;
+    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false
@@ -86,7 +86,7 @@ export type TextareaProps = ExtendableProps<{
      */
     isLabelHidden?: boolean;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * If `true`, the label is displayed as required and the input element is required.
      * @default false
@@ -112,6 +112,6 @@ export type TextareaProps = ExtendableProps<{
         textarea?: FieldInputProps<'textarea'>;
         errorMessage?: FieldErrorProps;
     };
-}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
+}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validationState' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;
 export {};

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export * from './ButtonToggleGroup';
 export * from './TagGroup';
 export * from './Table';
 export * from './Calendar';
+export * from './DateInput';
 export * from './layout';
-export { useListData } from '@koobiq/react-primitives';
+export { useListData, useDateFormatter, type DateFormatterOptions, } from '@koobiq/react-primitives';
 export { useRouter, RouterProvider } from '@koobiq/react-primitives';

package/dist/index.js

@@ -1,5 +1,5 @@
 /* empty css           */
-import { RouterProvider, useListData, useLocale, useRouter } from "@koobiq/react-primitives";
+import { RouterProvider, useDateFormatter, useListData, useLocale, useRouter } from "@koobiq/react-primitives";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
@@ -50,7 +50,7 @@ import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
 import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
 import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
-import { Popover, PopoverInner } from "./components/Popover/Popover.js";
+import { Popover } from "./components/Popover/Popover.js";
 import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
 import { PopoverContent, PopoverFooter, PopoverHeader } from "./components/Popover/index.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
@@ -73,6 +73,8 @@ import { Tag } from "./components/TagGroup/Tag.js";
 import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { Table } from "./components/Table/Table.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
+import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
+import { dateInputPropVariant } from "./components/DateInput/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -87,6 +89,8 @@ export {
   Calendar,
   Checkbox,
   Container,
+  DateInput,
+  DateInputRender,
   Divider,
   FlexBox,
   Grid,
@@ -109,7 +113,6 @@ export {
   PopoverContent,
   PopoverFooter,
   PopoverHeader,
-  PopoverInner,
   ProgressBar,
   ProgressSpinner,
   Provider,
@@ -142,6 +145,7 @@ export {
   checkboxPropSize,
   containerMarginsProp,
   containerPositionProp,
+  dateInputPropVariant,
   defaultBreakpoints,
   dividerPropDisplay,
   dividerPropOrientation,
@@ -187,6 +191,7 @@ export {
   typographyPropDisplay,
   typographyPropVariant,
   useBreakpoints,
+  useDateFormatter,
   useListData,
   useLocale,
   useMatchedBreakpoints,

package/dist/style.css

@@ -2109,6 +2109,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-contrast-secondary);
+  margin: 0;
   transition: color var(--kbq-transition-default);
   margin-block-start: var(--kbq-size-xxs);
 }
@@ -2124,6 +2125,7 @@
   letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
   color: var(--kbq-foreground-error);
+  margin: 0;
   transition: color var(--kbq-transition-default);
   margin-block-start: var(--kbq-size-xxs);
 }
@@ -3748,6 +3750,113 @@
   color: var(--kbq-states-foreground-disabled);
   cursor: not-allowed;
 }
+.kbq-dateinput-a4c39b {
+  min-inline-size: 150px;
+}
+.kbq-fieldinputdate-a54331 {
+  --field-input-outline-width: var(--kbq-size-3xs);
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: var(--kbq-line-contrast-fade);
+  --field-input-outline-color: var(--kbq-states-line-focus-theme);
+  --field-input-bg-color: var(--kbq-background-bg);
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  cursor: pointer;
+  outline-offset: -1px;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--kbq-size-3xl);
+  border-radius: var(--kbq-size-s);
+  color: var(--field-input-color);
+  background: var(--field-input-bg-color);
+  border: 1px solid var(--field-input-border-color);
+  outline: var(--field-input-outline-width) solid transparent;
+  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
+  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  transition: color var(--kbq-transition-default), outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), border-color var(--kbq-transition-default);
+  align-items: center;
+  display: flex;
+}
+
+.kbq-fieldinputdate-a54331:focus-within {
+  outline-color: var(--field-input-outline-color);
+}
+
+.kbq-fieldinputdate-transparent-04d912 {
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: transparent;
+  --field-input-outline-color: transparent;
+  --field-input-bg-color: transparent;
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+}
+
+.kbq-fieldinputdate-filled-02db7d {
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: var(--kbq-line-contrast-fade);
+  --field-input-outline-color: var(--kbq-states-line-focus-theme);
+  --field-input-bg-color: var(--kbq-background-bg);
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+}
+
+.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-invalid-d764c6) {
+  --field-input-color: var(--kbq-foreground-error);
+  --field-input-border-color: var(--kbq-line-error);
+  --field-input-outline-color: var(--kbq-states-line-focus-error);
+  --field-input-bg-color: var(--kbq-states-background-error-less);
+  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+}
+
+.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-invalid-d764c6) {
+  --field-input-color: var(--kbq-foreground-error);
+  --field-input-border-color: transparent;
+  --field-input-outline-color: transparent;
+  --field-input-bg-color: transparent;
+  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+}
+
+.kbq-fieldinputdate-disabled-692832 {
+  cursor: not-allowed;
+}
+
+.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-disabled-692832) {
+  --field-input-color: var(--kbq-states-foreground-disabled);
+  --field-input-border-color: var(--kbq-states-line-disabled);
+  --field-input-bg-color: var(--kbq-states-background-disabled);
+}
+
+.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-disabled-692832) {
+  --field-input-color: var(--kbq-states-foreground-disabled);
+}
+.kbq-dateinputsegment-996e10 {
+  --date-input-segment-color: var(--field-input-color);
+  color: var(--date-input-segment-color);
+}
+
+.kbq-dateinputsegment-996e10:focus {
+  color: var(--date-input-segment-color);
+  background-color: highlight;
+  outline: none;
+}
+
+.kbq-dateinputsegment-placeholder-be1df1 {
+  color: var(--field-input-placeholder-color);
+}
+
+.kbq-dateinputsegment-literal-d722fc {
+  white-space: pre;
+}
+
+.kbq-dateinputsegment-literal-d722fc:not(.kbq-dateinputsegment-hasValue-886d0f) {
+  color: var(--field-input-placeholder-color);
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }