@dynamic-framework/ui-react 1.1.4 → 1.2.0

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

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    className?: string;
+    isFlush?: boolean;
+    isNumbered?: boolean;
+    isHorizontal?: boolean;
+    horizontalBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}>;
+export default function MList({ children, className, isFlush, isNumbered, isHorizontal, horizontalBreakpoint, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+declare type Props = PropsWithChildren<{
+    className?: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    theme?: string;
+    onMClick?: () => void;
+}>;
+export default function MListItem({ children, className, isActive, isDisabled, theme, onMClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import MListItem from './MListItem';
+declare type Props = Omit<ComponentProps<typeof MListItem>, 'children'> & {
+    description: string;
+    date: string;
+    amount: number;
+    classNameMovement?: string;
+};
+export default function MListItemMovement({ description, date, amount, classNameMovement, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { ResponsivePaginationProps } from 'react-responsive-pagination';
+export declare type MPaginatorProps = {
+    className?: ResponsivePaginationProps['extraClassName'];
+    current: ResponsivePaginationProps['current'];
+    onPageChange: ResponsivePaginationProps['onPageChange'];
+    total: ResponsivePaginationProps['total'];
+    previousLabel?: ResponsivePaginationProps['previousLabel'];
+    nextLabel?: ResponsivePaginationProps['nextLabel'];
+    showArrows?: ResponsivePaginationProps['renderNav'];
+    maxWidth?: ResponsivePaginationProps['maxWidth'];
+};
+export default function MPaginator({ className, nextLabel, previousLabel, showArrows, ...props }: MPaginatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,5 @@ declare type Props = PropsWithChildren<{
     isOpen: boolean;
     setIsOpen?: (isOpen: boolean) => void;
 }>;
-export default function MPopover({ children, renderComponent, isOpen, setIsOpen, }: Props): JSX.Element;
+export default function MPopover({ children, renderComponent, isOpen, setIsOpen, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,4 +5,4 @@ export declare type Props = PropsWithChildren<{
     backgroundColor?: string;
     foregroundColor?: string;
 }>;
-export default function MSkeleton({ speed, viewBox, backgroundColor, foregroundColor, children, }: Props): JSX.Element;
+export default function MSkeleton({ speed, viewBox, backgroundColor, foregroundColor, children, }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare type Step = {
+    label: string;
+    value: number;
+};
+declare type Props = {
+    options: Array<Step>;
+    currentStep: number;
+    successIcon?: string;
+    isVertical?: boolean;
+};
+export default function MStepper({ options, currentStep, successIcon, isVertical, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -2,5 +2,5 @@ import type { PropsWithChildren } from 'react';
 declare type Props = PropsWithChildren<{
     tab: string;
 }>;
-export default function MTabContent({ tab, children }: Props): JSX.Element | null;
+export default function MTabContent({ tab, children }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -14,6 +14,6 @@ declare type Props = PropsWithChildren<{
 declare type TabContextState = {
     isSelected: (tab: TabOption['tab']) => boolean;
 };
-export default function MTabs({ children, defaultSelected, onChange, options, className, isVertical, }: Props): JSX.Element;
+export default function MTabs({ children, defaultSelected, onChange, options, className, isVertical, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function useTabContext(): TabContextState;
 export {};

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

@@ -8,5 +8,5 @@ declare type Props = {
     };
     position?: ToastPosition;
 };
-export default function MToastContainer({ style, position, }: Props): JSX.Element;
+export default function MToastContainer({ style, position, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,4 +14,4 @@ export declare type MTooltipProps = PropsWithChildren<{
     placement?: Placement;
     Component: ReactNode;
 }>;
-export default function MTooltip({ classNameContainer, className, offSet, padding, withFocus, withClick, withHover, isOpen, placement, size, Component, children, }: MTooltipProps): JSX.Element;
+export default function MTooltip({ classNameContainer, className, offSet, padding, withFocus, withClick, withHover, isOpen, placement, size, Component, children, }: MTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/banking/MCollapseIconText.d.ts

@@ -19,5 +19,5 @@ declare type Props = PropsWithChildren<{
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
 }>;
-export default function MCollapseIconText({ children, icon, iconSize, iconTheme, title, iconFamilyClass, iconFamilyPrefix, }: Props): JSX.Element;
+export default function MCollapseIconText({ children, icon, iconSize, iconTheme, title, iconFamilyClass, iconFamilyPrefix, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/banking/MPermissionGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PermissionItemType } from './interface';
 declare type Props = {
     title: string;
@@ -8,5 +7,5 @@ declare type Props = {
     onChangePermission: (permission: PermissionItemType, isChecked: boolean) => void;
     onCustomAction?: (permission: PermissionItemType) => void;
 };
-export default function MPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction, }: Props): JSX.Element;
+export default function MPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/banking/MPermissionItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PermissionItemType } from './interface';
 declare type Props = {
     permission: PermissionItemType;
@@ -6,5 +5,5 @@ declare type Props = {
     onChange: (isChecked: boolean) => void;
     onAction?: () => void;
 };
-export default function MPermissionItem({ permission, permissionState, onChange, onAction, }: Props): JSX.Element;
+export default function MPermissionItem({ permission, permissionState, onChange, onAction, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/banking/MSummaryCard.d.ts

@@ -8,5 +8,5 @@ declare type Props = {
     iconTheme: string;
     Summary: ReactElement<typeof Trans> | string;
 };
-export default function MSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }: Props): JSX.Element;
+export default function MSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,4 +13,11 @@ export { default as MTooltip } from './MTooltip';
 export { default as MCollapse } from './MCollapse';
 export { default as MInputCurrency } from './MInputCurrency';
 export { default as MBoxFile } from './MBoxFile';
+export { default as MCarousel } from './MCarousel';
+export { default as MCarouselSlide } from './MCarouselSlide';
+export { default as MList } from './MList';
+export { default as MListItem } from './MListItem';
+export { default as MListItemMovement } from './MListItemMovement';
+export { default as MStepper } from './MStepper';
+export { default as MFormikInputCurrency } from './MFormikInputCurrency';
 export type { TabOption } from './MTabs';

package/dist/types/contexts/LiquidContext.d.ts

@@ -9,6 +9,6 @@ interface LiquidContextInterface {
     };
 }
 export declare const LiquidContext: import("react").Context<LiquidContextInterface>;
-export declare function LiquidContextProvider({ children, }: PropsWithChildren): JSX.Element;
+export declare function LiquidContextProvider({ children, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export declare function useLiquidContext(): LiquidContextInterface;
 export default LiquidContext;

package/dist/types/contexts/ModalContext.d.ts

@@ -39,6 +39,6 @@ export declare type ModalProps = {
     closeModal: CloseModalFunction;
 };
 export declare const ModalContext: import("react").Context<ModalContextType | undefined>;
-export declare function ModalContextProvider({ portalName, children, availableModals, }: Props): JSX.Element;
+export declare function ModalContextProvider({ portalName, children, availableModals, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function useModalContext(): ModalContextType;
 export {};

package/dist/types/contexts/OffcanvasContext.d.ts

@@ -39,6 +39,6 @@ export declare type OffcanvasProps = {
     closeOffcanvas: CloseOffcanvasFunction;
 };
 export declare const OffcanvasContext: import("react").Context<OffcanvasContextType | undefined>;
-export declare function OffcanvasContextProvider({ portalName, children, availableOffcanvas, }: Props): JSX.Element;
+export declare function OffcanvasContextProvider({ portalName, children, availableOffcanvas, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function useOffcanvasContext(): OffcanvasContextType;
 export {};

package/dist/types/stories/components/MCarousel.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MCarousel } from '../../components';
+declare const config: Meta<typeof MCarousel>;
+export default config;
+declare type Story = StoryObj<typeof MCarousel>;
+export declare const Default: Story;
+export declare const TwoPerPage: Story;
+export declare const WithBreakpoints: Story;
+export declare const AutoplayAndLoop: Story;

package/dist/types/stories/components/MFormikInputCurrency.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MFormikInputCurrency } from '../../components';
+declare const config: Meta<typeof MFormikInputCurrency>;
+export default config;
+declare type Story = StoryObj<typeof MFormikInputCurrency>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const WithErrors: Story;

package/dist/types/stories/components/MList.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MList } from '../../components';
+declare const config: Meta<typeof MList>;
+export default config;
+declare type Story = StoryObj<typeof MList>;
+export declare const Default: Story;
+export declare const Flush: Story;
+export declare const Numbered: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalWithBreakpoint: Story;

package/dist/types/stories/components/MListItem.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MListItem } from '../../components';
+declare const config: Meta<typeof MListItem>;
+export default config;
+declare type Story = StoryObj<typeof MListItem>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Disabled: Story;
+export declare const WithTheme: Story;

package/dist/types/stories/components/MListItemMovement.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MListItemMovement } from '../../components';
+declare const config: Meta<typeof MListItemMovement>;
+export default config;
+declare type Story = StoryObj<typeof MListItemMovement>;
+export declare const Movement: Story;
+export declare const Movements: Story;

package/dist/types/stories/components/MPaginator.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MPaginator from '../../components/MPaginator';
+declare const meta: Meta<typeof MPaginator>;
+export default meta;
+declare type Story = StoryObj<typeof MPaginator>;
+export declare const Default: Story;
+export declare const LabelArrows: Story;
+export declare const NoArrows: Story;
+export declare const CustomCurrentPage: Story;
+export declare const CustomMaxWidth: Story;

package/dist/types/stories/components/MStepper.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MStepper } from '../../components';
+declare const config: Meta<typeof MStepper>;
+export default config;
+declare type Story = StoryObj<typeof MStepper>;
+export declare const Default: Story;
+export declare const Vertical: Story;

package/dist/types/stories/hooks/useFormatCurrency.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { Meta, StoryObj } from '@storybook/react';
-declare const Example: () => JSX.Element;
+declare const Example: () => import("react/jsx-runtime").JSX.Element;
 declare const config: Meta<typeof Example>;
 export default config;
 declare type Story = StoryObj<typeof Example>;

package/dist/types/stories/hooks/useModalContext.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { Meta, StoryObj } from '@storybook/react';
-declare const Example: () => JSX.Element;
+declare const Example: () => import("react/jsx-runtime").JSX.Element;
 declare const config: Meta<typeof Example>;
 export default config;
 declare type Story = StoryObj<typeof Example>;

package/dist/types/stories/hooks/useOffcanvasContext.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { Meta, StoryObj } from '@storybook/react';
 import { MOffcanvas } from '../../components';
-declare const Example: () => JSX.Element;
+declare const Example: () => import("react/jsx-runtime").JSX.Element;
 declare const config: Meta<typeof Example>;
 export default config;
 declare type Story = StoryObj<typeof MOffcanvas>;

package/dist/types/stories/hooks/useToast.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Meta } from '@storybook/react';
 import type { AlertType } from '@dynamic-framework/ui';
 declare type Props = {
@@ -6,7 +5,7 @@ declare type Props = {
     type: AlertType;
     showClose: boolean;
 };
-declare const Example: ({ message, type, showClose }: Props) => JSX.Element;
+declare const Example: ({ message, type, showClose }: Props) => import("react/jsx-runtime").JSX.Element;
 declare const config: Meta<typeof Example>;
 export default config;
 export declare const useToast: {

package/dist/types/utils/index.d.ts

@@ -1 +1,2 @@
+export { liquidParser } from '@dynamic-framework/ui';
 export { default as configureI18n } from './configureI18n';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamic-framework/ui-react",
   "sideEffects": false,
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -25,9 +25,9 @@
     "build": "pnpm build:react && pnpm build:style",
     "build:react": "rimraf dist && tsc -p . && rollup -c rollup.config.js",
     "build:react:watch": "tsc -p . && rollup -c rollup.config.js",
-    "build:scss": "sass --load-path=node_modules --no-source-map --style=compressed src/style/main.scss dist/css/dynamic-ui-react.css",
-    "build:scss:watch": "sass --load-path=node_modules -w src/style/main.scss dist/css/dynamic-ui-react.css",
-    "build:autoprefixer": "postcss dist/css/dynamic-ui-react.css --use autoprefixer -o dist/css/dynamic-ui-react.css --no-map",
+    "build:scss": "sass --load-path=node_modules --no-source-map --style=compressed src/style/:dist/css",
+    "build:scss:watch": "sass --load-path=node_modules -w src/style:dist/css",
+    "build:autoprefixer": "postcss dist/css/*.css --replace --use autoprefixer --no-map",
     "build:style": "pnpm build:scss && pnpm build:autoprefixer",
     "clean": "rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.js",
@@ -45,21 +45,25 @@
     "src/style"
   ],
   "dependencies": {
+    "@dynamic-framework/ui": "^1.3.0",
     "@floating-ui/react": "^0.24.1",
+    "@splidejs/react-splide": "^0.7.12",
+    "@splidejs/splide": "^4.1.4",
     "axios": "^1.1.2",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "i18next": "~21.9.0",
     "react-content-loader": "~6.2.0",
     "react-datepicker": "~4.8.0",
-    "react-dropzone": "^14.2.3"
+    "react-dropzone": "^14.2.3",
+    "react-responsive-pagination": "^2.2.1",
+    "yup": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@dynamic-framework/ui": "^1.1.3",
     "@mdx-js/react": "^2.3.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@storybook/addon-actions": "7.0.6",
@@ -76,9 +80,9 @@
     "@testing-library/react": "^13.4.0",
     "@types/jest": "29.1.2",
     "@types/lodash.camelcase": "^4.3.7",
-    "@types/luxon": "~3.0.1",
+    "@types/luxon": "~3.2.1",
     "@types/node": "^15.12.2",
-    "@types/react": "^18.0.8",
+    "@types/react": "^18.2.19",
     "@types/react-datepicker": "~4.8.0",
     "@types/react-dom": "^18.0.3",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
@@ -99,10 +103,10 @@
     "jest-cli": "^29.1.2",
     "jest-environment-jsdom": "^29.1.2",
     "lint-staged": "^12.4.1",
-    "luxon": "~3.0.3",
+    "luxon": "~3.2.1",
     "postcss-cli": "^10.1.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "~11.18.3",
     "react-toastify": "~9.0.8",
     "rimraf": "^2.6.3",
@@ -116,7 +120,6 @@
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
-    "@dynamic-framework/ui": "*",
     "formik": "^2.2.9",
     "html2canvas": "^1.4.1",
     "luxon": "~3.0.3",
@@ -130,5 +133,5 @@
       "@dynamic-framework/ui"
     ]
   },
-  "gitHead": "139f972bf7a723ad47431a7afd1fc835a695dcf1"
+  "gitHead": "125b91980cab3c9ac80e23fcc9f44c9e93f71d01"
 }

package/src/style/components/_+import.scss

@@ -4,3 +4,6 @@
 @import "m-tabs";
 @import "m-popover";
 @import "m-box-file";
+@import "m-carousel";
+@import "m-stepper";
+@import "m-paginator";

package/src/style/components/_m-carousel.scss

@@ -0,0 +1,44 @@
+@import "@splidejs/splide/src/css/template/default/index";
+
+.m-carousel {
+  // Arrows
+  --#{$prefix}m-carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  // Pagination
+  --#{$prefix}m-carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  --#{$prefix}m-carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}m-carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
+  // :focus
+  --#{$prefix}m-carousel-focus-outline-color: var(--#{$prefix}focus-ring-color);
+
+  .m-carousel-arrows {
+
+    .m-carousel-arrow.m-carousel-arrow-prev {
+      left: var(--#{$prefix}m-carousel-arrow-space);
+    }
+    .m-carousel-arrow.m-carousel-arrow-next {
+      right: var(--#{$prefix}m-carousel-arrow-space);
+    }
+  }
+  .m-carousel-pagination {
+    bottom: var(--#{$prefix}m-carousel-pagination-bottom);
+
+    .m-carousel-pagination-page {
+      background-color: var(--#{$prefix}m-carousel-pagination-page-bg);
+
+      &.is-active {
+        background-color: var(--#{$prefix}m-carousel-pagination-active-page-bg);
+      }
+    }
+  }
+
+  &.splide.is-focus-in .m-carousel-arrow:focus,
+  &.splide.is-focus-in .m-carousel-pagination-page:focus {
+    outline-color: var(--#{$prefix}m-carousel-focus-outline-color);
+  }
+
+  .m-carousel-slide.is-active.is-visible {
+    > * {
+      // TODO: ASK. Exist active state on slide(?)
+    }
+  }
+}

package/src/style/components/_m-paginator.scss

@@ -0,0 +1,98 @@
+.m-pagination {
+  // Page link
+  --#{$prefix}m-pagination-page-item-size: 2.125rem;
+  --#{$prefix}m-pagination-page-link-bg: transparent;
+  --#{$prefix}m-pagination-page-border-radius: 50%;
+  // Arrow
+  --#{$prefix}m-pagination-arrow-font-size: var(--#{$prefix}ref-fs-subparagraph);
+  --#{$prefix}m-pagination-arrow-padding-y: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}m-pagination-arrow-padding-x: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}m-pagination-arrow-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}m-pagination-arrow-color: var(--#{$prefix}secondary);
+  // Arrow :focus
+  --#{$prefix}m-pagination-focus-arrow-bg: var(--#{$prefix}secondary-100);
+  // Arrow previous
+  --#{$prefix}m-pagination-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  --#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  // Arrow next
+  --#{$prefix}m-pagination-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  --#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  margin: 0;
+
+  .page-item {
+    min-width: var(--#{$prefix}m-pagination-page-item-size);
+    min-height: var(--#{$prefix}m-pagination-page-item-size);
+
+    &:not(.active, :hover) .page-link {
+      background-color: var(--#{$prefix}m-pagination-page-link-bg);
+    }
+  }
+
+  .m-arrow .page-link {
+    min-width: fit-content;
+    padding: var(--#{$prefix}m-pagination-arrow-padding-y) var(--#{$prefix}m-pagination-arrow-padding-x);
+    font-size: var(--#{$prefix}m-pagination-arrow-font-size);
+    border-radius: var(--#{$prefix}m-pagination-arrow-border-radius);
+
+    &:focus {
+      background-color: var(--#{$prefix}m-pagination-focus-arrow-bg);
+    }
+
+    &::after,
+    &::before {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: var(--#{$prefix}m-pagination-arrow-font-size);
+    }
+  }
+
+  .m-arrow:is(.m-arrow-prev, .m-arrow-next):not(.disabled) .page-link {
+    color: var(--#{$prefix}m-pagination-arrow-color);
+  }
+
+  // Arrow prev
+  .m-arrow.m-arrow-prev .page-link::before {
+    min-width: var(--#{$prefix}m-pagination-arrow-font-size);
+    min-height: var(--#{$prefix}m-pagination-arrow-font-size);
+    margin-right: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}m-pagination-arrow-prev-icon-bg-image);
+    background-position: center left;
+  }
+
+  // Arrow next
+  .m-arrow.m-arrow-next .page-link::after {
+    width: var(--#{$prefix}m-pagination-arrow-font-size);
+    height: var(--#{$prefix}m-pagination-arrow-font-size);
+    margin-left: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}m-pagination-arrow-next-icon-bg-image);
+    background-position: center right;
+  }
+
+  // Hide default icon
+  .m-arrow:is(.m-arrow-next, .m-arrow-prev).no-label .page-link > span {
+    display: none;
+  }
+
+  .m-arrow-prev.disabled .page-link::before {
+    background-image: var(--#{$prefix}m-pagination-disabled-arrow-prev-icon-bg-image);
+  }
+
+  .m-arrow-next.disabled .page-link::after {
+    background-image: var(--#{$prefix}m-pagination-disabled-arrow-next-icon-bg-image);
+  }
+
+  .page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: var(--#{$prefix}m-pagination-page-border-radius);
+  }
+}