@workday/canvas-kit-react 6.0.0-alpha.0-next.22 → 6.0.0-alpha.0-next.28

package/dist/es6/common/lib/theming/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/breakpoints.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,CAAC,MAAM;IACP,CAAC,MAAM;IACP,CAAC,MAAM;IACP,EAAE,OAAO;CACV;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAE3E,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,cAAc,wCAAyC,CAAC;AAErE,eAAO,MAAM,WAAW,EAAE,iBAMzB,CAAC;AAIF,wBAAgB,EAAE,CAAC,GAAG,EAAE,iBAAiB,UAGxC;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,iBAAiB,UAW1C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,UAWvE;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,iBAAiB,UAE1C"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/breakpoints.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,CAAC,MAAM;IACP,CAAC,MAAM;IACP,CAAC,MAAM;IACP,EAAE,OAAO;CACV;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAE3E,oBAAY,iBAAiB,GAAG;IAC9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;;;;;;;OAmBG;IACH,CAAC,EAAE,GAAG,CAAC;IACP;;;;;;;;;;;;;;;;;;;OAmBG;IACH,CAAC,EAAE,GAAG,CAAC;IACP;;;;;;;;;;;;;;;;;;;OAmBG;IACH,CAAC,EAAE,IAAI,CAAC;IACR;;;;;;;;;;;;;;;;;;;OAmBG;IACH,EAAE,EAAE,IAAI,CAAC;CACV,CAAC;AAEF,eAAO,MAAM,cAAc,wCAAyC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,iBAMzB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,EAAE,CAAC,GAAG,EAAE,iBAAiB,UAGxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,iBAAiB,UAU7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,UAWvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,IAAI,CAAC,GAAG,EAAE,iBAAiB,UAE1C"}

package/dist/es6/common/lib/theming/breakpoints.js

@@ -7,36 +7,218 @@ export var BreakpointKey;
     BreakpointKey["xl"] = "xl";
 })(BreakpointKey || (BreakpointKey = {}));
 export var breakpointKeys = ['zero', 's', 'm', 'l', 'xl'];
+/**
+ * ### Theme Breakpoint Values
+ *
+ * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
+ * This allows the UI to be responsive to various screen sizes. This object provides five breakpoint values
+ * that correspond to the min-widths of our standard screen sizes.
+ *
+ * - `zero`: 0
+ * - `s`: 320
+ * - `m`: 768
+ * - `l`: 1024
+ * - `xl`: 1440
+ *
+ * And these are our standard screen size ranges:
+ *
+ * - `small` (320px - 767px) Used for mobile-sized screens
+ * - `medium` (768px - 1023px) Used for tablet-sized screens
+ * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
+ * - `extra-large` (≥1440px) Used for very large screens
+ *
+ * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
+ *
+ */
 export var breakpoints = {
     zero: 0,
-    s: 600,
-    m: 960,
-    l: 1280,
-    xl: 1920,
+    s: 320,
+    m: 768,
+    l: 1024,
+    xl: 1440,
 };
 var step = 0.5;
+/**
+ * ### Up
+ *
+ * _Returns a media query above the `min-width` for the range of a given breakpoint_
+ *
+ * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `min-width`.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { up } = theme.canvas.breakpoints;
+ * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ */
 export function up(key) {
     var value = typeof breakpoints[key] === 'number' ? breakpoints[key] : key;
-    return "@media (min-width:" + value + "px)";
+    return "@media (min-width: " + value + "px)";
 }
-export function down(key) {
-    var endIndex = breakpointKeys.indexOf(key) + 1;
+/**
+ * ### Down
+ *
+ * _Returns a media query below the `max-width` for the range of a given breakpoint_
+ *
+ * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `max-width`.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { down } = theme.canvas.breakpoints;
+ * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { down } = theme.canvas.breakpoints;
+ * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ */
+export function down(endKey) {
+    var endIndex = breakpointKeys.indexOf(endKey) + 1;
     var upperbound = breakpoints[breakpointKeys[endIndex]];
     if (endIndex === breakpointKeys.length) {
         // xl down applies to all sizes
         return up(BreakpointKey.zero);
     }
     var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
-    return "@media (max-width:" + (value - step) + "px)";
+    return "@media (max-width: " + (value - step) + "px)";
 }
+/**
+ * ### Between
+ *
+ * _Returns a media query between two given breakpoints_
+ *
+ * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a min-width and max-width.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { between } = theme.canvas.breakpoints;
+ * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
+ * const mediaQuery = between('s', 'm');
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { between } = theme.canvas.breakpoints;
+ * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ */
 export function between(start, end) {
     var endIndex = breakpointKeys.indexOf(end) + 1;
     if (endIndex === breakpointKeys.length) {
         return up(start);
     }
-    return ("@media (min-width:" + breakpoints[start] + "px) and " +
-        ("(max-width:" + (breakpoints[breakpointKeys[endIndex]] - step) + "px)"));
+    return ("@media (min-width: " + breakpoints[start] + "px) and " +
+        ("(max-width: " + (breakpoints[breakpointKeys[endIndex]] - step) + "px)"));
 }
+/**
+ * ### Only
+ *
+ * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
+ *
+ * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `min-width` and `max-width`.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { only } = theme.canvas.breakpoints;
+ * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { only } = theme.canvas.breakpoints;
+ * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ */
 export function only(key) {
     return between(key, key);
 }

package/dist/es6/common/lib/theming/types.d.ts

@@ -32,12 +32,202 @@ export interface CanvasTheme {
         success: CanvasThemePalette;
         neutral: CanvasThemePalette;
     };
+    /**
+     * ### Theme Breakpoints
+     *
+     * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
+     * This allows the UI to be responsive to various screen sizes.
+     *
+     * This breakpoints object contains `values` and several helper functions: `up`, `down`, `between`, and `only`.
+     * You can find more detailed information by inspecting individual values and functions.
+     */
     breakpoints: {
+        /**
+         * ### Breakpoint Values
+         *
+         * This object provides five breakpoint values
+         * that correspond to the min-widths of our standard screen sizes.
+         *
+         * - `zero`: 0
+         * - `s`: 320
+         * - `m`: 768
+         * - `l`: 1024
+         * - `xl`: 1440
+         *
+         * And these are our standard screen size ranges:
+         *
+         * - `small` (320px - 767px) Used for mobile-sized screens
+         * - `medium` (768px - 1023px) Used for tablet-sized screens
+         * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
+         * - `extra-large` (≥1440px) Used for very large screens
+         *
+         * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
+         *
+         */
         values: CanvasBreakpoints;
+        /**
+         * ### Up
+         *
+         * _Returns a media query above the `min-width` for the range of a given breakpoint_
+         *
+         * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `min-width`.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { up } = theme.canvas.breakpoints;
+         * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         */
         up: (key: BreakpointFnParam) => string;
+        /**
+         * ### Down
+         *
+         * _Returns a media query below the `max-width` for the range of a given breakpoint_
+         *
+         * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `max-width`.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { down } = theme.canvas.breakpoints;
+         * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { down } = theme.canvas.breakpoints;
+         * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.m,
+         *   }
+         * };
+         * ```
+         */
         down: (key: BreakpointFnParam) => string;
-        only: (key: BreakpointFnParam) => string;
+        /**
+         * ### Between
+         *
+         * _Returns a media query between two given breakpoints_
+         *
+         * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a min-width and max-width.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { between } = theme.canvas.breakpoints;
+         * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
+         * const mediaQuery = between('s', 'm');
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { between } = theme.canvas.breakpoints;
+         * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         */
         between: (start: BreakpointFnParam, end: BreakpointFnParam) => string;
+        /**
+         * ### Only
+         *
+         * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
+         *
+         * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
+         * this function returns a media query (string) using a `min-width` and `max-width`.
+         *
+         * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+         * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+         *
+         * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
+         * as seen in the second example below.
+         *
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { only } = theme.canvas.breakpoints;
+         * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         *
+         * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
+         * @example
+         * ```ts
+         * import { useTheme } from '@workday/canvas-kit-react/common';
+         * import { space } from '@workday/canvas-kit-react/tokens';
+         *
+         * const theme = useTheme();
+         * const { only } = theme.canvas.breakpoints;
+         * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
+         * const styles = {
+         *   [mediaQuery]: {
+         *     padding: space.s,
+         *   }
+         * };
+         * ```
+         */
+        only: (key: BreakpointFnParam) => string;
     };
     direction: ContentDirection;
 }

package/dist/es6/common/lib/theming/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,MAAM,EAAE,iBAAiB,CAAC;QAC1B,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KACvE,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}

package/dist/es6/pagination/lib/Pagination/PageList.d.ts

@@ -8,5 +8,5 @@ export interface PageListProps extends Omit<ListProps, 'as'> {
 }
 export declare const PageList: ({ model, children, ...elemProps }: PageListProps) => JSX.Element;
 export declare type PageListItemProps = ListItemProps;
-export declare const PageListItem: ({ children, ...elemProps }: Pick<import("./common/Flex").FlexProps, "hidden" | "color" | "style" | "flex" | "wrap" | "padding" | "p" | "title" | "children" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "margin" | "overflow" | "m" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "grow" | "marginX" | "marginY" | "paddingX" | "paddingY" | "basis" | "mx" | "my" | "marginT" | "mt" | "marginR" | "mr" | "marginB" | "mb" | "marginL" | "ml" | "px" | "py" | "paddingT" | "pt" | "paddingR" | "pr" | "paddingB" | "pb" | "paddingL" | "pl" | "shrink">) => JSX.Element;
+export declare const PageListItem: ({ children, ...elemProps }: Pick<import("./common/Flex").FlexProps, "hidden" | "color" | "style" | "flex" | "wrap" | "padding" | "p" | "title" | "children" | "alignContent" | "alignItems" | "alignSelf" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "verticalAlign" | "width" | "margin" | "overflow" | "m" | "css" | "dir" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "grow" | "marginX" | "marginY" | "paddingX" | "paddingY" | "basis" | "mx" | "my" | "marginT" | "mt" | "marginR" | "mr" | "marginB" | "mb" | "marginL" | "ml" | "px" | "py" | "paddingT" | "pt" | "paddingR" | "pr" | "paddingB" | "pb" | "paddingL" | "pl" | "shrink">) => JSX.Element;
 //# sourceMappingURL=PageList.d.ts.map