@ssa-ui-kit/core 3.12.1 → 3.13.0

package/dist/components/FormHelperText/FormHelperTextBase.d.ts

@@ -3,4 +3,5 @@ export declare const FormHelperTextBase: import("@emotion/styled").StyledCompone
     as?: React.ElementType;
 } & {
     status?: string;
+    isDisabled?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/Pagination/Pagination.d.ts

@@ -80,5 +80,5 @@ import { PaginationProps } from './types';
  * - Screen reader friendly
  * - Proper focus management
  */
-declare const Pagination: ({ pagesCount, className, as, ariaLabel, isDisabled, pageNumberPlaceholder, errorTooltip, isPageSettingVisible, isPageFromCountVisible, isRowPerPageVisible, rowPerPageProps, manualPageNumberProps, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Pagination: ({ pagesCount, className, as, ariaLabel, isDisabled, pageNumberPlaceholder, errorTooltip, isPageSettingVisible, isPageFromCountVisible, isRowPerPageVisible, rowPerPageProps, manualPageNumberProps, renderPageCount, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Pagination;

package/dist/components/Pagination/PaginationButtons.d.ts

@@ -34,4 +34,4 @@ import { PaginationButtonsProps } from './types';
  * - Screen reader friendly
  * - Proper focus management
  */
-export declare const PaginationButtons: ({ range, selectedPage, onClick, isDisabled, }: PaginationButtonsProps) => false | import("@emotion/react/jsx-runtime").JSX.Element[];
+export declare const PaginationButtons: ({ range, selectedPage, onClick, isDisabled, }: PaginationButtonsProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/styles.d.ts

@@ -1,7 +1,9 @@
 import { Theme } from '@emotion/react';
 export declare const pageBtnStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const selectedPageBtnStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const arrowBtnStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const arrowBtnStyles: import("@emotion/react").SerializedStyles;
+/** Ellipsis ("...") cell rendered between page-number breaks; sized to match a Number cell. */
+export declare const breakStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const PaginationNav: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;

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

@@ -104,6 +104,14 @@ export interface PaginationProps extends CommonProps {
      * @default 'The value is out of range'
      */
     errorTooltip?: string;
+    /**
+     * Custom renderer for the page count indicator shown next to the manual
+     * page input (only when `isPageSettingVisible` and `isPageFromCountVisible`).
+     * Receives the current page and total page count and returns custom JSX,
+     * allowing wording such as `Pages 1 out of 300`.
+     * @default `${current} / ${total}`
+     */
+    renderPageCount?: (current: number, total: number) => React.ReactNode;
 }
 /**
  * Props for PaginationButtons component

package/dist/components/Switch/Switch.d.ts

@@ -11,8 +11,10 @@ import { SwitchProps } from './types';
  * Checkbox, and Radio. Pass `color="custom"` together with the `colors`
  * object to supply arbitrary CSS color values.
  *
- * The off state always shows a neutral grey background. The disabled state
- * always uses `greyFocused40`, regardless of color variant.
+ * The off state always shows a neutral grey background (`greyFocused`).
+ * The disabled state always uses `greySelectedMenuItem`, regardless of color variant.
+ * Hovering the on state darkens it: palette variants swap to their `palette.*.dark`
+ * token; custom colors get a `rgba(0,0,0,0.15)` overlay so the knob stays unaffected.
  *
  * @category Form Controls
  * @subcategory Input

package/dist/components/Switch/SwitchBase.d.ts

@@ -1,5 +1,7 @@
 interface SwitchBaseProps {
     onColor: string;
+    /** Explicit hover background for palette variants. When omitted, a ::after overlay darkens the track instead, leaving the knob unaffected. */
+    hoverColor?: string;
     offOutlineColor: string;
 }
 declare const SwitchBase: import("@emotion/styled").StyledComponent<{

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

@@ -7,13 +7,16 @@
  * Colors are driven by `theme.palette` for consistency with Button, Checkbox,
  * and Radio:
  * - `primary` (default) — blue; uses `palette.primary.main` for the on-state
- *   background, `palette.primary.light` for the off-state focus outline.
+ *   background, `palette.primary.dark` on hover, `palette.primary.light` for
+ *   the off-state focus outline.
  * - `success` — green; uses `palette.success.main` for the on-state background,
- *   `palette.success.light` for the off-state focus outline.
+ *   `palette.success.dark` on hover, `palette.success.light` for the off-state
+ *   focus outline.
  * - `custom` — no built-in color; supply exact values via the `colors` prop.
+ *   On hover, a `rgba(0,0,0,0.15)` overlay darkens the track; the knob is unaffected.
  *
- * The off state always uses a neutral grey background regardless of variant.
- * Disabled state always uses `greyFocused40` (semi-transparent grey, same for all variants).
+ * The off state always uses a neutral grey background (`greyFocused`) regardless
+ * of variant. Disabled state always uses `greySelectedMenuItem` (same for all variants).
  *
  * @example
  * ```tsx
@@ -54,7 +57,7 @@ export interface SwitchProps {
     label: string;
     /**
      * Whether the switch is disabled
-     * Disabled switches cannot be toggled and appear visually muted
+     * Disabled switches cannot be toggled; background becomes `greySelectedMenuItem`
      * @default false
      */
     isDisabled?: boolean;

package/dist/index.js

@@ -9653,6 +9653,8 @@ const main = {
     // #4178e1
     blue6RGB: 'rgb(244, 247, 252)',
     // #F4F7FC
+    blue12: 'rgba(65, 120, 225, 0.12)',
+    // #4178e1
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
     blueCool: 'rgba(108, 148, 247, 1)',
@@ -14887,7 +14889,7 @@ const IconButton = ({
 
 const LabelBase = /*#__PURE__*/base_default()("label",  true ? {
   target: "e1t1qetj0"
-} : 0)("display:inline-block;flex:1;font-weight:500;font-size:1rem;line-height:22px;color:", ({
+} : 0)("display:inline-block;flex:1;font-weight:500;font-size:1rem;line-height:18px;color:", ({
   theme,
   isDisabled
 }) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";margin:0 0 6px 4px;" + ( true ? "" : 0));
@@ -15122,13 +15124,15 @@ const Checkbox = ({
 
 const FormHelperTextBase = /*#__PURE__*/base_default()("span",  true ? {
   target: "ereid9f0"
-} : 0)("display:block;font-weight:400;font-size:0.688rem;margin:6px 0 0 4px;color:", ({
+} : 0)("display:block;font-weight:400;font-size:0.75rem;margin:6px 0 0 4px;color:", ({
   theme,
-  status = 'basic'
+  status = 'basic',
+  isDisabled
 }) => {
-  if (status === 'error') return theme.palette.error.main;
-  if (status === 'success') return theme.palette.success.main;
-  return theme.colors.greyDarker60;
+  if (isDisabled) return theme.colors.grey;
+  if (status === 'error') return theme.palette.error.dark;
+  if (status === 'success') return theme.palette.success.dark;
+  return theme.colors.greyDarker80;
 }, ";" + ( true ? "" : 0));
 ;// ./src/components/FormHelperText/FormHelperText.tsx
 
@@ -15140,10 +15144,10 @@ const FormHelperText = ({
   children,
   ...rest
 }) => {
-  status = disabled ? 'basic' : status;
   return (0,jsx_runtime_namespaceObject.jsx)(FormHelperTextBase, {
     role: role,
     status: status,
+    isDisabled: disabled,
     ...rest,
     children: children
   });
@@ -15160,13 +15164,13 @@ const InputBase = /*#__PURE__*/base_default()("input",  true ? {
   theme
 }) => showBorders ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;height:44px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;height:44px;padding:14px;font-weight:500;font-size:0.875rem;line-height:18px;&::placeholder{color:", ({
   theme
-}) => theme.colors.greyDarker60, ";}&:disabled{color:", ({
+}) => theme.colors.greyDarker80, ";}&:disabled{color:", ({
   theme
 }) => `${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";&::placeholder{color:", ({
+}) => theme.palette.secondary.light, ";&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}&:disabled,&:disabled:hover{border:", ({
   showBorders,
@@ -15191,7 +15195,7 @@ const basic = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
       borderColor: theme.colors.greyDarker80
     },
     '&:focus': {
-      borderColor: theme.palette.primary.main
+      borderColor: theme.palette.primary.light
     }
   }
 },  true ? "" : 0,  true ? "" : 0);
@@ -15215,9 +15219,6 @@ const success = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
     '&:focus': {
       borderColor: theme.palette.success.dark
     }
-  },
-  svg: {
-    stroke: theme.palette.success.main
   }
 },  true ? "" : 0,  true ? "" : 0);
 var styles_ref =  true ? {
@@ -15488,7 +15489,7 @@ const Input = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(InputIn
 ;// ./src/components/Textarea/TextareaBase.tsx
 
 const statusToPalette = status => status === 'custom' ? 'basic' : status;
-function getStatusBoxShadow(theme, status, state) {
+function getStatusBorderColor(theme, status, state) {
   const palette = statusToPalette(status);
   const colorMap = {
     error: {
@@ -15503,41 +15504,40 @@ function getStatusBoxShadow(theme, status, state) {
     },
     default: {
       rest: theme.colors.grey ?? '',
-      hover: theme.colors.greyDarker60 ?? theme.colors.grey ?? '',
-      focus: theme.palette.primary.main ?? theme.colors.grey ?? ''
+      hover: theme.colors.greyDarker80 ?? theme.colors.grey ?? '',
+      focus: theme.palette.primary.light ?? theme.colors.grey ?? ''
     }
   };
   const colors = colorMap[palette] ?? colorMap.default;
-  const color = colors[state];
-  return `inset 0 0 1.5px 0 ${color}`;
+  return colors[state];
 }
 const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   shouldForwardProp: prop => prop !== 'status',
   target: "e1jiml3c0"
 } : 0)("flex:1 100%;background:", ({
   theme
-}) => theme.colors.white, ";border-radius:12px;background-origin:border-box;background-clip:padding-box,border-box;border:none;box-shadow:", ({
+}) => theme.colors.white, ";border-radius:12px;border:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
+}) => `1px solid ${getStatusBorderColor(theme, status, 'rest')}`, ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:500;font-size:0.875rem;line-height:18px;&::placeholder{color:", ({
   theme
-}) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
+}) => theme.colors.greyDarker80, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
-}) => `${theme.colors.grey}`, ";box-shadow:", ({
+}) => `${theme.colors.grey}`, ";border:", ({
   theme
-}) => `inset 0 0 1.5px 0 ${theme.colors.grey}`, ";background:", ({
+}) => `1px solid ${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";resize:none;&::placeholder{color:", ({
+}) => theme.palette.secondary.light, ";resize:none;&::placeholder{color:", ({
   theme
-}) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){box-shadow:", ({
+}) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){border-color:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'hover'), ";}&:focus:not(:disabled, [readonly]){box-shadow:", ({
+}) => getStatusBorderColor(theme, status, 'hover'), ";}&:focus:not(:disabled, [readonly]){border-color:", ({
   theme,
   status = 'basic'
-}) => getStatusBoxShadow(theme, status, 'focus'), ";}" + ( true ? "" : 0));
+}) => getStatusBorderColor(theme, status, 'focus'), ";}" + ( true ? "" : 0));
 ;// ./src/components/Textarea/Textarea.tsx
 
 
@@ -15775,6 +15775,7 @@ const TextField = ({
   return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
       htmlFor: `formElement-${name}`,
+      isDisabled: disabled,
       children: label
     }), multirow ? (0,jsx_runtime_namespaceObject.jsx)(Textarea_Textarea, {
       name: name,
@@ -15788,6 +15789,7 @@ const TextField = ({
       status: status,
       disabled: disabled,
       maxLength: maxLength,
+      showStatusIcon: false,
       onKeyUp: handleInputKeyUp,
       ...props
     }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
@@ -16342,17 +16344,31 @@ const NumberField = ({
 
 ;// ./src/components/Switch/SwitchBase.tsx
 
-const SwitchBase = /*#__PURE__*/base_default()("button",  true ? {
+const SwitchBase = /*#__PURE__*/base_default()('button',  true ? {
+  shouldForwardProp: prop => prop !== 'onColor' && prop !== 'hoverColor' && prop !== 'offOutlineColor',
   target: "eb0rpfw0"
 } : 0)("width:44px;height:24px;border:0;outline:0;padding:0;border-radius:50px;position:relative;background:", ({
   onColor
 }) => onColor, ";cursor:pointer;&::before{position:absolute;content:'';height:14px;width:14px;right:5px;bottom:calc(50% - 7px);background-color:", ({
   theme
-}) => theme.colors.white, ";transition:0.4s;border-radius:50%;}&[aria-checked='false']{background:", ({
+}) => theme.colors.white, ";z-index:1;transition:0.4s;border-radius:50%;}&[aria-checked='false']{background:", ({
   theme
-}) => theme.colors.greyFocused, ";}&:disabled{background:", ({
+}) => theme.colors.greyFocused, ";}&:not(:disabled)[aria-checked='true']:hover{", ({
+  hoverColor
+}) => hoverColor ? `background: ${hoverColor};` : '', ";}", ({
+  hoverColor
+}) => !hoverColor ? `
+        &:not(:disabled)[aria-checked='true']:hover::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: 50px;
+          background: rgba(0, 0, 0, 0.15);
+          pointer-events: none;
+        }
+      ` : '', " &:disabled{background:", ({
   theme
-}) => theme.colors.greyFocused40, ";cursor:auto;}&[aria-checked='false']:focus::after,&:not(:disabled)[aria-checked='false']:hover::after{content:'';position:absolute;inset:0;border-style:solid;border-width:1px;border-color:", ({
+}) => theme.colors.greySelectedMenuItem, ";cursor:auto;}&[aria-checked='false']:focus::after,&:not(:disabled)[aria-checked='false']:hover::after{content:'';position:absolute;inset:0;border-style:solid;border-width:1px;border-color:", ({
   offOutlineColor
 }) => offOutlineColor, ";border-radius:50px;}&[aria-checked='true']::before{transform:translateX(0);}&[aria-checked='false']::before{transform:translateX(-20px);}" + ( true ? "" : 0));
 /* harmony default export */ const Switch_SwitchBase = (SwitchBase);
@@ -16446,8 +16462,10 @@ const SwitchContextProvider = ({
  * Checkbox, and Radio. Pass `color="custom"` together with the `colors`
  * object to supply arbitrary CSS color values.
  *
- * The off state always shows a neutral grey background. The disabled state
- * always uses `greyFocused40`, regardless of color variant.
+ * The off state always shows a neutral grey background (`greyFocused`).
+ * The disabled state always uses `greySelectedMenuItem`, regardless of color variant.
+ * Hovering the on state darkens it: palette variants swap to their `palette.*.dark`
+ * token; custom colors get a `rgba(0,0,0,0.15)` overlay so the knob stays unaffected.
  *
  * @category Form Controls
  * @subcategory Input
@@ -16511,12 +16529,15 @@ const Switch = ({
     toggle
   } = useSwitchContext();
   let onColor;
+  let hoverColor;
   let offOutlineColor;
   if (color === 'primary') {
     onColor = theme.palette.primary.main;
+    hoverColor = theme.palette.primary.dark;
     offOutlineColor = theme.palette.primary.light;
   } else if (color === 'success') {
     onColor = theme.palette.success.main;
+    hoverColor = theme.palette.success.dark;
     offOutlineColor = theme.palette.success.light;
   } else {
     onColor = colors?.on || theme.palette.primary.main;
@@ -16531,6 +16552,7 @@ const Switch = ({
     disabled: isDisabled,
     onClick: () => !isDisabled && toggle(),
     onColor: onColor,
+    hoverColor: hoverColor,
     offOutlineColor: offOutlineColor
   });
 };
@@ -50009,22 +50031,86 @@ const History = ({
 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)."; }
 
 
-const baseBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("height:30px;border-radius:6px;", theme.mediaQueries.md, "{height:25px;}&:disabled{cursor:default;}" + ( true ? "" : 0),  true ? "" : 0);
-const pageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " background:unset;box-shadow:unset;color:", theme.colors.greyDarker, ";padding:0 11px;", theme.mediaQueries.md, "{padding:0 9px;}&:disabled{background:unset;box-shadow:unset;}&:not(:disabled):hover,&:not(:disabled):active,&:not(:disabled):focus{background:", theme.colors.greyLighter, ";box-shadow:unset;}" + ( true ? "" : 0),  true ? "" : 0);
-const selectedBtnBg = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.palette.primary.main, ";&:disabled{background:", theme.palette.primary.main, ";}" + ( true ? "" : 0),  true ? "" : 0);
-const selectedPageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " ", selectedBtnBg(theme), " color:", theme.colors.white, ";margin:0 3px;padding:0 13px;", theme.mediaQueries.md, "{padding:0 10px;}&:hover,&:active,&:focus{", selectedBtnBg(theme), ";}&:not(:disabled):hover{box-shadow:0 5px 5px -1px rgba(0, 0, 0, 0.3);cursor:default;}" + ( true ? "" : 0),  true ? "" : 0);
-const arrowBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseBtnStyles(theme), " padding:0 8px;background:", theme.colors.white, ";&:disabled{background:unset;}&:not(:disabled):hover{box-shadow:0 5px 5px -2px rgba(0, 0, 0, 0.2);cursor:pointer;}" + ( true ? "" : 0),  true ? "" : 0);
+/** Square 26x26 cell shared by page/selected/arrow buttons (design "Number" atom). */
+const baseBtnStyles = {
+  width: 26,
+  height: 26,
+  padding: 0,
+  borderRadius: 6,
+  justifyContent: 'center',
+  fontSize: 14,
+  fontWeight: 500,
+  letterSpacing: 0,
+  lineHeight: '18px'
+};
+
+/** Shared by every `&:disabled` block below so it survives merging into one object. */
+const disabledCursor = {
+  cursor: 'default'
+};
+const pageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: 'transparent',
+  boxShadow: 'unset',
+  color: theme.colors.greyDarker,
+  '&:disabled': {
+    ...disabledCursor,
+    background: theme.palette.secondary.main,
+    color: theme.colors.grey,
+    boxShadow: 'unset'
+  },
+  '&:not(:disabled):hover, &:not(:disabled):active, &:not(:disabled):focus': {
+    background: theme.palette.secondary.light,
+    boxShadow: 'unset'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+const selectedPageBtnStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: theme.palette.primary.main,
+  color: theme.colors.white,
+  '&:disabled': {
+    ...disabledCursor,
+    background: theme.palette.primary.main
+  },
+  '&:hover, &:active, &:focus': {
+    background: theme.palette.primary.dark
+  },
+  '&:not(:disabled):hover': {
+    cursor: 'default'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+const arrowBtnStyles = /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  background: 'transparent',
+  '&:disabled': {
+    ...disabledCursor,
+    background: 'transparent'
+  },
+  '&:not(:disabled):hover': {
+    cursor: 'pointer'
+  }
+},  true ? "" : 0,  true ? "" : 0);
+
+/** Ellipsis ("...") cell rendered between page-number breaks; sized to match a Number cell. */
+const breakStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
+  ...baseBtnStyles,
+  display: 'inline-flex',
+  alignItems: 'center',
+  background: 'transparent',
+  color: theme.colors.greyDarker,
+  cursor: 'default'
+},  true ? "" : 0,  true ? "" : 0);
 const PaginationNav = /*#__PURE__*/base_default()("nav",  true ? {
   target: "e93vg8b1"
 } : 0)( true ? {
-  name: "zjik7",
-  styles: "display:flex"
+  name: "1l7f8hp",
+  styles: "display:flex;align-items:center;gap:38px"
 } : 0);
 const PageNumberInput = /*#__PURE__*/base_default()(Input_Input,  true ? {
   target: "e93vg8b0"
 } : 0)( true ? {
-  name: "1ubbv3z",
-  styles: "width:65px;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&:focus,&:hover{border-width:1px!important;}&+div{right:24px;}"
+  name: "96v664",
+  styles: "width:80px;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&:focus,&:hover{border-width:1px!important;}&+div{right:24px;}"
 } : 0);
 ;// ./src/components/Pagination/ArrowButton.tsx
 
@@ -50075,15 +50161,15 @@ const ArrowButton = ({
   return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
     startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
       name: `carrot-${direction}`,
-      size: 12,
-      color: theme.colors.greyDisabled
+      size: 18,
+      color: theme.colors.greyDarker80
     }),
     variant: "tertiary",
     onClick: onClick,
     isDisabled: isDisabled,
     size: "small",
     className: className,
-    css: arrowBtnStyles(theme),
+    css: arrowBtnStyles,
     "aria-label": `Go to ${direction === 'left' ? 'previous' : 'next'} page`
   });
 };
@@ -50094,10 +50180,6 @@ function PaginationButtons_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 
-var PaginationButtons_ref =  true ? {
-  name: "1ll9bqd",
-  styles: "cursor:default"
-} : 0;
 /**
  * Break - Ellipsis separator for page number ranges
  *
@@ -50107,7 +50189,7 @@ var PaginationButtons_ref =  true ? {
  * @internal
  */
 const Break = () => (0,jsx_runtime_namespaceObject.jsx)("span", {
-  css: PaginationButtons_ref,
+  css: breakStyles,
   children: "..."
 });
 
@@ -50179,19 +50261,26 @@ const PageButton = ({
  * - Screen reader friendly
  * - Proper focus management
  */
+var PaginationButtons_ref =  true ? {
+  name: "1lcc3va",
+  styles: "display:flex;align-items:center;gap:0"
+} : 0;
 const PaginationButtons = ({
   range,
   selectedPage,
   onClick,
   isDisabled
 }) => {
-  return Array.isArray(range) && range.map((page, index) => {
-    return page === -1 ? (0,jsx_runtime_namespaceObject.jsx)(Break, {}, index) : (0,jsx_runtime_namespaceObject.jsx)(PageButton, {
-      page: page,
-      isSelected: page === selectedPage,
-      onClick: () => onClick(page),
-      isDisabled: isDisabled
-    }, index);
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: PaginationButtons_ref,
+    children: Array.isArray(range) && range.map((page, index) => {
+      return page === -1 ? (0,jsx_runtime_namespaceObject.jsx)(Break, {}, index) : (0,jsx_runtime_namespaceObject.jsx)(PageButton, {
+        page: page,
+        isSelected: page === selectedPage,
+        onClick: () => onClick(page),
+        isDisabled: isDisabled
+      }, index);
+    })
   });
 };
 ;// ./src/components/Pagination/constants.ts
@@ -50264,7 +50353,6 @@ const PaginationContextProvider = ({
   });
 };
 ;// ./src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx
-function RowsPerPageDropdown_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)."; }
 
 
 
@@ -50315,14 +50403,6 @@ function RowsPerPageDropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
  * - Screen reader friendly
  */
 
-var RowsPerPageDropdown_ref =  true ? {
-  name: "cx840d",
-  styles: "width:auto;ul{width:auto;}"
-} : 0;
-var RowsPerPageDropdown_ref2 =  true ? {
-  name: "1nkb47o",
-  styles: "font-size:14px;line-height:1;text-wrap:nowrap"
-} : 0;
 const RowsPerPageDropdown = ({
   selectedItem = DEFAULT_PER_PAGE_VALUE,
   rowsPerPageList = ROWS_PER_PAGE_LIST,
@@ -50343,10 +50423,28 @@ const RowsPerPageDropdown = ({
     setPerPage(value);
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: RowsPerPageDropdown_ref,
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      width: 'auto',
+      gap: 8,
+      ul: {
+        width: 'auto'
+      },
+      li: {
+        height: 40,
+        padding: '8px 12px'
+      },
+      'li[aria-selected="true"]': {
+        background: theme.colors.blue12
+      }
+    },  true ? "" : 0,  true ? "" : 0),
     children: [(0,jsx_runtime_namespaceObject.jsxs)(Typography_Typography, {
       variant: "subtitle",
-      css: RowsPerPageDropdown_ref2,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        fontSize: 14,
+        lineHeight: 1,
+        textWrap: 'nowrap',
+        color: theme.colors.greyDarker
+      },  true ? "" : 0,  true ? "" : 0),
       children: [rowsPerPageText, ":"]
     }), (0,jsx_runtime_namespaceObject.jsx)(Dropdown_Dropdown, {
       selectedItem: selectedItemForDropdown,
@@ -50354,13 +50452,11 @@ const RowsPerPageDropdown = ({
       dropdownProps: {
         toggleButton: {
           css: {
-            marginLeft: 5,
-            marginRight: 15,
             border: 'none',
             background: 'transparent',
             borderRadius: 6,
             color: theme.colors.greyDarker,
-            gap: 5,
+            gap: 4,
             padding: 3,
             '&:focus': {
               color: theme.colors.greyDarker,
@@ -50481,16 +50577,12 @@ function Pagination_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
  */
 
 var Pagination_ref =  true ? {
-  name: "13slo1u",
-  styles: "width:auto;margin-right:5px"
+  name: "5rxe0u",
+  styles: "width:auto;gap:16px"
 } : 0;
 var Pagination_ref2 =  true ? {
-  name: "1j97xhc",
-  styles: "margin-right:12px"
-} : 0;
-var Pagination_ref3 =  true ? {
-  name: "lrb7um",
-  styles: "margin-left:7px"
+  name: "5rxe0u",
+  styles: "width:auto;gap:16px"
 } : 0;
 const Pagination = ({
   pagesCount,
@@ -50504,7 +50596,8 @@ const Pagination = ({
   isPageFromCountVisible = true,
   isRowPerPageVisible = false,
   rowPerPageProps,
-  manualPageNumberProps
+  manualPageNumberProps,
+  renderPageCount
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const {
@@ -50549,16 +50642,16 @@ const Pagination = ({
           autoComplete: 'off'
         },
         ...manualPageNumberProps
-      }), isPageFromCountVisible && (0,jsx_runtime_namespaceObject.jsxs)("span", {
+      }), isPageFromCountVisible && (renderPageCount ? renderPageCount(page || 0, pagesCount) : (0,jsx_runtime_namespaceObject.jsxs)("span", {
         css: /*#__PURE__*/(0,react_namespaceObject.css)({
           textWrap: 'nowrap',
           fontSize: 14,
-          marginLeft: 16,
           color: theme.colors.greyDarker
         },  true ? "" : 0,  true ? "" : 0),
         children: [page || 0, " / ", pagesCount]
-      })]
+      }))]
     }), (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      css: Pagination_ref2,
       children: [(0,jsx_runtime_namespaceObject.jsx)(ArrowButton, {
         direction: "left",
         onClick: () => {
@@ -50566,8 +50659,7 @@ const Pagination = ({
             setPage(page - 1);
           }
         },
-        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === 1,
-        css: Pagination_ref2
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === 1
       }), (0,jsx_runtime_namespaceObject.jsx)(PaginationButtons, {
         range: range,
         selectedPage: page,
@@ -50580,8 +50672,7 @@ const Pagination = ({
             setPage(page + 1);
           }
         },
-        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === pagesCount,
-        css: Pagination_ref3
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === pagesCount
       })]
     })]
   });