@knovator/pagecreator 0.0.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +16 -4
  2. package/index.d.ts +1 -4
  3. package/package.json +2 -5
  4. package/lib/components/common/Card/banner/banner.d.ts +0 -3
  5. package/lib/components/common/Card/simple-card/simple-card.d.ts +0 -3
  6. package/lib/components/common/collection-item/collection-item.d.ts +0 -3
  7. package/lib/components/page/page.d.ts +0 -3
  8. package/lib/components/widget/carousel-widget/carousel-widget.d.ts +0 -3
  9. package/lib/components/widget/fixed-widget/fixed-widget.d.ts +0 -3
  10. package/lib/components/widget/widget.d.ts +0 -3
  11. package/lib/icons/Next.d.ts +0 -2
  12. package/lib/icons/Previous.d.ts +0 -2
  13. package/lib/types/api.d.ts +0 -59
  14. package/lib/types/common.d.ts +0 -3
  15. package/lib/types/components.d.ts +0 -54
  16. package/lib/types/index.d.ts +0 -3
  17. package/lib/utils/helper.d.ts +0 -8
  18. package/style.css +0 -1
package/README.md CHANGED
@@ -122,10 +122,20 @@ import { Widget } from '@knovator/pagecreator';
122
122
  - [widgetData](data-formats.md#widgetdata)
123
123
  - `imageBaseUrl`
124
124
  - baseUrl to append before image urls
125
- - `formatItem` (optional): `(item: TileData) => JSX.Element`
125
+ - `formatItem` (optional): `(item: ItemData) => JSX.Element`
126
126
  - Customize look of Items
127
- - `onClick` (optional): `(item: TileData) => void;`
127
+ - `onClick` (optional): `(item: ItemData) => void;`
128
128
  - OnItem click handler
129
+ - `hideTitle` (optional): boolean;
130
+ - Do not show the title if true
131
+ - `settings` (optional): [react-slick Settings](https://react-slick.neostack.com/docs/api)
132
+ - Settings to apply for carousel widget
133
+ - `className` (optional): string
134
+ - Class name for widget
135
+ - `formatHeader` (optional): `(title: string, data: WidgetData) => string | JSX.Element`
136
+ - Function to format the widget header
137
+ - `formatFooter` (optional): `(data: WidgetData) => string | JSX.Element`
138
+ - Function to format the widget footer
129
139
 
130
140
  ### Page
131
141
  ```jsx
@@ -144,10 +154,12 @@ import { Page } from '@knovator/pagecreator';
144
154
  - baseUrl to start prefix image urls
145
155
  - `pageData`
146
156
  - [PageData](data-formats.md#pagedata)
147
- - `formatItem` (optional): `(CODE: string, item: TileData) => JSX.Element;`
157
+ - `formatItem` (optional): `(CODE: string, item: ItemData) => JSX.Element;`
148
158
  - Customize look of Items
149
- - `onClick` (optional): `(CODE: string, item: TileData) => JSX.Element;`
159
+ - `onClick` (optional): `(CODE: string, item: ItemData) => JSX.Element;`
150
160
  - On Item click handler
161
+ - `hideWidgetTitles` (optional): boolean
162
+ - Flag to hide widget titles
151
163
 
152
164
  ### getData
153
165
  It's possible to fetch data by yourself and pass them to `Widget` or `Page` components, but if you need easy solution you can use `getData` function.
package/index.d.ts CHANGED
@@ -1,4 +1 @@
1
- import Widget from './lib/components/widget/widget';
2
- import Page from './lib/components/page/page';
3
- import { getData } from './lib/utils/helper';
4
- export { Widget, Page, getData };
1
+ declare module '@knovator/api';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knovator/pagecreator",
3
- "version": "0.0.4",
3
+ "version": "0.2.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git@github.com:knovator/pagecreator.git"
@@ -22,8 +22,5 @@
22
22
  "style.css",
23
23
  "index.d.ts",
24
24
  "index.js"
25
- ],
26
- "main": "./index.cjs",
27
- "type": "commonjs",
28
- "types": "./index.d.ts"
25
+ ]
29
26
  }
package/lib/components/common/Card/banner/banner.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { CardProps } from '../../../../types';
2
- export declare function Banner({ imageAltText, imageUrl, onClick }: CardProps): JSX.Element;
3
- export default Banner;
package/lib/components/common/Card/simple-card/simple-card.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { SimpleCardProps } from '../../../../types';
2
- export declare function SimpleCard({ imageUrl, imageAltText, subTitle, label, title, onClick, }: SimpleCardProps): JSX.Element;
3
- export default SimpleCard;
package/lib/components/common/collection-item/collection-item.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { CollectionItemProps } from '../../../types';
2
- export declare function CollectionItem({ name, onClick }: CollectionItemProps): JSX.Element;
3
- export default CollectionItem;
package/lib/components/page/page.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { PageProps } from '../../types';
2
- export declare function Page({ title, imageBaseUrl, pageData, formatItem, onClick, }: PageProps): JSX.Element | null;
3
- export default Page;
package/lib/components/widget/carousel-widget/carousel-widget.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { WidgetTypeProps } from '../../../types';
2
- export declare function CarouselWidget({ widgetData, formatItem, settings, }: WidgetTypeProps): JSX.Element | null;
3
- export default CarouselWidget;
package/lib/components/widget/fixed-widget/fixed-widget.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { WidgetTypeProps } from '../../../types';
2
- export declare function FixedWidget({ widgetData, formatItem }: WidgetTypeProps): JSX.Element;
3
- export default FixedWidget;
package/lib/components/widget/widget.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { WidgetProps } from '../../types';
2
- export declare function Widget({ widgetData, imageBaseUrl, formatItem, onClick, settings, }: WidgetProps): JSX.Element | null;
3
- export default Widget;
package/lib/icons/Next.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const Next: () => JSX.Element;
2
- export default Next;
package/lib/icons/Previous.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const Previous: () => JSX.Element;
2
- export default Previous;
package/lib/types/api.d.ts DELETED
@@ -1,59 +0,0 @@
1
- import { ObjectType } from '.';
2
- export declare type API_INPUT_TYPE = {
3
- prefix: string;
4
- id?: string;
5
- };
6
- export interface BaseAPIProps {
7
- config?: ObjectType;
8
- baseUrl: string;
9
- token: string | (() => Promise<string>);
10
- data?: ObjectType;
11
- url: string;
12
- method: string;
13
- onError?: (error: Error) => void;
14
- }
15
- export declare type ACTION_TYPES = 'GET_WIDGET_DATA' | 'GET_PAGE_DATA';
16
- export declare type API_TYPE = {
17
- url: string;
18
- method: string;
19
- };
20
- export declare type Routes_Input = {
21
- [K in ACTION_TYPES]?: (data: API_INPUT_TYPE) => API_TYPE;
22
- };
23
- export interface PageData {
24
- _id: string;
25
- name: string;
26
- code: string;
27
- widgets: WidgetData[];
28
- }
29
- export interface WidgetData {
30
- _id: string;
31
- name: string;
32
- code: string;
33
- autoPlay: boolean;
34
- isActive: boolean;
35
- selectionTitle: string;
36
- webPerRow: number;
37
- mobilePerRow: number;
38
- tabletPerRow: number;
39
- widgetType: 'Image' | string;
40
- selectionType: 'FixedCard' | 'Carousel';
41
- tiles: TileData[];
42
- collectionItems: CollectionItemType[];
43
- }
44
- export interface TileData {
45
- _id: string;
46
- title: string;
47
- altText: string;
48
- link: string;
49
- tileType: 'Web' | 'Mobile';
50
- img: ImgData;
51
- }
52
- export interface ImgData {
53
- _id: string;
54
- uri: string;
55
- }
56
- export interface CollectionItemType {
57
- _id: string;
58
- name?: string;
59
- }
package/lib/types/common.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export declare type ObjectType = {
2
- [key: string]: string | boolean | number | null | undefined | ObjectType;
3
- };
package/lib/types/components.d.ts DELETED
@@ -1,54 +0,0 @@
1
- import { Settings } from 'react-slick';
2
- import { TileData, WidgetData, ObjectType, PageData, CollectionItemType } from './';
3
- interface SlideProps {
4
- onClick?: (data?: ObjectType) => void;
5
- }
6
- export interface BannerProps extends SlideProps {
7
- imageUrl: string;
8
- imageAltText: string;
9
- }
10
- export interface CardProps {
11
- imageUrl: string;
12
- imageAltText: string;
13
- onClick?: (data?: ObjectType) => void;
14
- }
15
- export interface ProductCardProps extends CardProps {
16
- title: string;
17
- subTitle?: string;
18
- label?: string;
19
- }
20
- export interface SimpleCardProps extends ProductCardProps {
21
- }
22
- export interface HighlightCardProps extends ProductCardProps {
23
- highlightedText: string;
24
- dimmedText: string;
25
- }
26
- export interface UserCardProps extends CardProps {
27
- name: string;
28
- }
29
- export interface ReviewCardProps extends UserCardProps {
30
- stars: number;
31
- review: string;
32
- }
33
- export interface WidgetProps {
34
- widgetData: WidgetData;
35
- imageBaseUrl: string;
36
- formatItem?: (item: TileData | CollectionItemType) => JSX.Element;
37
- onClick?: (item: TileData | CollectionItemType) => void;
38
- settings?: Settings;
39
- }
40
- export interface WidgetTypeProps extends WidgetProps {
41
- formatItem: (item: CollectionItemType | TileData) => JSX.Element;
42
- }
43
- export interface PageProps {
44
- title?: string;
45
- imageBaseUrl: string;
46
- pageData: PageData;
47
- formatItem?: (CODE: string, item: TileData | CollectionItemType) => JSX.Element;
48
- onClick?: (CODE: string, item: TileData | CollectionItemType) => JSX.Element;
49
- }
50
- export interface CollectionItemProps {
51
- name?: string;
52
- onClick?: () => void;
53
- }
54
- export {};
package/lib/types/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from './api';
2
- export * from './common';
3
- export * from './components';
package/lib/utils/helper.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { WidgetData, PageData } from '../types';
2
- interface GetDataParams {
3
- url: string;
4
- code: string;
5
- token?: string | (() => Promise<string>);
6
- }
7
- export declare function getData({ url, code, token, }: GetDataParams): Promise<WidgetData | PageData>;
8
- export {};
package/style.css DELETED
@@ -1 +0,0 @@
1
- @charset "UTF-8";.slick-slider{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;-khtml-user-select:none}.slick-list,.slick-slider{display:block;position:relative}.slick-list{margin:0;overflow:hidden;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{transform:translateZ(0)}.slick-track{display:block;left:0;margin-left:auto;margin-right:auto;position:relative;top:0}.slick-track:after,.slick-track:before{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{border:1px solid transparent;display:block;height:auto}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) 50% no-repeat}@font-face{font-family:slick;font-style:normal;font-weight:400;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format("embedded-opentype"),url(fonts/slick.woff) format("woff"),url(fonts/slick.ttf) format("truetype"),url(fonts/slick.svg#slick) format("svg")}.slick-next,.slick-prev{border:none;cursor:pointer;display:block;font-size:0;height:20px;line-height:0;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{background:transparent;color:transparent;outline:none}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;font-family:slick;font-size:20px;line-height:1;opacity:.75}.slick-prev{left:-25px}[dir=rtl] .slick-prev{left:auto;right:-25px}.slick-prev:before{content:"←"}[dir=rtl] .slick-prev:before{content:"→"}.slick-next{right:-25px}[dir=rtl] .slick-next{left:-25px;right:auto}.slick-next:before{content:"→"}[dir=rtl] .slick-next:before{content:"←"}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{bottom:-25px;display:block;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%}.slick-dots li{display:inline-block;margin:0 5px;padding:0;position:relative}.slick-dots li,.slick-dots li button{cursor:pointer;height:20px;width:20px}.slick-dots li button{background:transparent;border:0;color:transparent;display:block;font-size:0;line-height:0;outline:none;padding:5px}.slick-dots li button:focus,.slick-dots li button:hover{outline:none}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#000;content:"•";font-family:slick;font-size:6px;height:20px;left:0;line-height:20px;opacity:.25;position:absolute;text-align:center;top:0;width:20px}.slick-dots li.slick-active button:before{color:#000;opacity:.75}/*! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-none{grid-template-columns:none}.kpc_widget{margin-top:2.5rem}@media (min-width:1024px){.kpc_widget{margin-top:4rem}}.kpc_widget-title{font-size:1.5rem;font-weight:700;line-height:2rem;margin-bottom:.5rem}.kpc_simple-card{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity));border-radius:.5rem;border-width:1px;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;padding:.75rem}.kpc_simple-card-heading{flex-shrink:0}.kpc_simple-card-image{aspect-ratio:1/1;border-radius:.375rem;-o-object-fit:cover;object-fit:cover}.kpc_simple-card-body{display:contents;width:100%}.kpc_simple-card-label{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity));font-size:.75rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpc_simple-card-content{align-items:center;justify-content:space-between;width:100%}.kpc_simple-card-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;text-align:center}.kpc_simple-card-subtitle{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}.kpc_banner{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity));border-radius:.375rem;border-width:1px;padding:.25rem}.kpc_banner-image{aspect-ratio:1/1;height:100%;width:100%}.kpc_page-title{font-size:1.5rem;font-weight:700;line-height:2rem;margin-bottom:.5rem}.kpc_page-widgets>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.kpc_item{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity));border-radius:.375rem;border-width:2px;padding:.5rem}.kpc_item-text{font-size:1rem;font-weight:500;line-height:1.5rem;text-align:center}@media (min-width:640px){.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.sm\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.sm\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sm\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-none{grid-template-columns:none}}@media (min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-none{grid-template-columns:none}}@media (min-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-none{grid-template-columns:none}}@media (min-width:1280px){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xl\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xl\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xl\:grid-cols-none{grid-template-columns:none}}@media (min-width:1536px){.\32xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.\32xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.\32xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.\32xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.\32xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.\32xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.\32xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.\32xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.\32xl\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.\32xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.\32xl\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.\32xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.\32xl\:grid-cols-none{grid-template-columns:none}}