@jumpgroup/jump-design-system 0.1.2 → 0.1.4

package/dist/cjs/jump-pagination.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c572276a.js');
+
+const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
+
+const JumpPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.totalElements = undefined;
+    this.currentPage = undefined;
+    this.lastPage = undefined;
+    this.labelElementsPerPage = 'Elementi per pagina';
+    this.elementsRanges = [10, 20, 60, 100];
+    this.firstPage = undefined;
+    this.completeVersion = false;
+    this.showAdditionalChrevrons = false;
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, { class: "JumpPagination" }, index.h("div", { class: "JumpPagination__Wrapper" }, this.completeVersion &&
+      index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { class: "indicators" }, index.h("div", { class: "elements" }, this.completeVersion ?
+      index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " di ", index.h("span", null, this.totalElements))
+      :
+        index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-left" }), index.h("jump-icon", { name: "chevron-left" }), index.h("jump-icon", { name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { name: "chevrons-right" }))))));
+  }
+};
+JumpPagination.style = jumpPaginationCss;
+
+exports.jump_pagination = JumpPagination;
+
+//# sourceMappingURL=jump-pagination.cjs.entry.js.map

package/dist/cjs/jump-pagination.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B;;MCOj2B,cAAc;;;;;;gCAe+B,qBAAqB;0BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;2BAUtB,KAAK;mCAEG,KAAK;;EAEjE,MAAM;;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IAC1BD,iBAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;MACpBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mBAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChFA,oBAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7BA,oBAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAERA,iBAAK,KAAK,EAAC,YAAY,IACrBA,iBAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;MACnBA,sBACEA,sBAAO,IAAI,CAAC,SAAS,CAAQ,SAAGA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;QAGPA,sBACEA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACNA,iBAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,IAAI,EAAC,eAAe,GAAa,EAC7EA,uBAAW,IAAI,EAAC,cAAc,GAAa,EAC3CA,uBAAW,IAAI,EAAC,eAAe,GAAa,EAC3C,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,IAAI,EAAC,gBAAgB,GAAa,CAC1E,CACF,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPagination {\n  --pagination-label-color: var(--neutral-grey-secondary);\n  --pagination-arrows-color: var(--neutral-grey-secondary);\n  \n  font-family: var(--ff-primary);\n\n  &__Wrapper {\n    display: flex;\n    justify-content: space-between;\n\n    .elementsPerPage {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n\n        label {\n            color: var(--pagination-label-color);\n            font-size: 14px;\n            font-weight: normal;\n          }\n    } \n    \n    .indicators {\n      font-size: 16px;\n      font-weight: normal;\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      \n      color: var(--pagination-label-color);\n\n      .arrow {\n        color: var(--pagination-arrows-color);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .elements {\n        color: var(--pagination-label-color);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n    }\n   \n  }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  @Prop({ reflect: true }) totalElements: number;\n\n  /**\n   * \n   */\n  @Prop({ reflect: true }) currentPage: number;\n  @Prop({ reflect: true }) lastPage: number; \n\n  /**\n   * Label for the elements per page select\n   */\n  @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n  /**\n   * Values for the elements per page select\n   */\n  @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n  /**\n   * Indicates the first page/product of the list\n   */\n  @Prop({ reflect: true }) firstPage: number;\n\n  /**\n   * If true, the component will show the complete version of the pagination, with elements informations\n   */\n  @Prop({ reflect: true }) completeVersion: boolean = false;\n\n  @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          { this.completeVersion && \n            <div class=\"elementsPerPage\">\n              <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n                  <select name=\"elements\" id=\"elements\">\n                    {this.elementsRanges.map((range) => (\n                      <option value={range}>{range}</option>\n                    ))}\n                  </select>\n            </div> \n          }\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              {this.completeVersion ?\n                <span>\n                  <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n                </span>\n                \n              :\n                <span>\n                  <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n                </span>\n              }\n            </div>\n            <div class=\"arrow\">\n              {this.showAdditionalChrevrons && <jump-icon name=\"chevrons-left\"></jump-icon>}\n              <jump-icon name=\"chevron-left\"></jump-icon>\n              <jump-icon name=\"chevron-right\"></jump-icon>\n              {this.showAdditionalChrevrons && <jump-icon name=\"chevrons-right\"></jump-icon>}\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-168ed626.js');
+const index = require('./index-c572276a.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return index.bootstrapLazy([["app-button.cjs",[[4,"app-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"]}]]],["app-icon.cjs",[[0,"app-icon",{"name":[1],"class":[1]}]]]], options);
+  return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,7 +1,8 @@
 {
   "entries": [
-    "components/app-button/app-button.js",
-    "components/app-icon/app-icon.js"
+    "components/app-icon/jump-icon.js",
+    "components/jump-button/jump-button.js",
+    "components/jump-pagination/jump-pagination.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/app-icon/{app-icon.css → jump-icon.css}

@@ -1,7 +1,7 @@
-app-icon {
+jump-icon {
   display: inline-flex;
 }
-app-icon svg {
+jump-icon svg {
   width: 1em;
   height: 1em;
 }

package/dist/collection/components/app-icon/{app-icon.js → jump-icon.js}

@@ -11,15 +11,15 @@ export class AppIcon {
   render() {
     return (h(Host, null, h("i", { "data-feather": this.name, class: this.class })));
   }
-  static get is() { return "app-icon"; }
+  static get is() { return "jump-icon"; }
   static get originalStyleUrls() {
     return {
-      "$": ["app-icon.scss"]
+      "$": ["jump-icon.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["app-icon.css"]
+      "$": ["jump-icon.css"]
     };
   }
   static get properties() {
@@ -61,4 +61,4 @@ export class AppIcon {
     };
   }
 }
-//# sourceMappingURL=app-icon.js.map
+//# sourceMappingURL=jump-icon.js.map

package/dist/collection/components/app-icon/jump-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.js","sourceRoot":"","sources":["../../../src/components/app-icon/jump-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,eAAe,CAAC;AAOpC,MAAM,OAAO,OAAO;;;;;EAYlB,gBAAgB;IACd,OAAO,CAAC,OAAO,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,yBAAiB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAM,CAC9C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport feather from 'feather-icons';\n\n@Component({\n  tag: 'jump-icon',\n  styleUrl: 'jump-icon.scss',\n  shadow: false,\n})\nexport class AppIcon {\n  /**\n   * Name of the icon\n   **/\n  @Prop() name: string;\n\n  /**\n   * Additional classes\n   **/\n  @Prop() class: string;\n\n\n  componentDidLoad() {\n    feather.replace();\n  }\n\n  render() {\n    return (\n      <Host>\n        <i data-feather={this.name} class={this.class}></i>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/app-icon/{app-icon.stories.js → jump-icon.stories.js}

@@ -16,10 +16,10 @@ export default {
     }
   }
 };
-const Template = (args) => `<app-icon class="${args.class}" name="${args.name}"></app-icon>`;
+const Template = (args) => `<jump-icon class="${args.class}" name="${args.name}"></jump-icon>`;
 export const Icon = Template.bind({});
 Icon.args = {
   name: Object.keys(feather.icons)[0],
   class: '',
 };
-//# sourceMappingURL=app-icon.stories.js.map
+//# sourceMappingURL=jump-icon.stories.js.map

package/dist/collection/components/app-icon/jump-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.stories.js","sourceRoot":"","sources":["../../../src/components/app-icon/jump-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,YAAY;MAClB,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;MACnC,WAAW,EAAE,kDAAkD;KAChE;IACD,KAAK,EAAE;MACL,IAAI,EAAE,mBAAmB;MACzB,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,4DAA4D;KAC1E;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,IAAI,gBAAgB,CAAC;AAE/F,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;EACV,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;EACnC,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n  title: 'Components/Atoms/Icon',\n  tags: ['autodocs'],\n  argTypes: {\n    name: {\n      name: 'Nome Icona',\n      control: 'select',\n      options: Object.keys(feather.icons),\n      description: 'Seleziona il nome dell\\'icona dal menu a tendina'\n    },\n    class: {\n      name: 'Classi aggiuntive',\n      control: 'text',\n      description: 'Aggiungi classi aggiuntive all\\'icona (separate da spazio)'\n    }\n  }\n};\n\nconst Template = (args) => `<jump-icon class=\"${args.class}\" name=\"${args.name}\"></jump-icon>`;\n\nexport const Icon = Template.bind({});\nIcon.args = {\n  name: Object.keys(feather.icons)[0],\n  class: '',\n};"]}

package/dist/collection/components/app-icon/test/jump-icon.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('jump-icon', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<jump-icon></jump-icon>');
+    const element = await page.find('jump-icon');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+//# sourceMappingURL=jump-icon.e2e.js.map

package/dist/collection/components/app-icon/test/jump-icon.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.e2e.js","sourceRoot":"","sources":["../../../../src/components/app-icon/test/jump-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-icon', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<jump-icon></jump-icon>');\n\n    const element = await page.find('jump-icon');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/app-icon/test/{app-icon.spec.js → jump-icon.spec.js}

@@ -1,18 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { AppIcon } from "../app-icon";
-describe('app-icon', () => {
+import { AppIcon } from "../jump-icon";
+describe('jump-icon', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [AppIcon],
-      html: `<app-icon></app-icon>`,
+      html: `<jump-icon></jump-icon>`,
     });
     expect(page.root).toEqualHtml(`
-      <app-icon>
+      <jump-icon>
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
-      </app-icon>
+      </jump-icon>
     `);
   });
 });
-//# sourceMappingURL=app-icon.spec.js.map
+//# sourceMappingURL=jump-icon.spec.js.map

package/dist/collection/components/app-icon/test/jump-icon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.spec.js","sourceRoot":"","sources":["../../../../src/components/app-icon/test/jump-icon.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,yBAAyB;KAChC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { AppIcon } from '../jump-icon';\n\ndescribe('jump-icon', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [AppIcon],\n      html: `<jump-icon></jump-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-icon>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-icon>\n    `);\n  });\n});\n"]}

package/dist/collection/components/jump-button/jump-button.css

@@ -0,0 +1,107 @@
+jump-button button {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+jump-button {
+  display: inline-flex;
+  align-items: center;
+  --jump-button-color: #ffffff;
+  --jump-button-color-disabled: #cbcbcb;
+  --jump-button-background: blue;
+  --jump-button-background-outline: transparent;
+  --jump-button-color-hover: #ffffff;
+  --jump-button-background-hover: darkblue;
+  --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);
+  --jump-button-padding: 1rem 1.25rem;
+}
+jump-button button {
+  background-color: var(--jump-button-background);
+  border-radius: var(--jump-button-border-radius);
+  color: var(--jump-button-color);
+  position: relative;
+  font-family: var(--ff-primary, "Arial"), sans-serif;
+  font-weight: var(--fw-400, 400);
+  font-size: var(--fs-400, 1rem);
+  line-height: var(--lh-400, 1.3);
+  display: flex;
+  align-items: center;
+  gap: var(--jump-button-gap, 0.5rem);
+  padding: var(--jump-button-padding);
+}
+jump-button button:hover {
+  background-color: var(--jump-button-background-hover);
+  color: var(--jump-button-color-hover);
+}
+jump-button button[data-variant=primary] {
+  --jump-button-color: var(--neutral-white);
+  --jump-button-background: var(--primary-standard);
+  --jump-button-color-hover: var(--neutral-white);
+  --jump-button-background-hover: var(--primary-hard);
+}
+jump-button button[data-variant=secondary] {
+  --jump-button-color: var(--neutral-white);
+  --jump-button-background: var(--secondary-standard);
+  --jump-button-color-hover: var(--neutral-white);
+  --jump-button-background-hover: var(--secondary-hard);
+}
+jump-button button[disabled] {
+  --jump-button-background: var(--jump-button-color-disabled);
+  --jump-button-background-hover: var(--jump-button-color-disabled);
+  cursor: not-allowed;
+}
+jump-button button[data-pill] {
+  border-radius: 100rem;
+}
+jump-button button[data-size=small] {
+  font-size: var(--fs-300, 0.875rem);
+  line-height: var(--lh-300, 1.2);
+  --jump-button-padding: 0.5rem 1rem;
+}
+jump-button button[data-size=medium] {
+  font-size: var(--fs-400, 1rem);
+  line-height: var(--lh-400, 1.3);
+}
+jump-button button[data-size=large] {
+  font-size: var(--fs-500, 1.125rem);
+  line-height: var(--lh-500, 1.4);
+  --jump-button-padding: 1.125rem 1.5rem;
+}
+jump-button button[data-outline] {
+  background-color: var(--jump-button-background-outline);
+  border: 1px solid var(--jump-button-background);
+  color: var(--jump-button-background);
+}
+jump-button button[data-outline]:hover {
+  background-color: var(--jump-button-background-hover);
+  border: 1px solid var(--jump-button-background-hover);
+  color: var(--jump-button-background-hover);
+}
+jump-button button[data-text] {
+  background-color: transparent;
+  border: none;
+  color: var(--jump-button-background);
+  padding: 0;
+}
+jump-button button[data-text]:hover {
+  background-color: transparent;
+  border: none;
+  color: var(--jump-button-background-hover);
+}
+jump-button button[data-only-icon] {
+  --jump-button-padding: 1.125rem;
+}
+jump-button button[data-only-icon][data-size=small] {
+  --jump-button-padding: 0.5rem;
+}
+jump-button button[data-only-icon][data-size=medium] {
+  --jump-button-padding: 1rem;
+}
+jump-button button[data-only-icon][data-size=large] {
+  --jump-button-padding: 1.125rem;
+}

package/dist/collection/components/{app-button/app-button.js → jump-button/jump-button.js}

@@ -12,15 +12,15 @@ export class AppButton {
   render() {
     return (h(Host, null, h("button", { "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))));
   }
-  static get is() { return "app-button"; }
+  static get is() { return "jump-button"; }
   static get originalStyleUrls() {
     return {
-      "$": ["app-button.scss"]
+      "$": ["jump-button.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["app-button.css"]
+      "$": ["jump-button.css"]
     };
   }
   static get properties() {
@@ -154,4 +154,4 @@ export class AppButton {
     };
   }
 }
-//# sourceMappingURL=app-button.js.map
+//# sourceMappingURL=jump-button.js.map

package/dist/collection/components/jump-button/jump-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;oBAIQ,KAAK;mBAKkC,SAAS;mBAKlC,KAAK;gBAKT,QAAQ;gBAKP,KAAK;gBAKL,KAAK;oBAKD,KAAK;;EAEhD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,8BAAsB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACtL,YAAM,IAAI,EAAC,QAAQ,GAAQ;QAEzB,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;QAEjC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-button',\n  styleUrl: 'jump-button.scss',\n  shadow: false,\n})\nexport class AppButton {\n  /**\n   * Set the button as disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates the variant of the button\n   */\n  @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop({reflect: true}) outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop({reflect: true}) size: string = 'medium';\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop({reflect: true}) pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop({reflect: true}) text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop({reflect: true}) onlyIcon: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <button data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} >\n          <slot name=\"prefix\"></slot>\n          {\n            !this.onlyIcon && <slot></slot>\n          }\n          <slot name=\"suffix\"></slot>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/{app-button/app-button.stories.js → jump-button/jump-button.stories.js}

@@ -99,11 +99,11 @@ export default {
 };
 // regular expression to remove all the spaces indenting the template string
 const Template = (args) => `${!args.label && !args.showIcon ? 'Errore nella configurazione del bottone' :
-  `<app-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>
-  ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
+  `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>
+  ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
   ${!args.iconOnly ? args.label : ''}
-  ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
-  </app-button>`.replace(/\s\s+/g, '')}`;
+  ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
+  </jump-button>`.replace(/\s\s+/g, '')}`;
 export const Primary = Template.bind({});
 Primary.args = {
   label: 'Primary',
@@ -188,11 +188,11 @@ Text.args = {
   iconName: Object.keys(feather.icons)[0],
   iconPosition: 'left'
 };
-// const TemplateWithIcon = (args) => `<app-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>
-//   ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
+// const TemplateWithIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>
+//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
 //   ${args.label}
-//   ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
-// </app-button>`;
+//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
+// </jump-button>`;
 // export const WithIcon = TemplateWithIcon.bind({});
 // WithIcon.args = {
 //   label: 'Primary',
@@ -206,11 +206,11 @@ Text.args = {
 //   iconName: 'home',
 //   iconPosition: 'left'
 // };
-// const TemplateWithOnlyIcon = (args) => `<app-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${ !args.label ? ' only-icon' : ''}>
-//   ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
+// const TemplateWithOnlyIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${ !args.label ? ' only-icon' : ''}>
+//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
 //   ${args.label}
-//   ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
-// </app-button>`;
+//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
+// </jump-button>`;
 // export const WithOnlyIcon = TemplateWithOnlyIcon.bind({});
 // WithOnlyIcon.args = {
 //   label: '',
@@ -224,4 +224,4 @@ Text.args = {
 //   iconName: 'home',
 //   iconPosition: 'left',
 // };
-//# sourceMappingURL=app-button.stories.js.map
+//# sourceMappingURL=jump-button.stories.js.map

package/dist/collection/components/jump-button/jump-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n  title: 'Components/Atoms/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      name: 'Etichetta',\n      description: 'Imposta il testo del bottone',\n      control: 'text'\n    },\n    variant: {\n      name: 'Variante',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary'\n      ],\n    },\n    outline : {\n      name: 'Outline',\n      description: 'Imposta se il bottone deve avere il solo bordo',\n      control: 'boolean'\n    },\n    size: {\n      name: 'Dimensione',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large'\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande'\n      }\n    },\n    pill: {\n      name: 'Bordo a Pillola',\n      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n      control: 'boolean'\n    },\n    disabled: {\n      name: 'Disabilitato',\n      description: 'Imposta se il bottone deve essere disabilitato',\n      control: 'boolean'\n    },\n    text: {\n      name: 'Testo',\n      description: 'Imposta se il bottone essere solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    showIcon: {\n      name: 'Mostra Icona',\n      description: 'Imposta se il bottone deve mostrare un\\'icona',\n      control: 'boolean'\n    },\n    iconOnly: {\n      name: 'Mostra solo Icona',\n      description: 'Imposta se il bottone deve mostrare solo l\\'icona',\n      control: 'boolean',\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n    },\n    iconName: {\n      name: 'Nome Icona',\n      control: 'select',\n      options: Object.keys(feather.icons),\n      description: 'Seleziona il nome dell\\'icona dal menu a tendina',\n      defaultValue: Object.keys(feather.icons)[0],\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n    },\n    iconPosition: {\n      name: 'Posizione Icona',\n      description: 'Imposta la posizione dell\\'icona',\n      defaultValue: 'left',\n      control: 'select',\n      options: [\n        'left',\n        'right'\n      ],\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n      labels: {\n        left: 'Sinistra',\n        right: 'Destra'\n      }\n    }\n\n  }\n};\n\n// regular expression to remove all the spaces indenting the template string\n\nconst Template = (args) => `${ !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : \n  `<jump-button variant=\"${args.variant}\" size=\"${args.size}\"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${ !args.label || args.iconOnly ? ' only-icon' : ''}>\n  ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot=\"prefix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n  ${ !args.iconOnly ? args.label : ''}\n  ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot=\"suffix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n  </jump-button>`.replace(/\\s\\s+/g, '')\n}`;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  label: 'Primary',\n  variant: 'primary',\n  outline: false,\n  pill: false,\n  size: 'medium',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\nexport const OutlinePrimary = Template.bind({});\nOutlinePrimary.args = {\n  label: 'Outline Primary',\n  variant: 'primary',\n  outline: true,\n  pill: false,\n  size: 'medium',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\nexport const PillPrimary = Template.bind({});\nPillPrimary.args = {\n  label: 'Pill Primary',\n  variant: 'primary',\n  outline: false,\n  pill: true,\n  size: 'medium',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\nexport const OutlinePillPrimary = Template.bind({});\nOutlinePillPrimary.args = {\n  label: 'Pill Primary',\n  variant: 'primary',\n  outline: true,\n  pill: true,\n  size: 'medium',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Disabled',\n  variant: 'primary',\n  outline: false,\n  pill: false,\n  size: 'medium',\n  disabled: true,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\nexport const Text = Template.bind({});\nText.args = {\n  label: 'Text',\n  variant: 'secondary',\n  outline: false,\n  pill: false,\n  size: 'medium',\n  disabled: false,\n  text: true,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left'\n};\n\n// const TemplateWithIcon = (args) => `<jump-button variant=\"${args.variant}\" size=\"${args.size}\"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>\n//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot=\"prefix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n//   ${args.label}\n//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot=\"suffix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n// </jump-button>`;\n// export const WithIcon = TemplateWithIcon.bind({});\n// WithIcon.args = {\n//   label: 'Primary',\n//   variant: 'primary',\n//   outline: false,\n//   pill: false,\n//   size: 'medium',\n//   disabled: false,\n//   text: false,\n//   showIcon: true,\n//   iconName: 'home',\n//   iconPosition: 'left'\n// };\n\n// const TemplateWithOnlyIcon = (args) => `<jump-button variant=\"${args.variant}\" size=\"${args.size}\"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${ !args.label ? ' only-icon' : ''}>\n//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot=\"prefix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n//   ${args.label}\n//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot=\"suffix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n// </jump-button>`;\n// export const WithOnlyIcon = TemplateWithOnlyIcon.bind({});\n// WithOnlyIcon.args = {\n//   label: '',\n//   variant: 'primary',\n//   outline: false,\n//   pill: true,\n//   size: 'medium',\n//   disabled: false,\n//   text: false,\n//   showIcon: true,\n//   iconName: 'home',\n//   iconPosition: 'left',\n// };\n"]}

package/dist/collection/components/jump-button/test/jump-button.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('jump-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<jump-button></jump-button>');
+    const element = await page.find('jump-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+//# sourceMappingURL=jump-button.e2e.js.map

package/dist/collection/components/jump-button/test/jump-button.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-button/test/jump-button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;IAErD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-button', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<jump-button></jump-button>');\n\n    const element = await page.find('jump-button');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/{app-button/test/app-button.spec.js → jump-button/test/jump-button.spec.js}

@@ -1,18 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { AppButton } from "../app-button";
-describe('app-button', () => {
+import { AppButton } from "../jump-button";
+describe('jump-button', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [AppButton],
-      html: `<app-button></app-button>`,
+      html: `<jump-button></jump-button>`,
     });
     expect(page.root).toEqualHtml(`
-      <app-button>
+      <jump-button>
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
-      </app-button>
+      </jump-button>
     `);
   });
 });
-//# sourceMappingURL=app-button.spec.js.map
+//# sourceMappingURL=jump-button.spec.js.map

package/dist/collection/components/jump-button/test/jump-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-button/test/jump-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { AppButton } from '../jump-button';\n\ndescribe('jump-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [AppButton],\n      html: `<jump-button></jump-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-button>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-button>\n    `);\n  });\n});\n"]}

package/dist/collection/components/jump-pagination/jump-pagination.css

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.JumpPagination {
+  --pagination-label-color: var(--neutral-grey-secondary);
+  --pagination-arrows-color: var(--neutral-grey-secondary);
+  font-family: var(--ff-primary);
+}
+.JumpPagination__Wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.JumpPagination__Wrapper .elementsPerPage {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.JumpPagination__Wrapper .elementsPerPage label {
+  color: var(--pagination-label-color);
+  font-size: 14px;
+  font-weight: normal;
+}
+.JumpPagination__Wrapper .indicators {
+  font-size: 16px;
+  font-weight: normal;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--pagination-label-color);
+}
+.JumpPagination__Wrapper .indicators .arrow {
+  color: var(--pagination-arrows-color);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.JumpPagination__Wrapper .indicators .elements {
+  color: var(--pagination-label-color);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}