@veritone-ce/design-system 2.3.3 → 2.3.5

package/dist/esm/DatePicker/Calendar.js

@@ -0,0 +1,146 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useLocale, useCalendar, useCalendarGrid, useCalendarCell } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+import { createCalendar, getWeeksInMonth } from '@internationalized/date';
+import Button from '../Button/index.js';
+import IconButton from '../IconButton/index.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { ArrowDropUp, ArrowBackIosNew, ArrowForwardIos } from '@mui/icons-material';
+import modules_efc4e723 from './styles.module.scss.js';
+import 'color2k';
+import '../styles/css-vars.js';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '@mui/system';
+import '../Box/index.js';
+import '../styles/styled.js';
+
+const ArrowUpDownIcon = adaptMuiSvgIcon(ArrowDropUp);
+const ArrowBackIcon = adaptMuiSvgIcon(ArrowBackIosNew);
+const ArrowForwardIcon = adaptMuiSvgIcon(ArrowForwardIos);
+function Calendar({
+  changeYear: propsChangeYear,
+  ...props
+}) {
+  const { locale } = useLocale();
+  const [yearPickerIsOpen, setYearPickerIsOpen] = React__default.useState(false);
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);
+  const changeYear = (year) => {
+    propsChangeYear(year);
+    setYearPickerIsOpen(false);
+  };
+  const handlePrevButtonClick = (e) => {
+    prevButtonProps.onPress?.(e);
+  };
+  const handleNextButtonClick = (e) => {
+    nextButtonProps.onPress?.(e);
+  };
+  const toggleYearPicker = () => {
+    setYearPickerIsOpen(!yearPickerIsOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...calendarProps, className: modules_efc4e723.calendarBox, children: [
+    /* @__PURE__ */ jsxs("div", { className: modules_efc4e723.calendarHeader, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          palette: defaultThemeCssVariableUsages.palette.action.text,
+          endIcon: /* @__PURE__ */ jsx(
+            ArrowUpDownIcon,
+            {
+              style: !yearPickerIsOpen ? {
+                transform: "rotate(180deg)",
+                transition: "0.3s ease"
+              } : { transition: "0.3s ease" }
+            }
+          ),
+          onClick: () => toggleYearPicker(),
+          children: title
+        }
+      ),
+      !yearPickerIsOpen && /* @__PURE__ */ jsxs("div", { className: modules_efc4e723.monthPickerArrowButtonsWrapper, children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: (e) => handlePrevButtonClick(e), children: /* @__PURE__ */ jsx(ArrowBackIcon, { size: "small" }) }),
+        /* @__PURE__ */ jsx(IconButton, { onClick: (e) => handleNextButtonClick(e), children: /* @__PURE__ */ jsx(ArrowForwardIcon, { size: "small" }) })
+      ] })
+    ] }),
+    yearPickerIsOpen ? /* @__PURE__ */ jsx(YearPicker, { changeYear, activeYear: state.value?.year }) : /* @__PURE__ */ jsx(CalendarGrid, { state })
+  ] });
+}
+function CalendarGrid({
+  state,
+  startDate,
+  endDate,
+  weekdayStyle
+}) {
+  const { locale } = useLocale();
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { startDate, endDate, weekdayStyle },
+    state
+  );
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  return /* @__PURE__ */ jsxs("table", { className: modules_efc4e723.calendarGrid, ...gridProps, children: [
+    /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { className: modules_efc4e723.weekdayHeader, children: day }, index)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: [...new Array(Math.max(weeksInMonth, 6)).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+    ) }, weekIndex)) })
+  ] });
+}
+function CalendarCell({ state, date }) {
+  const ref = React__default.useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    formattedDate
+  } = useCalendarCell({ date }, state, ref);
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ref,
+      size: "small",
+      variant: !isSelected ? "tertiary" : "secondary",
+      active: isSelected,
+      disabled: isDisabled,
+      className: modules_efc4e723.calendarCellBtn,
+      style: isOutsideVisibleRange ? { display: "none" } : {},
+      children: formattedDate
+    }
+  ) });
+}
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const years = Array.from(
+  { length: currentYear + 1 - 1900 },
+  (_, i) => currentYear - i
+);
+function YearPicker({
+  changeYear,
+  activeYear
+}) {
+  return /* @__PURE__ */ jsx("div", { className: modules_efc4e723.yearPickerLayout, children: years.map((year, index) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      size: "small",
+      active: year === activeYear,
+      className: modules_efc4e723.yearPillButton,
+      onClick: () => {
+        changeYear(year);
+      },
+      children: year
+    },
+    index
+  )) });
+}
+
+export { Calendar as default };

package/dist/esm/DatePicker/DateField.js

@@ -0,0 +1,26 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useLocale, useDateField, useDateSegment } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { createCalendar } from '@internationalized/date';
+import modules_efc4e723 from './styles.module.scss.js';
+
+function DateField(props) {
+  const ref = React__default.useRef(null);
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const { fieldProps } = useDateField(props, state, ref);
+  return /* @__PURE__ */ jsx("div", { ...fieldProps, ref, className: modules_efc4e723.reactAriaDateInput, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, { segment, state }, i)) });
+}
+function DateSegmentItem({ segment, state }) {
+  const ref = React__default.useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ jsx("div", { ...segmentProps, ref, children: segment.text });
+}
+
+export { DateField as default };

package/dist/esm/DatePicker/index.js

@@ -0,0 +1,118 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useFloating, useRole, useDismiss, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useDatePicker } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
+import { parseDate } from '@internationalized/date';
+import Calendar from './Calendar.js';
+import DateField from './DateField.js';
+import IconButton from '../IconButton/index.js';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { CalendarTodayOutlined } from '@mui/icons-material';
+import modules_efc4e723 from './styles.module.scss.js';
+import { PortalThemeRelay } from '../styles/portal.js';
+import { useFormControlContext } from '../FormControl/context.js';
+
+const CalendarTodayOutlinedIcon = adaptMuiSvgIcon(CalendarTodayOutlined);
+function DatePicker({
+  placement = "bottom-start",
+  ...props
+}) {
+  const ctx = useFormControlContext();
+  const disabled = props.disabled ?? ctx.disabled;
+  const error = props.error ?? ctx.error;
+  const formatProps = {
+    label: "Date Picker",
+    // TODO: perhaps get from context?
+    value: props.value ? parseDate(props.value) : void 0,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    defaultValue: props.defaultValue ? parseDate(props.defaultValue) : void 0,
+    onChange: (newValue) => {
+      props.onChange?.(newValue.toString());
+    }
+  };
+  const ref = useRef(null);
+  const state = useDatePickerState(formatProps);
+  const {
+    groupProps,
+    /*labelProps,*/
+    fieldProps,
+    buttonProps,
+    calendarProps
+  } = useDatePicker(formatProps, state, ref);
+  const { refs, floatingStyles, context } = useFloating({
+    // ensure floating ui state is up to date with date picker state
+    open: state.isOpen,
+    // any floating-ui native stuff will trigger this, rippling up to date picker state
+    onOpenChange: (open) => {
+      open ? state.setOpen(open) : state.close();
+    },
+    placement
+  });
+  const role = useRole(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    role
+  ]);
+  const changeYear = (year) => {
+    const currentMonthSelected = state.dateValue?.month ?? 1;
+    const currentDaySelected = state.dateValue?.day ?? 1;
+    state.setDateValue(
+      parseDate(
+        `${year}-${currentMonthSelected.toString().length === 1 ? "0" + currentMonthSelected : currentMonthSelected}-${currentDaySelected.toString().length === 1 ? "0" + currentDaySelected : currentDaySelected}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getReferenceProps(),
+      ref: refs.setReference,
+      "data-testid": props["data-testid"],
+      className: modules_efc4e723.reactAriaDatePicker,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...groupProps,
+            ref,
+            "data-disabled": disabled,
+            "data-focused": state.isOpen,
+            "data-error": error,
+            className: modules_efc4e723.reactAriaGroup,
+            children: [
+              /* @__PURE__ */ jsx(DateField, { ...fieldProps }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  ...buttonProps,
+                  disabled,
+                  onClick: () => context.onOpenChange(!context.open),
+                  className: modules_efc4e723.reactAriaButton,
+                  children: /* @__PURE__ */ jsx(CalendarTodayOutlinedIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        context.open && /* @__PURE__ */ jsx(FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: refs.setFloating,
+            style: {
+              ...floatingStyles
+            },
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps, changeYear })
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+
+export { DatePicker as default };

package/dist/esm/DatePicker/styles.module.scss.js

@@ -0,0 +1,3 @@
+var modules_efc4e723 = {"reactAriaDatePicker":"vt_ce_DatePicker_reactAriaDatePicker__c88815e1","reactAriaGroup":"vt_ce_DatePicker_reactAriaGroup__c88815e1","reactAriaButton":"vt_ce_DatePicker_reactAriaButton__c88815e1","reactAriaDateInput":"vt_ce_DatePicker_reactAriaDateInput__c88815e1","calendarBox":"vt_ce_DatePicker_calendarBox__c88815e1","calendarHeader":"vt_ce_DatePicker_calendarHeader__c88815e1","monthPickerArrowButtonsWrapper":"vt_ce_DatePicker_monthPickerArrowButtonsWrapper__c88815e1","yearPickerLayout":"vt_ce_DatePicker_yearPickerLayout__c88815e1","yearPillButton":"vt_ce_DatePicker_yearPillButton__c88815e1","calendarGrid":"vt_ce_DatePicker_calendarGrid__c88815e1","weekdayHeader":"vt_ce_DatePicker_weekdayHeader__c88815e1","calendarCellBtn":"vt_ce_DatePicker_calendarCellBtn__c88815e1"};
+
+export { modules_efc4e723 as default };

package/dist/esm/DateRangePicker/index.js

@@ -0,0 +1,37 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import DatePicker from '../DatePicker/index.js';
+import modules_efc4e723 from './styles.module.scss.js';
+import FormControl from '../FormControl/index.js';
+import { useFormControlContext } from '../FormControl/context.js';
+
+function DateRangePicker({
+  startDate,
+  endDate,
+  portalEl
+}) {
+  const ctx = useFormControlContext();
+  return /* @__PURE__ */ jsxs("span", { className: modules_efc4e723.dateRangePickerWrapper, children: [
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...startDate.control,
+        children: /* @__PURE__ */ jsx(DatePicker, { ...startDate.props, portalEl })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        disabled: ctx.disabled,
+        error: ctx.error,
+        ...endDate.control,
+        children: /* @__PURE__ */ jsx(DatePicker, { ...endDate.props, portalEl })
+      }
+    )
+  ] });
+}
+
+export { DateRangePicker as default };

package/dist/esm/DateRangePicker/styles.module.scss.js

@@ -0,0 +1,3 @@
+var modules_efc4e723 = {"dateRangePickerWrapper":"vt_ce_DateRangePicker_dateRangePickerWrapper__8b44f64e"};
+
+export { modules_efc4e723 as default };

package/dist/esm/Drawer/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__923c77c9","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__923c77c9","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__923c77c9","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__923c77c9","drawer-overlay-placement-start":"vt_ce_Drawer_drawerOverlayPlacementStart__923c77c9","drawer":"vt_ce_Drawer_drawer__923c77c9","drawer-overlay-placement-end":"vt_ce_Drawer_drawerOverlayPlacementEnd__923c77c9","drawer-wrapper":"vt_ce_Drawer_drawerWrapper__923c77c9","drawer-start":"vt_ce_Drawer_drawerStart__923c77c9","drawer-end":"vt_ce_Drawer_drawerEnd__923c77c9","drawer-content":"vt_ce_Drawer_drawerContent__923c77c9","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__923c77c9","drawer-title":"vt_ce_Drawer_drawerTitle__923c77c9","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__923c77c9","drawer-typography":"vt_ce_Drawer_drawerTypography__923c77c9","drawer-actions":"vt_ce_Drawer_drawerActions__923c77c9"};
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__8f34504f","drawer-overlay-enabled":"vt_ce_Drawer_drawerOverlayEnabled__8f34504f","drawer-overlay-strategy-fixed":"vt_ce_Drawer_drawerOverlayStrategyFixed__8f34504f","drawer-overlay-strategy-absolute":"vt_ce_Drawer_drawerOverlayStrategyAbsolute__8f34504f","drawer-overlay-placement-start":"vt_ce_Drawer_drawerOverlayPlacementStart__8f34504f","drawer":"vt_ce_Drawer_drawer__8f34504f","drawer-overlay-placement-end":"vt_ce_Drawer_drawerOverlayPlacementEnd__8f34504f","drawer-wrapper":"vt_ce_Drawer_drawerWrapper__8f34504f","drawer-start":"vt_ce_Drawer_drawerStart__8f34504f","drawer-end":"vt_ce_Drawer_drawerEnd__8f34504f","drawer-content":"vt_ce_Drawer_drawerContent__8f34504f","drawer-title-container":"vt_ce_Drawer_drawerTitleContainer__8f34504f","drawer-title":"vt_ce_Drawer_drawerTitle__8f34504f","drawer-title-actions":"vt_ce_Drawer_drawerTitleActions__8f34504f","drawer-typography":"vt_ce_Drawer_drawerTypography__8f34504f","drawer-actions":"vt_ce_Drawer_drawerActions__8f34504f"};
 
 export { modules_efc4e723 as default };

package/dist/esm/FormControl/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__8c1edd74","placement-block-start":"vt_ce_FormControl_placementBlockStart__8c1edd74","label":"vt_ce_FormControl_label__8c1edd74","placement-inline-start":"vt_ce_FormControl_placementInlineStart__8c1edd74","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__8c1edd74","inner-control":"vt_ce_FormControl_innerControl__8c1edd74","help-label":"vt_ce_FormControl_helpLabel__8c1edd74","error-label":"vt_ce_FormControl_errorLabel__8c1edd74"};
+var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__876f6d27","placement-block-start":"vt_ce_FormControl_placementBlockStart__876f6d27","label":"vt_ce_FormControl_label__876f6d27","placement-inline-start":"vt_ce_FormControl_placementInlineStart__876f6d27","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__876f6d27","inner-control":"vt_ce_FormControl_innerControl__876f6d27","help-label":"vt_ce_FormControl_helpLabel__876f6d27","error-label":"vt_ce_FormControl_errorLabel__876f6d27"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Input/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__81e6382e","inner-input":"vt_ce_Input_innerInput__81e6382e","input-icon":"vt_ce_Input_inputIcon__81e6382e"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Menu/controlled.js

@@ -10,7 +10,7 @@ import '@mui/system';
 import { PortalThemeRelay } from '../styles/portal.js';
 import '../styles/styled.js';
 import '../Box/index.js';
-import { useListItem, useMergeRefs, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useListItem, useMergeRefs, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, useTransitionStyles, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import modules_efc4e723 from './styles.module.scss.js';
 import { resolvePopoverAnchor } from '../popover/utils.js';
 
@@ -85,7 +85,14 @@ function Menu({
     listNavigation,
     typeahead
   ]);
-  return /* @__PURE__ */ jsx(FloatingList, { elementsRef, labelsRef, children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsx(
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
+  return /* @__PURE__ */ jsx(FloatingList, { elementsRef, labelsRef, children: isMounted && /* @__PURE__ */ jsx(FloatingPortal, { root: props.portalEl, children: /* @__PURE__ */ jsx(
     FloatingFocusManager,
     {
       context,
@@ -100,32 +107,41 @@ function Menu({
           tabIndex: 0,
           "aria-labelledby": anchor?.id || props.anchorId,
           style: {
-            ...floatingStyles,
-            ...props.style
+            ...floatingStyles
           },
           ...getFloatingProps(),
-          className: cx(modules_efc4e723["menu"], className),
-          children: options.map((option, i) => /* @__PURE__ */ jsx(
-            MenuItem,
+          children: /* @__PURE__ */ jsx(
+            "div",
             {
-              role: "menuitem",
-              isActive: i === activeIndex,
-              ...getItemProps({
-                onClick(event) {
-                  option.onSelect(event);
-                }
-              }),
-              label: option.label,
-              icon: option.icon
-            },
-            i
-          ))
+              style: {
+                ...transitionStyles,
+                ...props.style
+              },
+              className: cx(modules_efc4e723["menu"], className),
+              children: options.map((option, i) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  role: "menuitem",
+                  isActive: i === activeIndex,
+                  ...getItemProps({
+                    onClick(event) {
+                      option.onSelect(event);
+                    }
+                  }),
+                  render: option.render,
+                  label: option.label,
+                  icon: option.icon
+                },
+                i
+              ))
+            }
+          )
         }
       ) })
     }
   ) }) });
 }
-const MenuItem = React__default.forwardRef(({ label, disabled, isActive, ...props }, forwardedRef) => {
+const MenuItem = React__default.forwardRef(({ label, render, disabled, isActive, ...props }, forwardedRef) => {
   const item = useListItem({ label: disabled ? null : label });
   return /* @__PURE__ */ jsxs(
     "button",
@@ -139,7 +155,7 @@ const MenuItem = React__default.forwardRef(({ label, disabled, isActive, ...prop
       disabled,
       children: [
         props.icon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["option-icon"], children: props.icon }),
-        /* @__PURE__ */ jsx("span", { className: modules_efc4e723["option-label"], children: label })
+        /* @__PURE__ */ jsx("span", { className: modules_efc4e723["option-label"], children: render ?? label })
       ]
     }
   );

package/dist/esm/RadioButton/index.js

@@ -13,7 +13,16 @@ import '../Box/index.js';
 import '../styles/styled.js';
 
 const RadioButton = forwardRef(
-  ({ checked = false, disabled = false, ...props }, ref) => {
+  ({
+    defaultChecked,
+    checked,
+    label,
+    disabled = false,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
     const inputRef = useRef(null);
     const forkedRef = useForkRef(inputRef, ref);
     const labelId = useId();
@@ -22,33 +31,33 @@ const RadioButton = forwardRef(
       {
         role: "radio",
         "aria-labelledby": labelId,
-        "aria-checked": checked,
+        "aria-checked": checked ?? defaultChecked,
         "aria-disabled": disabled,
         onClick: (e) => {
           inputRef.current?.click();
           e.stopPropagation();
           e.preventDefault();
         },
-        "data-testid": props["data-testid"],
-        style: props.style,
-        className: cx(modules_efc4e723["radio"], props.className),
+        "data-testid": dataTestId,
+        style,
+        className: cx(modules_efc4e723["radio"], className),
         children: [
           /* @__PURE__ */ jsxs("label", { className: modules_efc4e723["passthrough-label-container"], children: [
             /* @__PURE__ */ jsx(
               "input",
               {
+                ...props,
                 type: "radio",
-                name: props.name,
                 ref: forkedRef,
+                defaultChecked,
                 checked,
                 disabled,
-                onChange: props.onChange,
                 className: modules_efc4e723["invisible-radio"]
               }
             ),
             /* @__PURE__ */ jsx("span", { className: modules_efc4e723["icon-container"], children: /* @__PURE__ */ jsx(RadioIcon, {}) })
           ] }),
-          props.label && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["visible-label"], id: labelId, children: props.label })
+          label && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["visible-label"], id: labelId, children: label })
         ]
       }
     );

package/dist/esm/RadioButton/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__d49ab70a","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__d49ab70a","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__d49ab70a","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__d49ab70a","invisible-radio":"vt_ce_RadioButton_invisibleRadio__d49ab70a","visible-label":"vt_ce_RadioButton_visibleLabel__d49ab70a","icon-container":"vt_ce_RadioButton_iconContainer__d49ab70a"};
+var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__903bab82","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__903bab82","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__903bab82","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__903bab82","invisible-radio":"vt_ce_RadioButton_invisibleRadio__903bab82","visible-label":"vt_ce_RadioButton_visibleLabel__903bab82","icon-container":"vt_ce_RadioButton_iconContainer__903bab82"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Select/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"select":"vt_ce_Select_select__a4ea9d62","inner-input":"vt_ce_Select_innerInput__a4ea9d62","select-icon":"vt_ce_Select_selectIcon__a4ea9d62"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__839d0f7a","inner-input":"vt_ce_Select_innerInput__839d0f7a","select-icon":"vt_ce_Select_selectIcon__839d0f7a"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Textarea/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__bb23b4a3","inner-textarea":"vt_ce_Textarea_innerTextarea__bb23b4a3"};
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__a749e5d6","inner-textarea":"vt_ce_Textarea_innerTextarea__a749e5d6"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Tooltip/index.js

@@ -1,7 +1,7 @@
 'use strict';
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useFloating, offset, inline, flip, shift, arrow, autoUpdate, useRole, useHover, safePolygon, useFocus, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
+import { useFloating, offset, inline, flip, shift, arrow, autoUpdate, useRole, useHover, safePolygon, useFocus, useDismiss, useInteractions, useTransitionStyles, FloatingArrow } from '@floating-ui/react';
 import React__default from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
 import 'color2k';
@@ -51,6 +51,13 @@ function Tooltip({
     hover,
     dismiss
   ]);
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -62,17 +69,16 @@ function Tooltip({
         children: props.children
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    isMounted && /* @__PURE__ */ jsxs(
       "div",
       {
         ref: refs.setFloating,
         "data-testid": props["data-testid"],
         style: {
-          ...floatingStyles,
-          ...props.style
+          ...floatingStyles
         },
+        className: modules_efc4e723["tooltip-float"],
         ...getFloatingProps(),
-        className: modules_efc4e723["tooltip-body"],
         children: [
           showArrow && /* @__PURE__ */ jsx(
             FloatingArrow,
@@ -81,10 +87,18 @@ function Tooltip({
               context,
               fill: defaultThemeCssVariableUsages.palette.background.primary,
               stroke: defaultThemeCssVariableUsages.palette.background.secondary,
-              strokeWidth: 1
+              strokeWidth: 1,
+              style: { ...transitionStyles }
             }
           ),
-          /* @__PURE__ */ jsx("div", { children: props.tooltip })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { ...transitionStyles, ...props.style },
+              className: modules_efc4e723["tooltip-body"],
+              children: props.tooltip
+            }
+          )
         ]
       }
     )

package/dist/esm/Tooltip/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__4170edb1","tooltip-body":"vt_ce_Tooltip_tooltipBody__4170edb1"};
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__eccca1a2","tooltip-float":"vt_ce_Tooltip_tooltipFloat__eccca1a2","tooltip-body":"vt_ce_Tooltip_tooltipBody__eccca1a2"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Typography/index.js

@@ -11,7 +11,7 @@ import '../styles/styled.js';
 import modules_b5c3b63b from './variants.module.scss.js';
 
 const Typography = forwardRef(
-  ({ variant = "paragraph1", color = "inherit", ...props }, ref) => {
+  ({ variant = "paragraph1", color = "primary", ...props }, ref) => {
     const variantCn = modules_b5c3b63b[`t-${variant}`];
     const VariantComponent = props.as ?? variantComponents[variant];
     const colorCn = modules_b5c3b63b[`c-${color}`];

package/dist/esm/index.js

@@ -19,6 +19,8 @@ export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
 export { default as CircularProgress } from './CircularProgress/index.js';
+export { default as DatePicker } from './DatePicker/index.js';
+export { default as DateRangePicker } from './DateRangePicker/index.js';
 export { default as Dialog, DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography } from './Dialog/components.js';
 export { createDialogComponent } from './Dialog/factory.js';
 export { default as Drawer, DrawerActions, DrawerCloseButton, DrawerCloseIconButton, DrawerContent, DrawerDescription, DrawerEnd, DrawerStart, DrawerTitle, DrawerTypography } from './Drawer/components.js';

package/dist/esm/styles/defaultTheme.js

@@ -32,7 +32,7 @@ const defaultDarkTheme = createTheme({
     },
     background: {
       primary: "#121212",
-      secondary: "#2F2F2F"
+      secondary: "#1F1F1F"
     },
     disabled: {
       on: "#7C848D",