@aveonline/ui-react 1.19.5 → 1.19.6

package/README.md

@@ -1,126 +1,126 @@
-<div align="center">
-  <img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
-  <h1 align="center">ui ecosystem react</h1>
-  <p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
-  <a href="https://ui-aveonline.netlify.app/">Go Storybook</a>
-</div>
-
-## Before started
-
-For usage with tailwind config, install:
-
-```shell
-npm i @tailwindcss/forms -D
-```
-
-## Getting started
-
-Working with all config from this library or only components availables
-
-```shell
-npm i @aveonline/ui-react
-```
-
-## Usage with tailwind
-
-Import things into your JS app from the `@aveonline/ui-react` package.
-
-```ts
-import { Button } from '@aveonline/ui-react'
-```
-
-`tailwind.config.js`
-
-```ts
-/** @type {import('tailwindcss').Config} */
-
-const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
-const { content, ...all } = tailwindConfig
-
-const config = {
-  content: [
-    ...content,
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
-  ],
-  ...all
-}
-
-module.exports = config
-```
-
-## Usage css
-
-Import things into your JS app from the `@aveonline/ui-react` package.
-
-```css
-/* global.css or tailwind.css local */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-```ts
-// import this lines at main.ts or root
-import './global.css' // Reference tailwind local
-import '@aveonline/ui-react/reset.css' // Only not usage tailwind
-import '@aveonline/ui-react/tokens.css' // Required
-import '@aveonline/ui-react/tailwind.css' // Required
-import '@aveonline/ui-react/index.css' // Required
-```
-
-## Example usage
-
-```html
-<!-- Class from library -->
-<div class="bg-letter-default">
-  <p class="text-letter-subdued">Hello human</p>
-</div>
-```
-
-## Developing @aveonline/ui-react
-
-Developing locally against Storybook is easy; run `npm run storybook`.
-
-```shell
-npm i
-```
-
-Tests
-
-Run `npm run test` to execute all unit test components.
-
-We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
-
-Open Storybook
-
-```shell
-npm run dev
-```
-
-ui-react production
-
-```shell
-npm run build
-```
-
-Storybook production
-
-```shell
-npm run build:storybook
-```
-
-Run test
-
-```shell
-npm run test
-```
-
-Run regression testing
-
-- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
-
-```shell
-npm run chromatic
-```
+<div align="center">
+  <img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
+  <h1 align="center">ui ecosystem react</h1>
+  <p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
+  <a href="https://ui-aveonline.netlify.app/">Go Storybook</a>
+</div>
+
+## Before started
+
+For usage with tailwind config, install:
+
+```shell
+npm i @tailwindcss/forms -D
+```
+
+## Getting started
+
+Working with all config from this library or only components availables
+
+```shell
+npm i @aveonline/ui-react
+```
+
+## Usage with tailwind
+
+Import things into your JS app from the `@aveonline/ui-react` package.
+
+```ts
+import { Button } from '@aveonline/ui-react'
+```
+
+`tailwind.config.js`
+
+```ts
+/** @type {import('tailwindcss').Config} */
+
+const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
+const { content, ...all } = tailwindConfig
+
+const config = {
+  content: [
+    ...content,
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
+  ],
+  ...all
+}
+
+module.exports = config
+```
+
+## Usage css
+
+Import things into your JS app from the `@aveonline/ui-react` package.
+
+```css
+/* global.css or tailwind.css local */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```ts
+// import this lines at main.ts or root
+import './global.css' // Reference tailwind local
+import '@aveonline/ui-react/reset.css' // Only not usage tailwind
+import '@aveonline/ui-react/tokens.css' // Required
+import '@aveonline/ui-react/tailwind.css' // Required
+import '@aveonline/ui-react/index.css' // Required
+```
+
+## Example usage
+
+```html
+<!-- Class from library -->
+<div class="bg-letter-default">
+  <p class="text-letter-subdued">Hello human</p>
+</div>
+```
+
+## Developing @aveonline/ui-react
+
+Developing locally against Storybook is easy; run `npm run storybook`.
+
+```shell
+npm i
+```
+
+Tests
+
+Run `npm run test` to execute all unit test components.
+
+We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
+
+Open Storybook
+
+```shell
+npm run dev
+```
+
+ui-react production
+
+```shell
+npm run build
+```
+
+Storybook production
+
+```shell
+npm run build:storybook
+```
+
+Run test
+
+```shell
+npm run test
+```
+
+Run regression testing
+
+- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
+
+```shell
+npm run chromatic
+```

package/dist/components/molecules/CardHistory/CardHistory.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ICardHistory } from './ICardHistory';
-declare function CardHistory({ description, date, hour, badge, state, size, variant, dropdown, children }: ICardHistory): JSX.Element;
+declare function CardHistory({ description, date, dimension, hour, badge, state, size, variant, dropdown, children }: ICardHistory): JSX.Element;
 export default CardHistory;

package/dist/components/molecules/CardHistory/ICardHistory.d.ts

@@ -1,20 +1,22 @@
+/// <reference types="react" />
 import { IChildren } from '../../../types';
 import { IBadge } from '../..';
 interface IDropdownCardHistory extends IChildren {
     isActive?: boolean;
-    title?: string;
-    description?: string;
+    title?: JSX.Element | string;
+    description?: JSX.Element | string;
 }
 interface ICardHistory extends IChildren {
-    description?: string;
-    date?: string;
-    hour?: string;
+    description?: JSX.Element | string;
+    date?: JSX.Element | string;
+    hour?: JSX.Element | string;
     badge?: Omit<IBadge, 'children'> & {
-        title?: string;
+        title?: string | JSX.Element;
     };
     size?: 'sm' | 'md';
     state?: 'active' | 'default';
     variant?: 'default' | 'critical';
     dropdown?: IDropdownCardHistory;
+    dimension?: 'sm' | 'md' | 'lg' | 'xl';
 }
 export type { ICardHistory, IDropdownCardHistory };

package/dist/components/molecules/DateInputPicker/Atoms/PluginEspecialDates.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IPluginEspecialDates } from '../IDateInputPicker';
-declare function MyPlugin({ functionCumpustonPlugin, initialValue }: IPluginEspecialDates): JSX.Element;
+declare function MyPlugin({ functionCumpustonPlugin, initialValue, isMobile }: IPluginEspecialDates): JSX.Element;
 export default MyPlugin;

package/dist/components/molecules/DateInputPicker/IDateInputPicker.d.ts

@@ -37,6 +37,8 @@ interface ICustomRangeInput {
 interface IPluginEspecialDates {
     functionCumpustonPlugin: (value: string | null, setValuesInput: Array<string> | Array<DateObject> | null) => void;
     initialValue: string | null;
+    position?: string;
+    isMobile?: boolean;
 }
 interface IItemSpecialDates {
     name: string;

package/dist/components/molecules/Selectable/select.d.ts

@@ -0,0 +1,27 @@
+import { GroupBase } from 'react-select'
+import { IOptionSelectButton, ITooltipSelect } from '../..'
+
+declare module 'react-select/dist/declarations/src/Select' {
+  export interface Props<
+    Option,
+    IsMulti extends boolean,
+    Group extends GroupBase<Option>
+  > {
+    /**
+     * Our prop for control icon tooltip inside component atom Control
+     */
+    iconTooltip?: ITooltipSelect
+    /**
+     * Our prop for control click first element - SelectButton
+     */
+    addButton?: ((value: IOptionSelectButton) => void) | undefined
+    /**
+     * Our prop for verify inside atom SingleValue show ui
+     */
+    hasLabelPlaceholder?: boolean
+    /**
+     * Our prop for verify dropdown indicator - default true
+     */
+    isActiveDropdownIndicator?: boolean
+  }
+}

package/dist/components/molecules/Table/ITable.d.ts

@@ -22,7 +22,12 @@ interface IPropsTable<T> {
     classNameContainerTable?: string;
     classNameContainer?: string;
     emptyDataTable?: IEmptyState;
-    valueRow?: (value: any) => void;
+    valueRow?: (value: object) => void;
+    totalRows?: {
+        id: string;
+        text: string;
+    }[];
+    isLoading?: boolean;
 }
 declare type IEmptyState = {
     title: string;

package/dist/components/molecules/Table/Table.d.ts

@@ -6,5 +6,5 @@ import { IPropsTable } from './ITable';
  * part of data set, a data table lets merchants view details from the entire set. This helps merchants compare and
  * analyze the data.
  */
-declare function Table<T>({ searchFilter, defaultData, columns, placeholder, hasPagination, paginationOptionList, sortTable, sortItem, rowItemSelected, optionDropdown, stateEmpty, titleSortTable, classNameContainer, classNameContainerTable, classNameTable, emptyDataTable, valueRow }: IPropsTable<T>): JSX.Element;
+declare function Table<T>({ searchFilter, defaultData, columns, placeholder, hasPagination, paginationOptionList, sortTable, sortItem, rowItemSelected, optionDropdown, stateEmpty, titleSortTable, classNameContainer, classNameContainerTable, classNameTable, emptyDataTable, valueRow, totalRows, isLoading }: IPropsTable<T>): JSX.Element;
 export default Table;

package/dist/components/molecules/Table/atoms/IPagination.d.ts

@@ -1,12 +1,16 @@
-declare type IPagination = {
+import { RowData, Table } from '@tanstack/react-table';
+import { Dispatch, SetStateAction } from 'react';
+interface IPagination<T extends RowData> {
     pageIndex: number;
     getPageCount: number;
     pageSize: number;
     setPageSize: (value: number) => void;
-    previousPage: () => void;
     getCanPreviousPage: boolean;
-    nextPage: () => void;
     getCanNextPage: boolean;
     paginationOptionList?: Array<number>;
-};
+    table: Table<T>;
+    actualPage: number;
+    setActualPage: Dispatch<SetStateAction<number>>;
+    isMobile: boolean;
+}
 export type { IPagination };

package/dist/components/molecules/Table/atoms/Pagination.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { RowData } from '@tanstack/react-table';
 import type { IPagination } from './IPagination';
-declare function Pagination({ pageIndex, getPageCount, pageSize, setPageSize, previousPage, getCanPreviousPage, nextPage, getCanNextPage, paginationOptionList }: IPagination): JSX.Element;
+declare function Pagination<T extends RowData>({ pageIndex, getPageCount, pageSize, setPageSize, getCanPreviousPage, getCanNextPage, paginationOptionList, table, actualPage, setActualPage, isMobile }: IPagination<T>): JSX.Element;
 export default Pagination;

package/dist/index.css

@@ -1 +1 @@
-[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:disabled{background-image:url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%20fill%3D%22white%22%20fill-opacity%3D%220.01%22%2F%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_1575_10817)%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.72%206.23998C14.8872%206.4057%2014.9862%206.62814%2014.9973%206.8633C15.0084%207.09847%2014.9309%207.32924%2014.78%207.50998L9.41%2013.71C9.33315%2013.797%209.23949%2013.8675%209.13466%2013.9174C9.02982%2013.9672%208.91598%2013.9953%208.8%2014C8.68415%2014.0029%208.56899%2013.9813%208.46213%2013.9364C8.35526%2013.8916%208.2591%2013.8247%208.18%2013.74L5.25%2010.64C5.10033%2010.4603%205.01837%2010.2338%205.01837%209.99998C5.01837%209.76613%205.10033%209.53967%205.25%209.35998C5.32761%209.27734%205.42134%209.21148%205.52539%209.16646C5.62945%209.12143%205.74162%209.09821%205.855%209.09821C5.96837%209.09821%206.08055%209.12143%206.1846%209.16646C6.28865%209.21148%206.38238%209.27734%206.46%209.35998L8.75%2011.79L13.52%206.28998C13.5932%206.20432%2013.6834%206.13468%2013.7847%206.0854C13.8861%206.03613%2013.9965%206.00827%2014.1091%206.00358C14.2217%205.99889%2014.3341%206.01746%2014.4392%206.05813C14.5443%206.09881%2014.6399%206.16071%2014.72%206.23998V6.23998Z%22%20fill%3D%22%23D6D6D6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_1575_10817%22%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%20transform%3D%22translate(5%205)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A%0A")}.ui__spinner{animation:ui__spinner_rotation 1.5s linear infinite}@keyframes ui__spinner_rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.table--tbody tr:first-child>td{border-color:transparent!important}.table--tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.table--tbody tr:last-child td:last-child{border-radius:0 0 10px}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar{background-color:#fff!important;height:8px!important;width:5px!important}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar-thumb{background:gray!important}.rmdp-day{color:#4a4f54!important}.rmdp-day.rmdp-range.start{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-range{background-color:#ddeaf7!important;border:transparent!important;box-shadow:none!important;color:#4a4f54!important}.rmdp-day.rmdp-range.end{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-week-day{color:#797c81!important}.rmdp-day.rmdp-selected span:not(.highlight){border-radius:4px!important}.rmdp-day.rmdp-today span{background-color:var(--colors-action-primary-pressed)!important}
+[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:disabled{background-image:url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%224%22%20fill%3D%22white%22%20fill-opacity%3D%220.01%22%2F%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_1575_10817)%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.72%206.23998C14.8872%206.4057%2014.9862%206.62814%2014.9973%206.8633C15.0084%207.09847%2014.9309%207.32924%2014.78%207.50998L9.41%2013.71C9.33315%2013.797%209.23949%2013.8675%209.13466%2013.9174C9.02982%2013.9672%208.91598%2013.9953%208.8%2014C8.68415%2014.0029%208.56899%2013.9813%208.46213%2013.9364C8.35526%2013.8916%208.2591%2013.8247%208.18%2013.74L5.25%2010.64C5.10033%2010.4603%205.01837%2010.2338%205.01837%209.99998C5.01837%209.76613%205.10033%209.53967%205.25%209.35998C5.32761%209.27734%205.42134%209.21148%205.52539%209.16646C5.62945%209.12143%205.74162%209.09821%205.855%209.09821C5.96837%209.09821%206.08055%209.12143%206.1846%209.16646C6.28865%209.21148%206.38238%209.27734%206.46%209.35998L8.75%2011.79L13.52%206.28998C13.5932%206.20432%2013.6834%206.13468%2013.7847%206.0854C13.8861%206.03613%2013.9965%206.00827%2014.1091%206.00358C14.2217%205.99889%2014.3341%206.01746%2014.4392%206.05813C14.5443%206.09881%2014.6399%206.16071%2014.72%206.23998V6.23998Z%22%20fill%3D%22%23D6D6D6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_1575_10817%22%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22%20transform%3D%22translate(5%205)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A%0A")}.ui__spinner{animation:ui__spinner_rotation 1.5s linear infinite}@keyframes ui__spinner_rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.table--tbody tr:first-child>td{border-color:transparent!important}.table--tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.table--tbody tr:last-child td:last-child{border-radius:0 0 10px}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar{background-color:#fff!important;height:8px!important;width:5px!important}.scrollStyle-scrollbar-customized-scrollbar::-webkit-scrollbar-thumb{background:gray!important}.rmdp-day{color:#4a4f54!important}.rmdp-day.rmdp-range.start{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-range{background-color:#ddeaf7!important;border:transparent!important;box-shadow:none!important;color:#4a4f54!important}.rmdp-day.rmdp-range.end{background:#007aff!important;border:transparent!important;color:#fff!important}.rmdp-week-day{color:#797c81!important}.rmdp-day.rmdp-selected span:not(.highlight){border-radius:4px!important}.rmdp-day.rmdp-today span{background-color:var(--colors-action-primary-pressed)!important}@media (max-width:768px){.rmdp-day-picker{flex-direction:column}}.rmdp-calendar-container-mobile{background-color:#0009;bottom:0;left:0;right:0;top:0}.rmdp-calendar-container-mobile .rmdp-mobile.rmdp-wrapper{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.rmdp-mobile.rmdp-wrapper{border:1px solid #cfd8e2;box-shadow:unset}.rmdp-mobile .rmdp-header,.rmdp-mobile .rmdp-panel-header{font-size:16px;height:30px;padding-bottom:15px}.rmdp-mobile .rmdp-arrow-container{height:26px;width:26px}.rmdp-mobile .rmdp-arrow{height:3px;margin-top:6px;padding:3px;width:3px}.rmdp-mobile .rmdp-up i{margin-top:10px}.rmdp-mobile .rmdp-left i{margin-left:4px;margin-top:7px}.rmdp-mobile .rmdp-right i{margin-left:-2px;margin-top:7px}.rmdp-rtl.rmdp-mobile .rmdp-right i{margin-left:5px}.rmdp-rtl.rmdp-mobile .rmdp-left i{margin-left:-1px}.rmdp-mobile .rmdp-day,.rmdp-mobile .rmdp-week-day{height:38px;width:38px}.rmdp-mobile .rmdp-day span{font-size:15px}.rmdp-mobile .dvdr{margin:0 10px}.rmdp-mobile .ok{bottom:0;position:absolute}.rmdp-mobile .rmdp-week-day{margin-bottom:3px;margin-top:10px}.rmdp-mobile .only.rmdp-month-picker,.rmdp-mobile .only.rmdp-year-picker{margin:15px 0}.rmdp-mobile .rmdp-action-button{font-size:13px;margin:15px 3px 0}.rmdp-mobile .rmdp-action-buttons{align-items:center;display:flex;justify-content:flex-end;padding:0 10px}.rmdp-mobile .rmdp-rtl .rmdp-action-button{float:left;margin-left:10px;margin-right:unset}.rmdp-mobile .rmdp-action-button:focus{outline:none}.rmdp-mobile .rmdp-header{margin-left:10px;margin-right:10px;margin-top:15px}.rmdp-mobile .rmdp-panel-header{margin-top:20px}.rmdp-mobile .rmdp-day-picker{margin-left:5px;margin-right:5px}.rmdp-mobile .rmdp-action-button{margin-bottom:15px}@media (max-width:420px){.rmdp-mobile .rmdp-day,.rmdp-mobile .rmdp-week-day{height:32px;width:32px}.rmdp-mobile .only.rmdp-month-picker,.rmdp-mobile .only.rmdp-year-picker{width:250px}.rmdp-mobile .rmdp-header,.rmdp-mobile .rmdp-panel-header{height:20px}.rmdp-mobile .rmdp-day span{font-size:14px}.rmdp-mobile .rmdp-day-picker{padding:10px 5px}.rmdp-mobile.rmdp-single .rmdp-day-picker{padding:10px}.rmdp-mobile .rmdp-arrow-container{height:20px;margin:0 12px;width:20px}.rmdp-mobile .rmdp-arrow{height:3px;margin-top:6px;padding:2px;width:3px}.rmdp-mobile .rmdp-action-button{font-size:13px;padding:5px}.rmdp-mobile .rmdp-action-button:first-child{padding-right:10px}.rmdp-mobile .rmdp-panel-header{padding-bottom:20px}.rmdp-mobile .rmdp-left i,.rmdp-mobile .rmdp-right i{margin-top:6px}.rmdp-mobile .rmdp-up i{margin-top:8px}.rmdp-mobile .rmdp-down i{margin-top:4px}.rmdp-mobile .rmdp-header{margin-left:5px;margin-right:5px;margin-top:10px}.rmdp-mobile .rmdp-panel-header{margin-top:15px}.rmdp-mobile .rmdp-header,.rmdp-mobile .rmdp-panel-header{font-size:14px}.rmdp-mobile .rmdp-day-picker{margin-left:5px;margin-right:5px}.rmdp-mobile .rmdp-action-button{font-size:12px;margin-bottom:10px}}@media (max-height:450px){.rmdp-mobile .rmdp-header,.rmdp-mobile .rmdp-panel-header{font-size:12px;height:9px;line-height:15px}.rmdp-mobile .rmdp-day,.rmdp-mobile .rmdp-week-day{height:22px;width:22px}.rmdp-mobile .rmdp-time-picker{min-width:130px!important;padding:0}.rmdp-mobile .rmdp-time-picker div input{font-size:12px;padding:2px}.rmdp-mobile .rmdp-day span{font-size:12px}.rmdp-mobile .rmdp-month-picker .rmdp-day span,.rmdp-mobile .rmdp-week-day{font-size:10px}.rmdp-mobile .rmdp-day-picker{padding:0 7px}.rmdp-mobile .rmdp-panel-body{margin:5px 0;padding:0}.rmdp-mobile .rmdp-panel-body li{font-size:11px;margin:5px}.rmdp-mobile .rmdp-action-button{font-size:9px;margin:10px 5px;padding:0 5px}.rmdp-mobile .rmdp-action-button:first-child{margin-right:10px}.rmdp-mobile .rmdp-arrow-container{height:16px;margin:0 3px;width:16px}.rmdp-mobile .rmdp-arrow{height:2px;margin-top:3px;padding:2px;width:2px}.rmdp-mobile .only.rmdp-month-picker,.rmdp-mobile .only.rmdp-year-picker{height:160px}.rmdp-mobile .dvdr,.rmdp-mobile .rmdp-time-picker div input{margin:0}.rmdp-mobile .rmdp-week-day{margin-top:0}.rmdp-mobile .rmdp-left i{margin-left:4px;margin-top:4px}.rmdp-mobile .rmdp-right i{margin-left:0;margin-top:4px}.rmdp-mobile .rmdp-up i{margin-top:5px}.rmdp-mobile .rmdp-header{margin-left:5px;margin-right:5px;margin-top:10px}.rmdp-mobile .rmdp-panel-header{margin-top:13px}.rmdp-mobile .rmdp-day-picker{margin-left:0;margin-right:0}.rmdp-mobile .rmdp-action-button{margin-bottom:10px}}