@ssa-ui-kit/core 3.2.0 → 3.4.0

package/dist/index.js

@@ -8009,6 +8009,7 @@ __webpack_require__.d(__webpack_exports__, {
   FullscreenModeContext: () => (/* reexport */ FullscreenModeContext),
   FullscreenModeProvider: () => (/* reexport */ FullscreenModeProvider),
   GaugeChart: () => (/* reexport */ GaugeChart),
+  History: () => (/* reexport */ History),
   Icon: () => (/* reexport */ Icon_Icon),
   IconButton: () => (/* reexport */ IconButton),
   ImageItem: () => (/* reexport */ ImageItem),
@@ -9026,6 +9027,14 @@ __webpack_require__.d(Settings_namespaceObject, {
   Settings: () => (Settings)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/SettingClock.tsx
+var SettingClock_namespaceObject = {};
+__webpack_require__.r(SettingClock_namespaceObject);
+__webpack_require__.d(SettingClock_namespaceObject, {
+  ICON_NAME: () => (SettingClock_ICON_NAME),
+  SettingClock: () => (SettingClock)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Signature.tsx
 var Signature_namespaceObject = {};
 __webpack_require__.r(Signature_namespaceObject);
@@ -9289,6 +9298,7 @@ __webpack_require__.d(all_namespaceObject, {
   Roles: () => (Roles_namespaceObject),
   Search: () => (Search_namespaceObject),
   Seniority: () => (Seniority_namespaceObject),
+  SettingClock: () => (SettingClock_namespaceObject),
   Settings: () => (Settings_namespaceObject),
   Signature: () => (Signature_namespaceObject),
   Sleep: () => (Sleep_namespaceObject),
@@ -13222,6 +13232,30 @@ const Settings = ({
   })]
 });
 const Settings_ICON_NAME = 'settings';
+;// ./src/components/Icon/icons/SettingClock.tsx
+
+const SettingClock = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Setting clock',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.54277 0.0507812C9.14723 0.0507812 9.67856 0.437658 9.86211 1.01074L10.1336 1.85547C10.2657 2.26753 10.5743 2.58935 10.9461 2.79785C11.002 2.82923 11.0573 2.86237 11.1121 2.89551C11.4771 3.11622 11.9109 3.22652 12.3377 3.13965L13.2146 2.95996C13.8086 2.83888 14.4078 3.11082 14.7029 3.63379L15.1443 4.41602C15.4393 4.93909 15.3641 5.59721 14.9568 6.0498L14.3562 6.71875C14.0646 7.04303 13.9352 7.4734 13.9363 7.90137C13.9365 7.96627 13.9362 8.03177 13.9344 8.09668C13.9221 8.52458 14.0394 8.95659 14.323 9.28125L14.907 9.94922C15.3015 10.4011 15.3598 11.0593 15.0506 11.583L14.5887 12.3652C14.2792 12.8889 13.6713 13.1602 13.0809 13.0391L12.2098 12.8604C11.7848 12.7732 11.348 12.8837 10.9773 13.1045C10.9217 13.1376 10.8651 13.1698 10.8084 13.2012C10.4316 13.4095 10.1151 13.731 9.97246 14.1426L9.67949 14.9883C9.48055 15.5619 8.93823 15.9492 8.33379 15.9492H7.43046C6.82619 15.9492 6.29478 15.5621 6.11113 14.9893L5.84062 14.1436C5.70855 13.7315 5.39986 13.4097 5.02812 13.2012C4.9721 13.1697 4.91598 13.1377 4.86113 13.1045C4.49604 12.8837 4.06248 12.7733 3.63554 12.8604L2.75859 13.0391C2.16492 13.16 1.56545 12.8888 1.27031 12.3662L0.828902 11.584C0.533796 11.061 0.609386 10.4029 1.0164 9.9502L1.61796 9.28125C1.90953 8.95715 2.03793 8.5264 2.03691 8.09863C2.03673 8.03363 2.03699 7.96735 2.03886 7.90234C2.05116 7.47453 1.93469 7.0434 1.65117 6.71875L1.06718 6.05078C0.672554 5.59912 0.613806 4.94077 0.922652 4.41699L1.38457 3.63477C1.69397 3.11079 2.30181 2.8388 2.89238 2.95996L3.76347 3.13965C4.1883 3.22681 4.62536 3.11609 4.99589 2.89551C5.05147 2.8624 5.10814 2.83018 5.16484 2.79883C5.54154 2.59061 5.85793 2.26874 6.00078 1.85742L6.29375 1.01172C6.49251 0.438004 7.035 0.0510025 7.63945 0.0507812H8.54277ZM7.62578 1.04102C7.44804 1.04107 7.28875 1.15501 7.23027 1.32324L6.9373 2.16895C6.69519 2.86734 6.17663 3.36445 5.63457 3.66406C5.58737 3.69016 5.54022 3.71755 5.49394 3.74512C4.96063 4.06261 4.27136 4.25792 3.55156 4.11035L2.67949 3.93066C2.5055 3.89506 2.32687 3.97527 2.23613 4.12891L1.77421 4.91113C1.6837 5.06485 1.70061 5.25911 1.81718 5.39258L2.40117 6.06152C2.8808 6.61075 3.04789 7.3002 3.03007 7.91699C3.0285 7.97145 3.02797 8.0266 3.02812 8.08105C3.02972 8.69786 2.84504 9.38882 2.35039 9.93848L1.74882 10.6064C1.62957 10.7392 1.607 10.9335 1.69414 11.0879L2.13554 11.8701C2.22288 12.0242 2.39965 12.1038 2.57402 12.0684L3.45097 11.8896C4.17503 11.742 4.85889 11.9374 5.38359 12.2549C5.42928 12.2825 5.47561 12.3098 5.52226 12.3359C6.05612 12.6354 6.56133 13.1312 6.78496 13.8291L7.05546 14.6748C7.10979 14.8438 7.26716 14.958 7.44511 14.958H8.34746C8.52523 14.958 8.68445 14.844 8.74296 14.6758L9.03593 13.8311C9.27793 13.1326 9.7966 12.6356 10.3387 12.3359C10.3859 12.3098 10.4329 12.2825 10.4793 12.2549C11.0128 11.9371 11.7025 11.7419 12.4227 11.8896L13.2937 12.0684C13.4675 12.104 13.6462 12.0243 13.7371 11.8711L14.199 11.0889C14.2898 10.9352 14.2725 10.741 14.1561 10.6074L13.5721 9.93848C13.0925 9.38943 12.9255 8.69969 12.9432 8.08301C12.9447 8.02845 12.9462 7.97254 12.9461 7.91797C12.9445 7.30127 13.1294 6.61115 13.6238 6.06152L14.2244 5.39355C14.3438 5.26089 14.367 5.06657 14.2801 4.91211L13.8387 4.12988C13.7514 3.97528 13.5739 3.89506 13.3992 3.93066L12.5232 4.11035C11.7992 4.25805 11.1144 4.06255 10.5896 3.74512C10.544 3.7175 10.4976 3.69021 10.451 3.66406C9.91715 3.3646 9.4129 2.86779 9.18925 2.16992L8.91777 1.3252C8.86358 1.156 8.70713 1.04114 8.5291 1.04102H7.62578ZM7.93339 3.75098C8.26891 3.75118 8.51636 4.03464 8.5164 4.35352V7.89062L10.5613 9.12695C10.8405 9.29597 10.9275 9.66069 10.7762 9.94141C10.6205 10.2294 10.2598 10.3423 9.97148 10.168L7.63847 8.75586C7.45612 8.64553 7.34972 8.44547 7.34941 8.23633V4.35352C7.34945 4.03456 7.59776 3.75104 7.93339 3.75098Z",
+    fill: fill
+  })]
+});
+const SettingClock_ICON_NAME = 'setting-clock';
 ;// ./src/components/Icon/icons/Signature.tsx
 
 const Signature = ({
@@ -14038,6 +14072,8 @@ const Warning_ICON_NAME = 'warning';
 
 
 
+
+
 
 
 
@@ -14912,12 +14948,12 @@ const inputStatus =  true ? {
   styles: "position:absolute;top:34%;right:14px;display:flex;justify-content:center;align-items:center;border-radius:10px;width:14px;height:14px"
 } : 0;
 const styles_startElement =  true ? {
-  name: "1wiujvu",
-  styles: "position:absolute;top:0;left:14px;height:100%;width:auto;display:flex;justify-content:center;align-items:center;border-radius:10px"
+  name: "17ilj1r",
+  styles: "position:absolute;top:0;left:14px;height:100%;width:auto;display:flex;justify-content:center;align-items:center;border-radius:10px;button{padding:0;}"
 } : 0;
 const styles_endElement =  true ? {
-  name: "14yja53",
-  styles: "position:absolute;top:0;right:14px;height:100%;width:auto;display:flex;justify-content:center;align-items:center;border-radius:10px"
+  name: "9awk5g",
+  styles: "position:absolute;top:0;right:14px;height:100%;width:auto;display:flex;justify-content:center;align-items:center;border-radius:10px;button{padding:0;}"
 } : 0;
 ;// ./src/components/Input/InputStatusError.tsx
 
@@ -16997,7 +17033,9 @@ const DropdownContext = /*#__PURE__*/external_react_namespaceObject.createContex
   onChange: () => {
     /* noop */
   },
-  maxHeight: 200
+  maxHeight: 200,
+  listRef: undefined,
+  placement: 'bottom'
 });
 function useDropdownContext() {
   return external_react_namespaceObject.useContext(DropdownContext);
@@ -17038,7 +17076,9 @@ function DropdownOptions_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 const DropdownOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1qg2z4z0"
-} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;margin:4px 0 0;padding:0;background:", ({
+} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;padding:0;", ({
+  placement = 'bottom'
+}) => placement === 'top' ? 'bottom: 100%; top: auto; margin: 0 0 4px;' : 'top: 100%; bottom: auto; margin: 4px 0 0;', " background:", ({
   theme
 }) => theme.colors.white, ";border-radius:8px;max-height:", ({
   maxHeight = 200
@@ -17066,6 +17106,11 @@ const noItemsMsg = {
  * Renders the scrollable list of options that appears when the dropdown is open.
  * Provides proper ARIA attributes for accessibility and keyboard navigation.
  *
+ * Placement (opening upward or downward) is driven entirely by the parent
+ * Dropdown via context — this component does not calculate position itself.
+ * A ref is attached to the list element so Dropdown can measure its actual
+ * rendered height when determining the correct placement on each open.
+ *
  * @category Form Controls
  * @subcategory Selection
  *
@@ -17099,7 +17144,9 @@ const DropdownOptions = ({
   const {
     onChange,
     activeItem,
-    maxHeight
+    maxHeight,
+    listRef,
+    placement
   } = useDropdownContext();
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
 
@@ -17133,11 +17180,13 @@ const DropdownOptions = ({
     }, noItemsMsg.id));
   }
   return (0,jsx_runtime_namespaceObject.jsx)(DropdownOptionsBase, {
+    ref: listRef,
     role: "listbox",
     tabindex: "-1",
     id: id,
     "aria-labelledby": ariaLabelledby,
     maxHeight: maxHeight,
+    placement: placement,
     children: options
   });
 };
@@ -17187,6 +17236,64 @@ const Avatar = /*#__PURE__*/base_default()("div",  true ? {
   image
 }) => `url(${image})`, " center/contain no-repeat;" + ( true ? "" : 0));
 /* harmony default export */ const Avatar_Avatar = (Avatar);
+;// ./src/components/Dropdown/types.ts
+let DropdownPositions = /*#__PURE__*/function (DropdownPositions) {
+  DropdownPositions["top"] = "top";
+  DropdownPositions["bottom"] = "bottom";
+  DropdownPositions["auto"] = "auto";
+  return DropdownPositions;
+}({});
+
+/**
+ * Props that are controlled by Dropdown component
+ * These props cannot be passed via dropdownProps.toggleButton
+ */
+
+/**
+ * Props for the Dropdown component
+ *
+ * A select-like dropdown component that allows users to choose one option from
+ * a list. Uses compound component pattern with DropdownOption children.
+ * Provides keyboard navigation, accessibility, customizable styling, and
+ * automatic viewport-aware placement of the options list.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { id: 1, value: 'Option 1' },
+ *   { id: 2, value: 'Option 2' },
+ * ];
+ *
+ * <Dropdown
+ *   selectedItem={items[0]}
+ *   onChange={(item) => console.log(item)}
+ *   placeholder="Select an option"
+ * >
+ *   {items.map(item => (
+ *     <DropdownOption key={item.id} value={item.id}>
+ *       {item.value}
+ *     </DropdownOption>
+ *   ))}
+ * </Dropdown>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Force the list to always open upward (e.g. component near the bottom of the page)
+ * <Dropdown
+ *   selectedItem={selected}
+ *   onChange={handleChange}
+ *   dropdownProps={{ dropdownPosition: DropdownPositions.top }}
+ * >
+ *   ...
+ * </Dropdown>
+ * ```
+ */
+
+/**
+ * Dropdown context value
+ * Provides selection state and change handler to child DropdownOption components
+ */
 ;// ./src/components/Dropdown/Dropdown.tsx
 
 function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -17199,6 +17306,7 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eizhqtp1"
 } : 0)( true ? {
@@ -17217,8 +17325,13 @@ const SelectedContent = /*#__PURE__*/base_default()("span",  true ? {
  *
  * A flexible dropdown component that allows users to select one option from
  * a list of choices. Uses a compound component pattern with DropdownOption
- * children. Provides keyboard navigation, accessibility features, and click-outside
- * to close functionality.
+ * children. Provides keyboard navigation, accessibility features, click-outside
+ * to close functionality, and automatic viewport-aware placement of the options list.
+ *
+ * On every open the component measures available space below the toggle button
+ * and flips the list upward when there is not enough room, preventing the list
+ * from being clipped by the viewport edge. This behavior can be overridden via
+ * dropdownProps.dropdownPosition.
  *
  * Component structure:
  * - Dropdown (root container with context)
@@ -17269,14 +17382,15 @@ const SelectedContent = /*#__PURE__*/base_default()("span",  true ? {
  *
  * @example
  * ```tsx
- * // With custom props for sub-components
+ * // With custom props for sub-components and forced upward placement
  * <Dropdown
  *   selectedItem={selected}
  *   onChange={handleChange}
  *   dropdownProps={{
  *     base: { id: 'my-dropdown' },
  *     toggleButton: { 'data-testid': 'dropdown-toggle' },
- *     toggleButtonArrow: { className: 'custom-arrow' }
+ *     toggleButtonArrow: { className: 'custom-arrow' },
+ *     dropdownPosition: DropdownPositions.top,
  *   }}
  * >
  *   {options.map(opt => (
@@ -17311,14 +17425,19 @@ const Dropdown = ({
   maxHeight = 200,
   dropdownProps: componentProps
 }) => {
+  const {
+    dropdownPosition = DropdownPositions.auto
+  } = componentProps ?? {};
   const theme = (0,react_namespaceObject.useTheme)();
   const dropdownRef = (0,external_react_namespaceObject.useRef)(null);
+  const listRef = (0,external_react_namespaceObject.useRef)(null);
   const dropdownId = (0,external_react_namespaceObject.useId)();
   const options = [];
   const [isFocused, setIsFocused] = (0,external_react_namespaceObject.useState)(false);
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const [colors, setColors] = (0,external_react_namespaceObject.useState)([]);
   const [activeItem, setActiveItem] = (0,external_react_namespaceObject.useState)(selectedItem);
+  const [placement, setPlacement] = (0,external_react_namespaceObject.useState)('bottom');
   const onChange = item => {
     const innerItem = options.filter(option => option.value === item)[0];
     setIsOpen(false);
@@ -17351,6 +17470,17 @@ const Dropdown = ({
       setIsOpen(false);
     }
   }, [isDisabled]);
+  (0,external_react_namespaceObject.useLayoutEffect)(() => {
+    if (!isOpen || !dropdownRef.current) return;
+    if (dropdownPosition !== DropdownPositions.auto) {
+      setPlacement(dropdownPosition);
+      return;
+    }
+    const rect = dropdownRef.current.getBoundingClientRect();
+    const listHeight = listRef.current?.offsetHeight || maxHeight;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    setPlacement(spaceBelow < listHeight ? 'top' : 'bottom');
+  }, [isOpen]);
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17365,8 +17495,10 @@ const Dropdown = ({
   const contextValue = external_react_default().useMemo(() => ({
     onChange,
     activeItem,
-    maxHeight
-  }), [onChange, activeItem, maxHeight]);
+    maxHeight,
+    listRef,
+    placement
+  }), [onChange, activeItem, maxHeight, placement]);
   const value = activeItem ? activeItem.label || activeItem.children || activeItem.value || activeItem || placeholder : placeholder;
   const rawAvatar = activeItem && activeItem.avatar;
   const selectedAvatar = rawAvatar != null ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
@@ -20824,6 +20956,64 @@ const DatePickerContent = () => {
 
 
 
+/**
+ * DatePicker — masked date input with a popover calendar. Use inside **`FormProvider`**
+ * (react-hook-form): the field value is the formatted string; **`onChange`** receives a
+ * JavaScript **`Date`** (or undefined when cleared). Supports **day**, **month**, or **year**
+ * granularity via **`pickerType`**, **`mm/dd/yyyy`** / **`dd/mm/yyyy`** / **`mm/yyyy`** / **`yyyy`**
+ * formats, optional **min/max** bounds, and **openCalendarMode** (icon, input, or both).
+ *
+ * ### Behavior notes
+ * - Parsing and display use **Luxon**; the form stores the string matching **`format`**.
+ * - Validation runs when the mask is complete or on **blur**; errors surface through
+ *   react-hook-form and **`onError`**.
+ * - **`highlightDates`** helps range UIs by styling days between two dates.
+ *
+ * @category Components
+ * @subcategory Form Controls
+ *
+ * @example
+ * ```tsx
+ * import { FormProvider, useForm } from 'react-hook-form';
+ * import { DatePicker } from '@ssa-ui-kit/core';
+ *
+ * function Example() {
+ *   const methods = useForm({ defaultValues: { startDate: '' } });
+ *   return (
+ *     <FormProvider {...methods}>
+ *       <DatePicker
+ *         name="startDate"
+ *         label="Start date"
+ *         format="mm/dd/yyyy"
+ *         onChange={(date) => console.log(date)}
+ *       />
+ *     </FormProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Month picker (mm/yyyy) with bounds
+ * <DatePicker
+ *   name="period"
+ *   label="Period"
+ *   pickerType="months"
+ *   dateMin="01/2020"
+ *   dateMax="12/2030"
+ *   onChange={(d) => {}}
+ * />
+ * ```
+ *
+ * @see {@link Input} — Underlying text field
+ * @see {@link Popover} — Calendar overlay
+ *
+ * @accessibility
+ * - Label is associated with the input via **`htmlFor`** / **`id`**
+ * - Calendar days use **`aria-disabled`** and **`aria-label`** where applicable
+ * - Icon trigger exposes **`aria-label="Calendar"`**
+ */
+
 const DatePickerInner = ({
   format,
   openCalendarMode = 'icon',
@@ -20842,9 +21032,18 @@ const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(Da
 
 
 ;// ./src/components/DateRangePicker/constants.ts
+/**
+ * Default formats, masks, bounds, and validation messages for **DateRangePicker**
+ * (aligned with **DatePicker** constants for shared behavior).
+ */
+
+/** Default US day format (`mm/dd/yyyy`). Re-exported from the package barrel. */
 const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
+/** Default European day format (`dd/mm/yyyy`). Re-exported from the package barrel. */
 const DEFAULT_EUROPEAN_MASK_FORMAT = 'dd/mm/yyyy';
+/** Default month format (`mm/yyyy`). Re-exported from the package barrel. */
 const constants_DEFAULT_MONTH_MASK_FORMAT = 'mm/yyyy';
+/** Default year-only format (`yyyy`). Re-exported from the package barrel. */
 const constants_DEFAULT_YEAR_MASK_FORMAT = 'yyyy';
 const constants_DEFAULT_MASK = '__/__/____';
 const constants_DEFAULT_MONTH_MASK = '__/____';
@@ -21890,12 +22089,16 @@ const Header = () => {
 const PRESENT_VALUE = 'Present';
 
 /**
- * DateRangePickerFormBridge - adapter between form builders and DateRangePicker
+ * Form-side shape: **start** / **end** strings in **`outputFormat`**; **end** may be **`PRESENT_VALUE`**
+ * when the user chose **Present** (maps to **`null`** inside **DateRangePicker**).
+ */
+
+/**
+ * Props for **DateRangePickerFormBridge** — adapter between string-based forms and **DateRangePicker**.
  *
- * PURPOSE:
- * - Keeps DateRangePicker "pure": it only ever sees inputFormat and null for "Present"
- * - Converts form value (outputFormat + PRESENT_VALUE string) ↔ picker value (inputFormat + null)
- * - Used by DateRangeField (RJSF); can be used by other form builders
+ * - Keeps **DateRangePicker** on **inputFormat** and **`null`** for Present
+ * - Converts **outputFormat** storage ↔ display **inputFormat**
+ * - Used by **DateRangeField** (RJSF) and similar builders
  */
 
 /**
@@ -21942,6 +22145,26 @@ function formValueToPickerDefault(source, outputFormat, inputFormat) {
   }
   return undefined;
 }
+
+/**
+ * Wraps **DateRangePicker** with an internal **FormProvider** and converts between
+ * **`outputFormat`** (form storage) and **`inputFormat`** (picker display). Maps **`null`** ↔
+ * **`PRESENT_VALUE`** for the end date only.
+ *
+ * @category Components
+ * @subcategory Form Controls
+ *
+ * @example
+ * ```tsx
+ * <DateRangePickerFormBridge
+ *   name="contract"
+ *   outputFormat="yyyy-MM-dd"
+ *   inputFormat="mm/dd/yyyy"
+ *   value={{ start: '2024-01-01', end: 'Present' }}
+ *   onChange={(v) => save(v)}
+ * />
+ * ```
+ */
 const DateRangePickerFormBridge = ({
   value,
   defaultValue: defaultValueProp,
@@ -23067,6 +23290,58 @@ const DateRangePickerProvider = ({
 
 
 
+/**
+ * DateRangePicker — two masked inputs (**from** / **to**) with a shared popover calendar and
+ * **react-hook-form** fields **`${name}From`** and **`${name}To`** inside **`FormProvider`**.
+ * **`onChange`** emits **`[start, end]`** as **`Date`**, **`undefined`**, or **`null`** on the **end**
+ * only for **“Present”** (open-ended range) when **`showPresentOption`** is enabled.
+ *
+ * ### Behavior notes
+ * - **Luxon** parses strings; the form stores **formatted strings** per **format** / **rangePickerType**.
+ * - Calendar selection uses a **start → end** step; **`allowReverseSelection`** can swap inverted picks.
+ * - Use **`DateRangePickerFormBridge`** when the form stores **ISO** strings and **`PRESENT_VALUE`**
+ *   for Present (string-safe schemas).
+ *
+ * @category Components
+ * @subcategory Form Controls
+ *
+ * @example
+ * ```tsx
+ * import { FormProvider, useForm } from 'react-hook-form';
+ * import { DateRangePicker } from '@ssa-ui-kit/core';
+ *
+ * function Example() {
+ *   const methods = useForm({
+ *     defaultValues: { tripFrom: '', tripTo: '' },
+ *   });
+ *   return (
+ *     <FormProvider {...methods}>
+ *       <DateRangePicker
+ *         name="trip"
+ *         label="Trip dates"
+ *         onChange={(dates) => console.log(dates)}
+ *       />
+ *     </FormProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Open-ended end date: `to === null` means Present
+ * <DateRangePicker name="job" showPresentOption onChange={() => {}} />
+ * ```
+ *
+ * @see {@link Input} — Masked inputs
+ * @see {@link Popover} — Calendar overlay
+ * @see {@link DateRangePickerFormBridge} — ISO / string form adapter
+ *
+ * @accessibility
+ * - **Field** label associates with the focused input
+ * - Calendar controls reuse **aria-** patterns from day/month/year views
+ * - Calendar trigger uses an **aria-label** on the icon button
+ */
+
 const DateRangePicker = ({
   format,
   showCalendarIcon = true,
@@ -26395,11 +26670,12 @@ const ArrayFieldItemTemplate = props => {
     RemoveButton
   } = registry.templates.ButtonTemplates;
   const {
-    toolbarAlign = 'top'
+    toolbarAlign = 'flex-end'
   } = registry.formContext;
   const buttonCss = {
     width: '32px',
     height: '32px',
+    marginBottom: '8px',
     justifyContent: 'center'
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
@@ -49028,6 +49304,105 @@ const StepLabel = ({
   });
 };
 /* harmony default export */ const StepLabel_StepLabel = (StepLabel);
+;// ./src/components/History/styles.ts
+function History_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const FIRST_LINE_TOP_PADDING = 2;
+const FIRST_LINE_HEIGHT = 20;
+const container =  true ? {
+  name: "1fttcpj",
+  styles: "display:flex;flex-direction:column"
+} : 0;
+const row =  true ? {
+  name: "1h63efc",
+  styles: "display:flex;align-items:stretch"
+} : 0;
+const leftColumn = width => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;flex-shrink:0;width:", width, "px;" + ( true ? "" : 0),  true ? "" : 0);
+const circle = (color, size, topOffset) => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;top:", topOffset, "px;left:50%;transform:translateX(-50%);width:", size, "px;height:", size, "px;border-radius:50%;background-color:", color, ";z-index:1;" + ( true ? "" : 0),  true ? "" : 0);
+const connector = (color, circleTopOffset, circleSize) => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;left:50%;transform:translateX(-50%);top:", circleTopOffset + circleSize / 2, "px;bottom:-", circleTopOffset + circleSize / 2, "px;width:1px;background-color:", color, ";" + ( true ? "" : 0),  true ? "" : 0);
+const dateColumn = width => /*#__PURE__*/(0,react_namespaceObject.css)("width:", width, "px;flex-shrink:0;padding-top:", FIRST_LINE_TOP_PADDING, "px;padding-bottom:20px;font-size:14px;line-height:", FIRST_LINE_HEIGHT, "px;" + ( true ? "" : 0),  true ? "" : 0);
+const contentColumn = /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;padding-top:", FIRST_LINE_TOP_PADDING, "px;padding-bottom:20px;" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/History/History.tsx
+
+
+
+const DEFAULT_CIRCLE_SIZE = 12;
+const DEFAULT_DATE_WIDTH = 120;
+const LEFT_COLUMN_MARGIN_RIGHT = 16;
+
+/**
+ * History - Vertical timeline component for chronological events.
+ *
+ * Renders a date column and content column for each item, connected by
+ * timeline markers. Marker colors can be set per item or via defaults.
+ *
+ * ### Color behavior
+ * - `item.color` overrides the marker color for a specific row
+ * - `defaultColor` is used when `item.color` is not provided
+ * - fallback default marker color: `theme.palette.primary.main`
+ * - fallback connector color: `theme.colors.greyLighter`
+ *
+ * ### Alignment behavior
+ * The marker is vertically aligned to the first text line and adapts when
+ * `circleSize` changes.
+ *
+ * @category Components
+ * @subcategory Display
+ *
+ * @example
+ * ```tsx
+ * <History
+ *   items={[
+ *     { date: '01.01.2026', content: 'Account created' },
+ *     { date: '03.01.2026', content: 'Plan upgraded', color: '#10b981' },
+ *   ]}
+ * />
+ * ```
+ */
+const History = ({
+  items,
+  defaultColor,
+  lineColor,
+  dateWidth = DEFAULT_DATE_WIDTH,
+  circleSize = DEFAULT_CIRCLE_SIZE,
+  sx
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const resolvedDefaultColor = defaultColor ?? theme.palette.primary.main;
+  const resolvedLineColor = lineColor ?? theme.colors.greyLighter;
+  const circleTopOffset = Math.max(0, FIRST_LINE_TOP_PADDING + (FIRST_LINE_HEIGHT - circleSize) / 2);
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    "data-testid": "history",
+    css: container,
+    style: sx,
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      const color = item.color ?? resolvedDefaultColor;
+      return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: row,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+          css: leftColumn(circleSize),
+          style: {
+            marginRight: LEFT_COLUMN_MARGIN_RIGHT
+          },
+          children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+            css: circle(color, circleSize, circleTopOffset)
+          }), !isLast && (0,jsx_runtime_namespaceObject.jsx)("div", {
+            css: connector(resolvedLineColor, circleTopOffset, circleSize)
+          })]
+        }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+          css: dateColumn(dateWidth),
+          children: item.date
+        }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+          css: contentColumn,
+          children: item.content
+        })]
+      }, item.key ?? index);
+    })
+  });
+};
+;// ./src/components/History/index.ts
+
 ;// ./src/components/Pagination/styles.tsx
 
 function Pagination_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -49351,6 +49726,7 @@ const RowsPerPageDropdown = ({
   selectedItem = DEFAULT_PER_PAGE_VALUE,
   rowsPerPageList = ROWS_PER_PAGE_LIST,
   rowsPerPageText = 'Rows per page',
+  dropdownPosition,
   ...rest
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
@@ -49396,7 +49772,8 @@ const RowsPerPageDropdown = ({
               stroke: theme.colors.greyDarker
             }
           }
-        }
+        },
+        dropdownPosition
       },
       ...rest,
       children: rowsPerPageList.map(item => (0,jsx_runtime_namespaceObject.jsx)(DropdownOption_DropdownOption, {
@@ -51589,6 +51966,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================