@ssa-ui-kit/core 3.1.0 → 3.3.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),
@@ -8626,6 +8627,14 @@ __webpack_require__.d(EmployeeTerminated_namespaceObject, {
   ICON_NAME: () => (EmployeeTerminated_ICON_NAME)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/EmployeeBlackboard.tsx
+var EmployeeBlackboard_namespaceObject = {};
+__webpack_require__.r(EmployeeBlackboard_namespaceObject);
+__webpack_require__.d(EmployeeBlackboard_namespaceObject, {
+  EmployeeBlackboard: () => (EmployeeBlackboard),
+  ICON_NAME: () => (EmployeeBlackboard_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/ExcelDownload.tsx
 var ExcelDownload_namespaceObject = {};
 __webpack_require__.r(ExcelDownload_namespaceObject);
@@ -8642,6 +8651,30 @@ __webpack_require__.d(Export_namespaceObject, {
   ICON_NAME: () => (Export_ICON_NAME)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/FileMark.tsx
+var FileMark_namespaceObject = {};
+__webpack_require__.r(FileMark_namespaceObject);
+__webpack_require__.d(FileMark_namespaceObject, {
+  FileMark: () => (FileMark),
+  ICON_NAME: () => (FileMark_ICON_NAME)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/FilePdf.tsx
+var FilePdf_namespaceObject = {};
+__webpack_require__.r(FilePdf_namespaceObject);
+__webpack_require__.d(FilePdf_namespaceObject, {
+  FilePdf: () => (FilePdf),
+  ICON_NAME: () => (FilePdf_ICON_NAME)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/FileWord.tsx
+var FileWord_namespaceObject = {};
+__webpack_require__.r(FileWord_namespaceObject);
+__webpack_require__.d(FileWord_namespaceObject, {
+  FileWord: () => (FileWord),
+  ICON_NAME: () => (FileWord_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Filter.tsx
 var Filter_namespaceObject = {};
 __webpack_require__.r(Filter_namespaceObject);
@@ -8994,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);
@@ -9206,11 +9247,15 @@ __webpack_require__.d(all_namespaceObject, {
   Education: () => (Education_namespaceObject),
   Email: () => (Email_namespaceObject),
   Employee: () => (Employee_namespaceObject),
+  EmployeeBlackboard: () => (EmployeeBlackboard_namespaceObject),
   EmployeeProfile: () => (EmployeeProfile_namespaceObject),
   EmployeeTerminated: () => (EmployeeTerminated_namespaceObject),
   ExcelDownload: () => (ExcelDownload_namespaceObject),
   Export: () => (Export_namespaceObject),
   FTE: () => (FTE_namespaceObject),
+  FileMark: () => (FileMark_namespaceObject),
+  FilePdf: () => (FilePdf_namespaceObject),
+  FileWord: () => (FileWord_namespaceObject),
   Filter: () => (Filter_namespaceObject),
   FilterFunnel: () => (FilterFunnel_namespaceObject),
   FollowLink: () => (FollowLink_namespaceObject),
@@ -9253,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),
@@ -9822,7 +9868,6 @@ const DisabledButtonText = ({
 ;// ./src/components/Button/styles.ts
 function 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 buttonBlock =  true ? {
   name: "3s76dy",
   styles: "display:grid;span{display:inline-block;margin:auto;}"
@@ -9857,10 +9902,18 @@ const makeSolidVariant = (theme, key, extra) => {
   } = theme.palette[key];
   return /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.white, ";background:", main, ";&:hover{background:", dark, ";}&:active{background:", dark, ";}&:disabled{background:", theme.colors.grey, ";}&:focus{background:", light, ";}", extra, ";" + ( true ? "" : 0),  true ? "" : 0);
 };
+
+/** Transparent variant (no focus outline). Shared by custom (recommended) and tertiary (legacy). */
+var _ref =  true ? {
+  name: "1qsuvl4",
+  styles: "background:transparent"
+} : 0;
+const transparentVariant = () => _ref;
 const variantStyles = {
+  custom: transparentVariant,
   primary: theme => makeSolidVariant(theme, 'primary'),
   secondary: theme => makeSolidVariant(theme, 'secondary', /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.greyDarker, ";" + ( true ? "" : 0),  true ? "" : 0)),
-  tertiary: theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:transparent;", focusOutline(theme, 'greyOutline'), ";" + ( true ? "" : 0),  true ? "" : 0),
+  tertiary: transparentVariant,
   error: theme => makeSolidVariant(theme, 'error'),
   warning: theme => makeSolidVariant(theme, 'warning'),
   success: theme => makeSolidVariant(theme, 'success')
@@ -9878,16 +9931,16 @@ const WHITE_TEXT_VARIANTS = new Set(['primary', 'error', 'warning', 'success']);
 /**
  * Button - Interactive button component for user actions.
  *
- * Variant colors are driven entirely by `theme.palette` — each variant reads
- * `palette.<variant>.main` for the default background, `palette.<variant>.dark`
- * for hover and active states, and `palette.<variant>.light` for focus state.
- * Override any palette entry in a custom theme to restyle a variant without
- * affecting other components.
+ * Variant colors are driven entirely by `theme.palette` for solid variants — each
+ * reads `palette.<variant>.main` (default), `palette.<variant>.dark` (hover/active),
+ * `palette.<variant>.light` (focus). Override any palette entry in a custom theme
+ * to restyle a variant without affecting other components.
  *
- * ### Variants (default: `tertiary`)
+ * ### Variants (default: `custom`)
+ * - `custom`    — transparent, dark text; recommended for low-emphasis actions (default)
  * - `primary`   — blue, high emphasis, white text
  * - `secondary` — grey, medium emphasis, dark text
- * - `tertiary`  — transparent background, dark text, focus outline only (default)
+ * - `tertiary`  — legacy; same as custom; prefer `custom` instead
  * - `error`     — red, destructive actions, white text
  * - `warning`   — orange, caution actions, white text
  * - `success`   — green, confirmation actions, white text
@@ -9897,7 +9950,7 @@ const WHITE_TEXT_VARIANTS = new Set(['primary', 'error', 'warning', 'success']);
  *
  * @example
  * ```tsx
- * // No variant passed → tertiary (transparent ghost button)
+ * // No variant passed → custom (transparent, recommended)
  * <Button text="Cancel" onClick={handleCancel} />
  * ```
  *
@@ -9944,7 +9997,7 @@ const Button = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(functi
   endIcon,
   startIconClassName,
   endIconClassName,
-  variant = 'tertiary',
+  variant = 'custom',
   type = 'button',
   className,
   isDisabled,
@@ -9956,7 +10009,7 @@ const Button = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(functi
     throw new Error('Button must have either text or icon or children');
   }
   const theme = (0,react_namespaceObject.useTheme)();
-  const appliedVariantStyle = (variantStyles[variant] ?? variantStyles.tertiary)(theme);
+  const appliedVariantStyle = (variantStyles[variant] ?? variantStyles.custom)(theme);
   const resolveTextNode = () => {
     if (!text) return null;
     if (isDisabled) return (0,jsx_runtime_namespaceObject.jsx)(DisabledButtonText, {
@@ -11704,6 +11757,36 @@ const EmployeeTerminated = ({
   })]
 });
 const EmployeeTerminated_ICON_NAME = 'employee-terminated';
+;// ./src/components/Icon/icons/EmployeeBlackboard.tsx
+
+const EmployeeBlackboard = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Employee Blackboard',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M10.2822 8.90039C10.3979 8.90514 10.5142 8.93391 10.624 8.9873L11.0967 9.21777L11.3809 9.3457C12.0531 9.6267 12.7833 9.77441 13.5088 9.77441H14.2842C14.5949 9.77441 14.8446 10.0242 14.8447 10.335C14.8447 10.6437 14.5952 10.8965 14.2842 10.8965H13.5088C12.6838 10.8965 11.8574 10.7299 11.0889 10.4287L11.0859 10.4277L10.3086 10.0957L10.1445 10.3848L10.1416 10.3906L10.1406 10.3896L9.97559 10.6426C9.86672 10.8058 9.68892 10.8965 9.50488 10.8965C9.39925 10.8964 9.29148 10.8653 9.19727 10.8018C8.94025 10.631 8.86746 10.2849 9.03809 10.0264L9.52441 9.28809L9.58398 9.20801C9.73285 9.03033 9.94446 8.92314 10.167 8.90332L10.2822 8.90039Z",
+    fill: fill,
+    fillOpacity: 0.8
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.6191 2.01074C21.8787 2.06237 22.067 2.28607 22.0674 2.56348V4.26758C22.0673 4.53016 21.8816 4.7655 21.6201 4.82031L21.5039 4.83203H21.3594V18.2197H21.4756C21.7929 18.2197 22.0396 18.467 22.04 18.7842L22.0293 18.9004C21.9776 19.1603 21.7534 19.3496 21.4756 19.3496H20.3564C20.3873 19.5047 20.4033 19.6645 20.4033 19.8271V20.9629L20.3535 21.8848L20.3477 21.9785H4.58594C4.05835 21.9785 3.62188 21.5756 3.56934 21.0615L3.56445 20.957V19.8271C3.56445 19.6644 3.58131 19.5047 3.6123 19.3496H2.49219C2.17482 19.3495 1.927 19.1025 1.92676 18.7852L1.93848 18.6689C1.99033 18.4092 2.21454 18.2198 2.49219 18.2197H2.6084V4.83203H2.46387C2.14318 4.8316 1.90054 4.56756 1.90039 4.26758V2.56348C1.90079 2.24652 2.14691 2.0004 2.46387 2H21.5039L21.6191 2.01074ZM5.39746 18.6777C4.95809 18.8966 4.68555 19.3377 4.68555 19.8271V20.8574H10.1162L10.6514 18.1748C10.0393 17.8934 9.48954 17.4319 9.02539 16.874L5.39746 18.6777ZM11.2598 20.8574H12.6582L12.2363 18.7529H11.6807L11.2598 20.8574ZM14.9072 16.8545C14.439 17.4227 13.8823 17.8891 13.2646 18.1738L13.8018 20.8574H19.2822V19.8271C19.2822 19.3987 19.0739 19.0072 18.7285 18.7695L18.5723 18.6777L14.9072 16.8545ZM3.7373 18.2197H4.18066C4.37949 17.9994 4.62011 17.8129 4.89746 17.6748L8.37793 15.9443C8.14616 15.5415 7.95216 15.1164 7.80273 14.6875C7.44627 14.5026 7.14299 14.1109 6.95996 13.5996L6.88672 13.3652C6.75799 12.8836 6.75666 12.4305 6.87012 12.0723C6.9803 11.7247 7.20223 11.4607 7.52441 11.3613C7.52419 11.3584 7.52475 11.3546 7.52441 11.3506C7.52291 11.3338 7.52045 11.3118 7.51758 11.2871L7.49805 11.125V11.1221C7.45275 10.767 7.37609 10.1701 7.45801 9.36719C7.52666 8.67435 7.79297 8.09881 8.20215 7.69336L8.21094 7.68457L8.22266 7.67773L9.14355 7.14746L9.15527 7.14062L9.16699 7.1377C9.32222 7.09536 9.48498 7.06263 9.6582 7.0498C10.3248 6.6284 11.2946 6.43751 11.959 6.4375H12.2607C13.4668 6.4375 14.5128 6.78921 15.3223 7.44043C16.0811 8.051 16.6272 8.92024 16.9043 9.99707L16.9561 10.2148L16.9668 10.292C16.98 10.4705 16.9077 10.6473 16.7686 10.7656L16.7676 10.7666C16.6277 10.8834 16.4416 10.9222 16.2676 10.877C16.319 11.0459 16.36 11.2024 16.3877 11.3594C16.7128 11.4575 16.9371 11.7227 17.0479 12.0723C17.1472 12.3858 17.1583 12.7722 17.0732 13.1865L17.0303 13.3652C16.8622 13.989 16.5259 14.475 16.1152 14.6875C15.9677 15.1094 15.7751 15.5265 15.5469 15.9238L19.0723 17.6748L19.2227 17.7559C19.4381 17.8825 19.6281 18.0398 19.79 18.2197H20.2305V4.83203H3.7373V18.2197ZM11.959 7.55859C11.6466 7.5586 11.2917 7.61345 10.9678 7.7041C10.7235 7.77248 10.5015 7.86025 10.3301 7.95605L10.1768 8.05371C10.0803 8.12587 9.96224 8.16504 9.8418 8.16504C9.47358 8.16505 9.18124 8.28515 8.96973 8.50293C8.78347 8.6948 8.65256 8.96997 8.59375 9.32422L8.57324 9.48145C8.52371 9.98114 8.54491 10.3806 8.57617 10.6895L8.6084 10.9688L8.61035 10.9844L8.64453 11.291C8.65022 11.3852 8.64887 11.4731 8.63379 11.5586C8.60934 11.7019 8.59294 11.8472 8.58594 11.9941C8.57489 12.1947 8.45941 12.3749 8.28223 12.4668L8.28125 12.4678C8.16757 12.5253 8.0402 12.5409 7.91895 12.5176C7.90353 12.6427 7.90589 12.8338 7.9707 13.0762L8.01758 13.2256C8.06756 13.3642 8.12587 13.4705 8.17871 13.5469C8.21398 13.5979 8.24693 13.6355 8.27246 13.6602C8.28649 13.6736 8.29685 13.6813 8.30273 13.6855C8.54297 13.6974 8.7202 13.8574 8.78613 14.082C9.02354 14.8799 9.46425 15.7026 10.0254 16.3242C10.5879 16.9473 11.2599 17.3564 11.959 17.3564C12.658 17.3563 13.3301 16.9472 13.8926 16.3242C14.4537 15.7025 14.8945 14.8789 15.1318 14.0811C15.198 13.8568 15.3938 13.6959 15.6309 13.6826C15.6365 13.6772 15.6443 13.6708 15.6523 13.6621C15.6756 13.6369 15.7072 13.5991 15.7412 13.5479C15.8092 13.4454 15.8889 13.29 15.9463 13.0762L15.9922 12.8506C16.0114 12.7089 16.0077 12.5936 15.9971 12.5098C15.8807 12.5286 15.7565 12.5154 15.6484 12.458C15.4998 12.382 15.3764 12.2429 15.3418 12.0703L15.333 11.9941C15.3186 11.6971 15.2808 11.4666 15.1875 11.165L15.0742 10.834C14.9799 10.5787 14.9782 10.3702 15.0225 10.2061C15.0555 10.0838 15.1134 9.99059 15.1699 9.92285L15.2246 9.86328C15.3371 9.75408 15.4715 9.69265 15.6104 9.66211C15.0415 8.31635 13.8638 7.55859 12.2607 7.55859H11.959ZM3.02832 3.7041H20.9395V3.12793H3.02832V3.7041Z",
+    fill: fill,
+    fillOpacity: 0.8
+  })]
+});
+const EmployeeBlackboard_ICON_NAME = 'employee-blackboard';
 ;// ./src/components/Icon/icons/ExcelDownload.tsx
 
 const ExcelDownload = ({
@@ -11761,6 +11844,96 @@ const Export = ({
   })]
 });
 const Export_ICON_NAME = 'export';
+;// ./src/components/Icon/icons/FileMark.tsx
+
+const FileMark = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'File Mark',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.38 3.76527C3.38 2.24438 4.62439 1 6.14528 1H13.4544C14.0468 1 14.6153 1.23511 15.034 1.65455L20.411 7.03154C20.5005 7.12109 20.5614 7.23517 20.5861 7.35933C20.5905 7.38135 20.5968 7.4886 20.5988 7.51082L20.5988 7.42574L20.5986 20.2347C20.5986 21.7556 19.3542 23 17.8333 23H6.14528C4.62439 23 3.38 21.7556 3.38 20.2347V3.76527ZM3.38 3.76527L3.48892 3.80224V3.80521L3.38 3.76527ZM19.3182 10.0396L19.3137 8.12437H15.7082C15.0557 8.12437 14.4656 7.83997 14.056 7.38915C13.695 6.99188 13.4742 6.46537 13.4742 5.89036V2.29572L13.4654 2.29032L13.4621 2.28828C13.4551 2.28395 13.4507 2.28159 13.4483 2.28037H6.14528C5.31901 2.28037 4.66037 2.939 4.66037 3.76527V20.2347C4.66037 21.061 5.31901 21.7196 6.14528 21.7196H17.8333C18.6595 21.7196 19.3182 21.061 19.3182 20.2347V10.0396ZM14.7546 3.18564V5.89036C14.7546 6.42347 15.1751 6.844 15.7082 6.844H18.4129L14.7546 3.18564Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M10.46 10.1406C10.5916 10.1409 10.7076 10.2267 10.7461 10.3525L12.5 16.0928C12.5586 16.2853 12.415 16.48 12.2139 16.4805H11.4375C11.306 16.4805 11.1893 16.3941 11.1504 16.2686L10.8213 15.2012H8.65724L8.33303 16.2676C8.29459 16.3938 8.17784 16.4804 8.04592 16.4805H7.27053C7.06903 16.4805 6.92474 16.2855 6.98342 16.0928L8.73732 10.3525C8.77587 10.2264 8.89251 10.1406 9.02443 10.1406H10.46ZM15.333 11.292C15.4986 11.2921 15.6338 11.4262 15.6338 11.5918V12.7588H16.7998C16.9654 12.7589 17.1006 12.893 17.1006 13.0586V13.5537C17.1005 13.7192 16.9653 13.8534 16.7998 13.8535H15.6338V15.0293C15.6336 15.1947 15.4985 15.329 15.333 15.3291H14.8379C14.6724 15.3291 14.5383 15.1948 14.5381 15.0293V13.8535H13.3623C13.1969 13.8533 13.0627 13.7192 13.0625 13.5537V13.0586C13.0625 12.893 13.1968 12.759 13.3623 12.7588H14.5381V11.5918C14.5381 11.4261 14.6723 11.292 14.8379 11.292H15.333ZM9.04689 13.918H10.4248L9.73049 11.668L9.04689 13.918Z",
+    fill: fill
+  })]
+});
+const FileMark_ICON_NAME = 'file-mark';
+;// ./src/components/Icon/icons/FilePdf.tsx
+
+const FilePdf = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'File PDF',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.8027 9.19922C12.0039 9.11876 12.2223 9.07277 12.4346 9.11816C12.6667 9.16783 12.835 9.31367 12.9355 9.50098C13.0281 9.67355 13.0612 9.87464 13.0684 10.0664C13.0757 10.263 13.056 10.4817 13.0186 10.7109C12.931 11.2463 12.7349 11.9028 12.4727 12.5957C12.6281 12.9292 12.8072 13.2667 13.001 13.5938C13.1619 13.8653 13.3301 14.1252 13.501 14.3652C14.0207 14.3324 14.5042 14.3462 14.9033 14.418C15.2852 14.4867 15.674 14.6225 15.9111 14.9053C16.0381 15.0567 16.1135 15.242 16.1211 15.4502C16.1284 15.6516 16.0716 15.851 15.9766 16.041C15.888 16.2181 15.7667 16.3713 15.6045 16.4775C15.4386 16.5861 15.2539 16.6295 15.0693 16.6221C14.7215 16.6081 14.3824 16.4164 14.0889 16.1846C13.7733 15.9354 13.4474 15.5889 13.1328 15.1875C12.7965 15.224 12.4422 15.2795 12.083 15.3525C11.7277 15.4248 11.3744 15.5126 11.0361 15.6133C10.6813 16.2256 10.3132 16.7781 9.96387 17.1992C9.6587 17.5671 9.32536 17.8877 8.99121 18.0254C8.81457 18.0981 8.59975 18.1348 8.38281 18.0557C8.16425 17.9759 8.01672 17.8049 7.92188 17.6152C7.71799 17.2071 7.7858 16.7997 8.00684 16.457C8.21456 16.1351 8.55928 15.8616 8.94824 15.6318C9.38615 15.3732 9.92557 15.144 10.5049 14.9541C10.7223 14.5639 10.9347 14.149 11.1338 13.7275C11.3104 13.3535 11.474 12.9789 11.6191 12.6162C11.418 12.1466 11.261 11.6822 11.1689 11.2568C11.078 10.8365 11.0432 10.4202 11.1191 10.0635C11.1983 9.69212 11.4069 9.35773 11.8027 9.19922ZM9.83008 16.0596C9.65636 16.1397 9.49471 16.2233 9.34863 16.3096C9.00455 16.5128 8.7805 16.7111 8.66895 16.8838C8.57089 17.0358 8.56862 17.147 8.62695 17.2637C8.63817 17.2861 8.6475 17.3005 8.6543 17.3096C8.66298 17.3074 8.67516 17.3036 8.69141 17.2969C8.83499 17.2377 9.06394 17.05 9.35742 16.6963C9.50981 16.5126 9.66886 16.2976 9.83008 16.0596ZM14.1211 15.1367C14.278 15.3064 14.4316 15.4514 14.5771 15.5664C14.8295 15.7657 15.0049 15.831 15.1006 15.835C15.1375 15.8364 15.1574 15.8294 15.1729 15.8193C15.1918 15.807 15.2299 15.7736 15.2725 15.6885C15.3271 15.5792 15.3352 15.5118 15.334 15.4785C15.333 15.4523 15.3264 15.4335 15.3076 15.4111C15.2531 15.3463 15.0963 15.2522 14.7637 15.1924C14.5768 15.1588 14.3601 15.1408 14.1211 15.1367ZM11.8457 14.0635C11.7511 14.2639 11.6535 14.4644 11.5527 14.6621C11.6771 14.6331 11.8016 14.6063 11.9258 14.5811C12.1544 14.5346 12.3851 14.4935 12.6133 14.46C12.5137 14.308 12.4166 14.1526 12.3232 13.9951C12.2386 13.8523 12.1557 13.7069 12.0762 13.5596C12.0018 13.728 11.9247 13.8963 11.8457 14.0635ZM12.248 9.88867C12.2227 9.8907 12.174 9.8984 12.0957 9.92969C12.0044 9.96622 11.9294 10.0412 11.8896 10.2275C11.8468 10.4285 11.8583 10.7192 11.9385 11.0898C11.9637 11.2066 11.9944 11.3282 12.0312 11.4531C12.1277 11.1333 12.1994 10.8395 12.2412 10.584C12.2735 10.3866 12.286 10.2231 12.2812 10.0957C12.2771 9.98485 12.2609 9.9207 12.248 9.88867Z",
+    fill: fill,
+    fillOpacity: 0.8
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.3584 2C13.8967 2.00003 14.4134 2.21365 14.7939 2.59473L19.6826 7.4834C19.7639 7.56477 19.8194 7.66846 19.8418 7.78125C19.8458 7.80144 19.8517 7.89877 19.8535 7.91895L19.8525 19.4863C19.8524 20.8689 18.7214 22 17.3389 22H6.71387C5.33131 22 4.19934 20.8689 4.19922 19.4863V4.51367C4.19934 3.13114 5.33131 2 6.71387 2H13.3584ZM6.71387 3.16406C5.96278 3.16406 5.36339 3.76262 5.36328 4.51367V19.4863C5.36339 20.2374 5.96278 20.8359 6.71387 20.8359H17.3389C18.0899 20.8359 18.6884 20.2374 18.6885 19.4863V10.2178L18.6846 8.47656H15.4072C14.8141 8.47656 14.2776 8.21831 13.9053 7.80859C13.5771 7.44744 13.376 6.96805 13.376 6.44531V3.17773L13.3682 3.17285L13.3652 3.1709C13.3589 3.16702 13.3547 3.16516 13.3525 3.16406H6.71387ZM14.54 6.44531C14.54 6.92995 14.9226 7.3125 15.4072 7.3125H17.8662L14.54 3.9873V6.44531ZM4.29883 4.5498V4.54785L4.19922 4.51367L4.29883 4.5498Z",
+    fill: fill,
+    fillOpacity: 0.8
+  })]
+});
+const FilePdf_ICON_NAME = 'file-pdf';
+;// ./src/components/Icon/icons/FileWord.tsx
+
+const FileWord = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'File Word',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M15.5674 10.0176C15.8733 10.0942 16.0597 10.404 15.9834 10.71L14.2686 17.5674C14.2055 17.8193 13.9804 17.9971 13.7207 18C13.4608 18.0028 13.2315 17.8298 13.1631 17.5791L12 13.3145L10.8369 17.5791C10.7685 17.8298 10.5392 18.0028 10.2793 18C10.0196 17.997 9.79452 17.8193 9.73145 17.5674L8.01758 10.71C7.94113 10.404 8.12673 10.0943 8.43262 10.0176C8.73868 9.94106 9.0493 10.1266 9.12598 10.4326L10.3096 15.1689L11.4492 10.9922C11.5172 10.7439 11.7425 10.5713 12 10.5713C12.2576 10.5713 12.4839 10.7437 12.5518 10.9922L13.6904 15.1689L14.874 10.4326C14.9507 10.1266 15.2613 9.94106 15.5674 10.0176Z",
+    fill: fill,
+    fillOpacity: 0.8
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.3584 2C13.8967 2.00003 14.4134 2.21365 14.7939 2.59473L19.6826 7.4834C19.7639 7.56477 19.8194 7.66846 19.8418 7.78125C19.8458 7.80144 19.8517 7.89877 19.8535 7.91895L19.8525 19.4863C19.8524 20.8689 18.7214 22 17.3389 22H6.71387C5.33131 22 4.19934 20.8689 4.19922 19.4863V4.51367C4.19934 3.13114 5.33131 2 6.71387 2H13.3584ZM6.71387 3.16406C5.96278 3.16406 5.36339 3.76262 5.36328 4.51367V19.4863C5.36339 20.2374 5.96278 20.8359 6.71387 20.8359H17.3389C18.0899 20.8359 18.6884 20.2374 18.6885 19.4863V10.2178L18.6846 8.47656H15.4072C14.8141 8.47656 14.2776 8.21831 13.9053 7.80859C13.5771 7.44744 13.376 6.96805 13.376 6.44531V3.17773L13.3682 3.17285L13.3652 3.1709C13.3589 3.16702 13.3547 3.16516 13.3525 3.16406H6.71387ZM14.54 6.44531C14.54 6.92995 14.9226 7.3125 15.4072 7.3125H17.8662L14.54 3.9873V6.44531ZM4.29883 4.5498V4.54785L4.19922 4.51367L4.29883 4.5498Z",
+    fill: fill,
+    fillOpacity: 0.8
+  })]
+});
+const FileWord_ICON_NAME = 'file-word';
 ;// ./src/components/Icon/icons/Filter.tsx
 
 const Filter = ({
@@ -13059,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 = ({
@@ -13596,25 +13793,17 @@ const Visible = ({
 }) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
   width: `${size}px`,
   height: `${size}px`,
-  fill: "none",
   viewBox: "0 0 24 24",
+  fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  xmlnsXlink: "http://www.w3.org/1999/xlink",
   ...props,
   children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
     children: tooltip
   }), (0,jsx_runtime_namespaceObject.jsx)("path", {
-    d: "M15.5799 11.9999C15.5799 13.9799 13.9799 15.5799 11.9999 15.5799C10.0199 15.5799 8.41992 13.9799 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C13.9799 8.41992 15.5799 10.0199 15.5799 11.9999Z",
-    stroke: fill,
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
-    d: "M11.9998 20.27C15.5298 20.27 18.8198 18.19 21.1098 14.59C22.0098 13.18 22.0098 10.81 21.1098 9.39997C18.8198 5.79997 15.5298 3.71997 11.9998 3.71997C8.46984 3.71997 5.17984 5.79997 2.88984 9.39997C1.98984 10.81 1.98984 13.18 2.88984 14.59C5.17984 18.19 8.46984 20.27 11.9998 20.27Z",
-    stroke: fill,
-    strokeWidth: "1.4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.9998 3.01996C8.17307 3.01996 4.6837 5.27599 2.29951 9.02379C1.76066 9.86824 1.51485 10.9529 1.51485 11.995C1.51485 13.0369 1.76057 14.1213 2.29922 14.9657C4.68341 18.7137 8.17291 20.97 11.9998 20.97C15.8266 20.97 19.316 18.7139 21.7002 14.9661C22.239 14.1217 22.4848 13.0371 22.4848 11.995C22.4848 10.953 22.2391 9.86864 21.7005 9.02425C19.3163 5.27617 15.8268 3.01996 11.9998 3.01996ZM3.48048 9.77566C5.67628 6.32375 8.76678 4.41996 11.9998 4.41996C15.2329 4.41996 18.3234 6.32375 20.5192 9.77566L20.5198 9.77658C20.8807 10.3421 21.0848 11.1473 21.0848 11.995C21.0848 12.8427 20.8807 13.6479 20.5198 14.2133L20.5192 14.2143C18.3234 17.6662 15.2329 19.57 11.9998 19.57C8.76678 19.57 5.67628 17.6662 3.48048 14.2143L3.47989 14.2133C3.11895 13.6479 2.91485 12.8427 2.91485 11.995C2.91485 11.1473 3.11895 10.3421 3.47989 9.77658L3.48048 9.77566ZM9.11992 11.9999C9.11992 10.4065 10.4065 9.11991 11.9999 9.11991C13.5933 9.11991 14.8799 10.4065 14.8799 11.9999C14.8799 13.5933 13.5933 14.8799 11.9999 14.8799C10.4065 14.8799 9.11992 13.5933 9.11992 11.9999ZM11.9999 7.71991C9.63333 7.71991 7.71992 9.63331 7.71992 11.9999C7.71992 14.3665 9.63333 16.2799 11.9999 16.2799C14.3665 16.2799 16.2799 14.3665 16.2799 11.9999C16.2799 9.63331 14.3665 7.71991 11.9999 7.71991Z",
+    fill: fill
   })]
 });
 const Visible_ICON_NAME = 'visible';
@@ -13867,6 +14056,16 @@ const Warning_ICON_NAME = 'warning';
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -14739,22 +14938,22 @@ const success = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
     stroke: theme.palette.success.main
   }
 },  true ? "" : 0,  true ? "" : 0);
-var _ref =  true ? {
+var styles_ref =  true ? {
   name: "0",
   styles: ""
 } : 0;
-const custom = () => _ref;
+const custom = () => styles_ref;
 const inputStatus =  true ? {
   name: "1g5wypb",
   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
 
@@ -16833,7 +17032,8 @@ const DropdownContext = /*#__PURE__*/external_react_namespaceObject.createContex
   activeItem: null,
   onChange: () => {
     /* noop */
-  }
+  },
+  maxHeight: 200
 });
 function useDropdownContext() {
   return external_react_namespaceObject.useContext(DropdownContext);
@@ -16876,7 +17076,9 @@ 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:", ({
   theme
-}) => theme.colors.white, ";border-radius:8px;max-height:200px;overflow:hidden auto;z-index:2;filter:", ({
+}) => theme.colors.white, ";border-radius:8px;max-height:", ({
+  maxHeight = 200
+}) => maxHeight, "px;overflow:hidden auto;z-index:2;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
@@ -16932,7 +17134,8 @@ const DropdownOptions = ({
 }) => {
   const {
     onChange,
-    activeItem
+    activeItem,
+    maxHeight
   } = useDropdownContext();
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
 
@@ -16970,6 +17173,7 @@ const DropdownOptions = ({
     tabindex: "-1",
     id: id,
     "aria-labelledby": ariaLabelledby,
+    maxHeight: maxHeight,
     children: options
   });
 };
@@ -17140,6 +17344,7 @@ const Dropdown = ({
   onChange: handleChange,
   className,
   placeholder = 'Select something',
+  maxHeight = 200,
   dropdownProps: componentProps
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
@@ -17195,8 +17400,9 @@ const Dropdown = ({
   });
   const contextValue = external_react_default().useMemo(() => ({
     onChange,
-    activeItem
-  }), [onChange, activeItem]);
+    activeItem,
+    maxHeight
+  }), [onChange, activeItem, maxHeight]);
   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, {
@@ -17255,7 +17461,8 @@ const MultipleDropdownContext = /*#__PURE__*/external_react_namespaceObject.crea
   isMultiple: false,
   onChange: () => {
     /* noop */
-  }
+  },
+  maxHeight: 200
 });
 function useMultipleDropdownContext() {
   return external_react_namespaceObject.useContext(MultipleDropdownContext);
@@ -17272,7 +17479,9 @@ function MultipleDropdownOptions_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You
 
 const MultipleDropdownOptions_DropdownOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1ckq94i1"
-} : 0)("position:absolute;width:100%;list-style:none;margin:4px 0 0;padding:0;background:#fff;border-radius:8px;overflow:hidden auto;z-index:1;filter:", ({
+} : 0)("position:absolute;width:100%;list-style:none;margin:4px 0 0;padding:0;background:#fff;border-radius:8px;max-height:", ({
+  maxHeight = 200
+}) => maxHeight, "px;overflow:hidden auto;z-index:1;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
@@ -17327,7 +17536,8 @@ const MultipleDropdownOptions = ({
   const {
     onChange,
     allItems,
-    isMultiple
+    isMultiple,
+    maxHeight
   } = useMultipleDropdownContext();
   const toggleItem = (value, isDisabled) => {
     if (!isDisabled) {
@@ -17379,6 +17589,7 @@ const MultipleDropdownOptions = ({
     tabindex: "-1",
     id: id,
     "aria-labelledby": ariaLabelledby,
+    maxHeight: maxHeight,
     children: options
   });
 };
@@ -17524,7 +17735,8 @@ function MultipleDropdownInner({
   label,
   children,
   onChange: handleChange,
-  className
+  className,
+  maxHeight = 200
 }, ref) {
   const dropdownBaseRef = (0,external_react_namespaceObject.useRef)(null);
   const dropdownId = (0,external_react_namespaceObject.useId)();
@@ -17594,8 +17806,9 @@ function MultipleDropdownInner({
   const contextValue = external_react_default().useMemo(() => ({
     onChange,
     allItems: optionsWithKey,
-    isMultiple
-  }), [onChange, optionsWithKey, isMultiple]);
+    isMultiple,
+    maxHeight
+  }), [onChange, optionsWithKey, isMultiple, maxHeight]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const newValues = getActiveItems({
       allItems: optionsWithKey,
@@ -20647,6 +20860,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',
@@ -20665,9 +20936,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 = '__/____';
@@ -21713,12 +21993,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
  */
 
 /**
@@ -21765,6 +22049,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,
@@ -22890,6 +23194,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,
@@ -26218,11 +26574,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, {
@@ -28175,15 +28532,24 @@ const Chip_styles_large =  true ? {
   styles: "height:40px;padding:6px 16px;font-size:16px;line-height:24px"
 } : 0;
 const baseFilled = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", theme.colors.greyLighter, ";border:none;" + ( true ? "" : 0),  true ? "" : 0);
-const baseOutlined = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";" + ( true ? "" : 0),  true ? "" : 0);
+const baseOutlined = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:color-mix(in srgb, ", theme.colors.grey, " 8%, transparent);border:1px solid ", theme.colors.grey, ";" + ( true ? "" : 0),  true ? "" : 0);
 const filled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseFilled(theme), ";color:", theme.colors.greyDarker, ";" + ( true ? "" : 0),  true ? "" : 0);
 const filledDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseFilled(theme), ";color:", theme.colors.greyDisabled, ";opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
 const outlined = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseOutlined(theme), ";color:", theme.colors.greyDarker, ";" + ( true ? "" : 0),  true ? "" : 0);
-const outlinedDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseOutlined(theme), ";color:", theme.colors.greyDisabled, ";opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
+const outlinedDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:color-mix(in srgb, ", theme.colors.grey, " 24%, transparent);border:1px solid ", theme.colors.grey, ";color:", theme.colors.greyDisabled, ";opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
+
+/** Hover/active bg opacity for default (grey) outlined clickable chip */
+const clickableOutlinedDefault = theme => /*#__PURE__*/(0,react_namespaceObject.css)("transition:background-color 0.2s ease;&:hover{background-color:color-mix(in srgb, ", theme.colors.grey, " 24%, transparent);}&:active{background-color:color-mix(in srgb, ", theme.colors.grey, " 40%, transparent);}" + ( true ? "" : 0),  true ? "" : 0);
 const clickable =  true ? {
   name: "1q9v0e",
   styles: "cursor:pointer;transition:all 0.2s ease;&:hover{opacity:0.8;}&:active{opacity:0.7;}"
 } : 0;
+
+/** cursor + transition only; hover/active handled by variant (e.g. outlined bg opacity) */
+const clickableBase =  true ? {
+  name: "p7t14k",
+  styles: "cursor:pointer;transition:background-color 0.2s ease,opacity 0.2s ease"
+} : 0;
 const clickableDisabled =  true ? {
   name: "1sfig4b",
   styles: "cursor:not-allowed"
@@ -28232,6 +28598,14 @@ const COLORS = {
   ERROR: 'error',
   WARNING: 'warning'
 };
+
+/** Outlined variant background opacity (light color with opacity) */
+const OUTLINED_BG_OPACITY = {
+  DEFAULT: 0.08,
+  HOVER: 0.24,
+  ACTIVE: 0.4,
+  DISABLED: 0.24
+};
 const constants_mapSizes = {
   small: Chip_styles_small,
   medium: Chip_styles_medium,
@@ -28274,13 +28648,24 @@ const colorMap = theme => ({
     dark: theme.palette.warning.dark
   }
 });
-const getVariantColorBlock = (theme, variant, config, disabled) => {
+const getVariantColorBlock = (theme, variant, config, disabled, isClickable) => {
   if (variant === VARIANTS.OUTLINED) {
-    return /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", config.bg, ";border:1px solid ", config.main, ";color:", config.dark, ";", disabled ? 'opacity: 0.5;' : '', ";" + ( true ? "" : 0),  true ? "" : 0);
+    const bgDefault = `color-mix(in srgb, ${config.bg} ${OUTLINED_BG_OPACITY.DEFAULT * 100}%, transparent)`;
+    const bgHover = `color-mix(in srgb, ${config.bg} ${OUTLINED_BG_OPACITY.HOVER * 100}%, transparent)`;
+    const bgActive = `color-mix(in srgb, ${config.bg} ${OUTLINED_BG_OPACITY.ACTIVE * 100}%, transparent)`;
+    const bgDisabled = `color-mix(in srgb, ${config.bg} ${OUTLINED_BG_OPACITY.DISABLED * 100}%, transparent)`;
+    return /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", disabled ? bgDisabled : bgDefault, ";border:1px solid ", config.main, ";color:", config.dark, ";transition:background-color 0.2s ease;", disabled ? 'opacity: 0.5;' : '', " ", !disabled && isClickable ? `
+        &:hover {
+          background-color: ${bgHover};
+        }
+        &:active {
+          background-color: ${bgActive};
+        }
+      ` : '', ";" + ( true ? "" : 0),  true ? "" : 0);
   }
   return /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", config.main, ";border:1px solid ", config.main, ";color:", config.darkText ? theme.colors.greyDarker : theme.colors.white, ";", disabled ? 'opacity: 0.5;' : '', ";" + ( true ? "" : 0),  true ? "" : 0);
 };
-const getVariantColors = (theme, variant, color, disabled) => {
+const getVariantColors = (theme, variant, color, disabled, isClickable = false) => {
   const variantKey = variant ?? VARIANTS.FILLED;
   const colorKey = color ?? COLORS.DEFAULT;
   if (colorKey === COLORS.DEFAULT) {
@@ -28291,7 +28676,7 @@ const getVariantColors = (theme, variant, color, disabled) => {
     };
   }
   const palette = colorMap(theme)[colorKey];
-  const chipStyles = getVariantColorBlock(theme, variantKey, palette, disabled);
+  const chipStyles = getVariantColorBlock(theme, variantKey, palette, disabled, isClickable);
   const iconColor = (() => {
     if (variantKey === VARIANTS.OUTLINED) return palette.dark;
     return palette.darkText ? theme.colors.greyDarker : theme.colors.white;
@@ -28399,13 +28784,15 @@ const Chip = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function
   ...props
 }, ref) {
   const theme = (0,react_namespaceObject.useTheme)();
-  const isClickable = !disabled && (onClick || clickableProp);
+  const isClickable = Boolean(!disabled && (onClick || clickableProp));
   const hasDeleteIcon = Boolean(onDelete);
   const {
     chipStyles,
     iconColor
-  } = getVariantColors(theme, variant, color, disabled);
+  } = getVariantColors(theme, variant, color, disabled, isClickable);
   const sizeStyles = constants_mapSizes[size];
+  const clickableStyles = variant === VARIANTS.OUTLINED ? clickableBase : clickable;
+  const outlinedDefaultClickableStyles = variant === VARIANTS.OUTLINED && color === COLORS.DEFAULT && isClickable ? clickableOutlinedDefault(theme) : undefined;
   const iconName = showIcon ? icon ?? 'plus' : null;
   const deleteIconName = deleteIcon ?? 'cross';
   const leadingIcon = iconName ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
@@ -28444,7 +28831,7 @@ const Chip = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function
     tabIndex: !disabled && (isClickable || hasDeleteIcon) ? 0 : undefined,
     "aria-disabled": disabled ? 'true' : 'false',
     className: className,
-    css: [sizeStyles, chipStyles, isClickable && !disabled ? clickable : undefined, disabled ? clickableDisabled : undefined, customCss,  true ? "" : 0,  true ? "" : 0],
+    css: [sizeStyles, chipStyles, isClickable && !disabled ? clickableStyles : undefined, outlinedDefaultClickableStyles, disabled ? clickableDisabled : undefined, customCss,  true ? "" : 0,  true ? "" : 0],
     onClick: disabled ? undefined : onClick,
     onKeyDown: handleKeyDown,
     children: [avatar && (0,jsx_runtime_namespaceObject.jsx)(AvatarWrapper, {
@@ -28556,11 +28943,11 @@ const Progress = ({
 function ProgressBar_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 wrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;background-color:", theme.colors.greyLighter, ";border-radius:12px;box-shadow:inset 0 -1px 1px ", theme.colors.white30, ";" + ( true ? "" : 0),  true ? "" : 0);
-var styles_ref =  true ? {
+var ProgressBar_styles_ref =  true ? {
   name: "14rz325",
   styles: "position:absolute;display:block;bottom:0;border-radius:12px"
 } : 0;
-const bar = () => styles_ref;
+const bar = () => ProgressBar_styles_ref;
 ;// ./src/components/ProgressBar/ProgressBar.tsx
 
 
@@ -48383,13 +48770,14 @@ const CollapsibleNavBar = ({
   className,
   useMatchPattern,
   onChange,
-  exactMatch = false
+  exactMatch = false,
+  defaultExpanded = false
 }) => {
   const toggleId = (0,external_react_namespaceObject.useId)();
   const {
     width
   } = (0,hooks_namespaceObject.useWindowSize)();
-  const [isChecked, onToggle] = (0,external_react_namespaceObject.useState)(false);
+  const [isChecked, onToggle] = (0,external_react_namespaceObject.useState)(defaultExpanded);
   const isMobile = width < SCREEN_SIZES['900'].width;
   (0,external_react_namespaceObject.useEffect)(() => {
     onToggle(false);
@@ -48820,6 +49208,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)."; }
@@ -49169,16 +49656,17 @@ const RowsPerPageDropdown = ({
       dropdownProps: {
         toggleButton: {
           css: {
-            marginLeft: 10,
+            marginLeft: 5,
             marginRight: 15,
             border: 'none',
-            background: 'none',
+            background: 'transparent',
+            borderRadius: 6,
             color: theme.colors.greyDarker,
             gap: 5,
-            padding: 0,
+            padding: 3,
             '&:focus': {
               color: theme.colors.greyDarker,
-              background: 'none',
+              background: 'transparent !important',
               '&::before': {
                 display: 'none'
               }
@@ -50545,6 +51033,12 @@ const AddNewAccountCard = ({
 
 
 ;// ./src/components/PersonInfo/constants.ts
+/**
+ * PersonInfo badge color config. Uses theme.colors only (no palette).
+ * DEFAULT_BADGE_COLORS: order of MainColors keys used when badges are strings (cycled by index).
+ * BADGE_COLORS(theme): map of MainColors key → { text, bg } using theme.colors.* and theme.colors.*20.
+ */
+
 const DEFAULT_BADGE_COLORS = ['purple', 'blueLight', 'green', 'blue', 'pink', 'turquoise', 'yellow', 'yellowWarm'];
 const BADGE_COLORS = theme => ({
   purple: {
@@ -50583,6 +51077,12 @@ const BADGE_COLORS = theme => ({
 ;// ./src/components/PersonInfo/styles.ts
 
 function PersonInfo_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)."; }
+/**
+ * PersonInfo layout and theme styles.
+ * Uses theme.colors only: greyDropdownFocused (counter), greyDarker (link default), blue (link hover).
+ * CustomBadge uses BADGE_COLORS(theme) for text/bg per MainColors. No theme.palette.
+ */
+
 
 
 const PersonInfoBase = /*#__PURE__*/base_default()("div",  true ? {
@@ -50719,6 +51219,11 @@ const avatarWrapperLinkStyles = theme => ({
   }
 });
 ;// ./src/components/PersonInfo/PersonInfoIcon.tsx
+/**
+ * PersonInfoIcon - Leading icon for PersonInfo row.
+ * Renders Icon with theme.colors.greyDarker when icon is a string; otherwise renders custom ReactNode.
+ * Used only by PersonInfo when icon prop is set.
+ */
 
 
 
@@ -50737,6 +51242,11 @@ const PersonInfoIcon = ({
   });
 };
 ;// ./src/components/PersonInfo/PersonInfoValue.tsx
+/**
+ * PersonInfoValue - Primary value cell for PersonInfo, optionally a link.
+ * When linkAttributes (from getLinkAttributes) are provided, renders as <a> with
+ * personInfoValueLinkStyles: theme.colors.greyDarker, hover theme.colors.blue. Used by PersonInfoAvatar.
+ */
 
 
 
@@ -50753,6 +51263,11 @@ const PersonInfoValue = ({
   });
 };
 ;// ./src/components/PersonInfo/helpers.ts
+/**
+ * Returns link props for PersonInfo value/avatar when link is set.
+ * For AI: used by PersonInfoAvatar and PersonInfoValue. Returns { as: 'a', href, target?, rel? }
+ * when link is truthy; otherwise {}. openLinkInNewTab sets target="_blank" and rel="noreferrer".
+ */
 const getLinkAttributes = (link, openLinkInNewTab) => {
   const isLink = Boolean(link);
   return isLink ? {
@@ -50763,6 +51278,12 @@ const getLinkAttributes = (link, openLinkInNewTab) => {
   } : {};
 };
 ;// ./src/components/PersonInfo/PersonInfoAvatar.tsx
+/**
+ * PersonInfoAvatar - Avatar + value row for PersonInfo.
+ * Renders optional Avatar (image URL) and PersonInfoValue. When link is set, wraps in anchor
+ * using helpers.getLinkAttributes; link hover uses theme.colors.blue (avatarWrapperLinkStyles).
+ * Uses styles.avatarName when avatar present, styles.value when only value. Used only by PersonInfo.
+ */
 
 
 
@@ -50799,6 +51320,12 @@ const PersonInfoAvatar = ({
   });
 };
 ;// ./src/components/PersonInfo/PersonInfoBadges.tsx
+/**
+ * PersonInfoBadges - Badge row for PersonInfo.
+ * badges can be a single ReactNode or array of string | ReactNode. Strings are rendered with
+ * CustomBadge using DEFAULT_BADGE_COLORS (cycled by index) and BADGE_COLORS(theme) for text/bg.
+ * Other items rendered as-is (e.g. <Badge>). Uses styles.badge and styles.badgeItem.
+ */
 
 
 
@@ -50833,6 +51360,12 @@ const PersonInfoBadges = ({
   });
 };
 ;// ./src/components/PersonInfo/PersonInfoCounter.tsx
+/**
+ * PersonInfoCounter - “+N” counter with tooltip for PersonInfo.
+ * Renders counter value from counterTooltip.users.length; tooltip lists users via ImageItem
+ * (image, name, optional link). Uses Tooltip (hover, no click). Counter text uses
+ * theme.colors.greyDropdownFocused (S.Counter). Used only by PersonInfo when counterTooltip is set.
+ */
 
 
 
@@ -50888,6 +51421,85 @@ const PersonInfoCounter = ({
 
 
 
+/**
+ * PersonInfo - Compact row for displaying a person or entity with title, value, and optional metadata.
+ *
+ * Uses `theme.colors` only (e.g. greyDropdownFocused, greyDarker, blue for link hover). Does not use
+ * `theme.palette`. Link and value hover use theme.colors.blue. Badge colors come from BADGE_COLORS(theme).
+ *
+ * ### Structure
+ * - Optional leading icon (name or custom ReactNode)
+ * - Title (required) and a row with: optional avatar + value (optionally a link), optional counter with tooltip
+ * - Optional badges (Badge components or strings)
+ * - Optional attributes list (strings or ReactNodes)
+ * - Optional description text
+ *
+ * ### Key props
+ * - `title` (required) — main label
+ * - `value` — primary value; use with `link` / `openLinkInNewTab` for a clickable value
+ * - `icon` — Icon name or custom node before the title
+ * - `avatar` — image URL; shown next to value
+ * - `badges` — ReactNode or array of ReactNode/string; rendered as badges below the row
+ * - `counterTooltip` — { users: [{ id, name, avatar, link?, openLinkInNewTab? }] } for a count + tooltip
+ * - `attributes` — array of strings or ReactNodes below the row
+ * - `description` — extra text block
+ * - `styles` — optional overrides for title, avatarName, counter, attributes, badge, badgeItem, value, description
+ *
+ * @category Components
+ * @subcategory Display
+ *
+ * @example
+ * ```tsx
+ * <PersonInfo title="Assignee" value="John Doe" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PersonInfo
+ *   title="Owner"
+ *   value="Jane Smith"
+ *   icon="user"
+ *   avatar="/avatar.jpg"
+ *   link="/users/jane"
+ *   openLinkInNewTab={false}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PersonInfo
+ *   title="Status"
+ *   value="In progress"
+ *   badges={[<Badge key="1">Active</Badge>]}
+ *   attributes={['Due: Jan 15', 'Priority: High']}
+ *   description="Additional context text."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PersonInfo
+ *   title="Participants"
+ *   value="3"
+ *   counterTooltip={{
+ *     users: [
+ *       { id: 1, name: 'Alice', avatar: '/a.jpg', link: '/users/1' },
+ *       { id: 2, name: 'Bob', avatar: '/b.jpg' },
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
+ * @see {@link Avatar} - Often used for avatar prop or inside counter tooltip
+ * @see {@link Icon} - Common choice for icon prop
+ * @see {@link Badge} - Used when badges prop contains Badge components
+ *
+ * @accessibility
+ * - Semantic structure (heading-like title, list of attributes)
+ * - Links support openLinkInNewTab and get appropriate attributes
+ * - Counter tooltip is focusable and keyboard-accessible via Tooltip
+ */
+
 const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function PersonInfo({
   title,
   icon,
@@ -50949,6 +51561,10 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
   });
 });
 ;// ./src/components/PersonInfo/index.ts
+/**
+ * PersonInfo public API. Re-exports PersonInfo component and all types (PersonInfoProps,
+ * PersonInfoStyles, PersonInfoCounterTooltip, etc.) for consumers.
+ */
 
 
 ;// ./src/components/UserProfile/styles.ts
@@ -51252,6 +51868,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================