@sps-woodland/content-tiles 7.0.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 (13) hide show
  1. package/README.md +3 -0
  2. package/lib/ContentTile.examples.d.ts +2 -0
  3. package/lib/content-tile/ContentTile.css.d.ts +57 -0
  4. package/lib/content-tile/ContentTile.d.ts +14 -0
  5. package/lib/content-tile-list/ContentTileList.css.d.ts +2 -0
  6. package/lib/content-tile-list/ContentTileList.d.ts +2 -0
  7. package/lib/index.cjs.js +211 -0
  8. package/lib/index.d.ts +3 -0
  9. package/lib/index.es.js +501 -0
  10. package/lib/manifest.d.ts +2 -0
  11. package/lib/style.css +1 -0
  12. package/package.json +40 -0
  13. package/vite.config.js +21 -0
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ ## [@sps-woodland/content-tiles](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-tiles#readme)
2
+
3
+ SPS Woodland Design System content tile and content tile list components
package/lib/ContentTile.examples.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ComponentManifestEntry } from "@sps-woodland/core";
2
+ export declare const ContentTileExamples: ComponentManifestEntry;
package/lib/content-tile/ContentTile.css.d.ts ADDED
@@ -0,0 +1,57 @@
1
+ export declare const contentTileContainer: string;
2
+ export declare const contentTileImage: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
3
+ disabled: {
4
+ true: {
5
+ opacity: string;
6
+ };
7
+ };
8
+ }>;
9
+ export declare const contentTileImageContainer: string;
10
+ export declare const contentTile: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
11
+ error: {
12
+ true: {
13
+ borderColor: string;
14
+ ":hover": {
15
+ borderColor: string;
16
+ cursor: string;
17
+ };
18
+ };
19
+ };
20
+ warning: {
21
+ true: {
22
+ borderColor: string;
23
+ };
24
+ };
25
+ disabled: {
26
+ true: {
27
+ borderColor: string;
28
+ backgroundColor: string;
29
+ color: string;
30
+ ":hover": {
31
+ borderColor: string;
32
+ cursor: string;
33
+ };
34
+ };
35
+ };
36
+ }>;
37
+ export declare const contentTileStatusIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
38
+ error: {
39
+ true: {
40
+ color: string;
41
+ };
42
+ };
43
+ warning: {
44
+ true: {
45
+ color: string;
46
+ };
47
+ };
48
+ disabled: {
49
+ true: {
50
+ color: string;
51
+ };
52
+ };
53
+ }>;
54
+ export declare const contentTileStatusIconContainer: string;
55
+ export declare const contentTileTitleContainer: string;
56
+ export declare const contentTileTitleText: string;
57
+ export declare const contentTileTitleIcon: string;
package/lib/content-tile/ContentTile.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { ComponentProps } from "@sps-woodland/core";
2
+ import * as React from "react";
3
+ export declare function ContentTile({ className, href, icon, error, errorIcon, title, warning, warningIcon, disabled, target, onClick, ...rest }: ComponentProps<{
4
+ href?: string;
5
+ icon: React.ReactNode | (() => React.ReactNode);
6
+ error?: boolean;
7
+ errorIcon?: React.ReactNode | (() => React.ReactNode);
8
+ title: string;
9
+ warning?: boolean;
10
+ warningIcon?: React.ReactNode | (() => React.ReactNode);
11
+ disabled?: boolean;
12
+ target?: string;
13
+ onClick?: () => void;
14
+ }, HTMLDivElement>): React.ReactElement;
package/lib/content-tile-list/ContentTileList.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const contentTileList: string;
2
+ export declare const contentTileListLink: string;
package/lib/content-tile-list/ContentTileList.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ComponentProps } from "@sps-woodland/core";
2
+ export declare function ContentTileList({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): JSX.Element;
package/lib/index.cjs.js ADDED
@@ -0,0 +1,211 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@sps-woodland/core"),I=require("react"),m=require("@spscommerce/utils");function H(d){if(d&&d.__esModule)return d;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const e=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(t,r,e.get?e:{enumerable:!0,get:()=>d[r]})}}return t.default=d,Object.freeze(t)}const v=H(I);var M={1:"_1dw0im31",2:"_1dw0im32",3:"_1dw0im33",4:"_1dw0im34",5:"_1dw0im35",6:"_1dw0im36",7:"_1dw0im37",8:"_1dw0im38",9:"_1dw0im39",10:"_1dw0im3a",11:"_1dw0im3b",12:"_1dw0im3c",root:"_1dw0im30"};function B(d,t,r){return t in d?Object.defineProperty(d,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):d[t]=r,d}function L(d,t){var r=Object.keys(d);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(d);t&&(e=e.filter(function(o){return Object.getOwnPropertyDescriptor(d,o).enumerable})),r.push.apply(r,e)}return r}function C(d){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?L(Object(r),!0).forEach(function(e){B(d,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(d,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach(function(e){Object.defineProperty(d,e,Object.getOwnPropertyDescriptor(r,e))})}return d}var G=d=>function(){for(var t=arguments.length,r=new Array(t),e=0;e<t;e++)r[e]=arguments[e];var o=Object.assign({},...r.map(a=>a.styles)),u=Object.keys(o),l=u.filter(a=>"mappings"in o[a]),i=a=>{var n=[],_={},c=C({},a),w=!1;for(var k of l){var j=a[k];if(j!=null){var P=o[k];w=!0;for(var g of P.mappings)_[g]=j,c[g]==null&&delete c[g]}}var x=w?C(C({},_),c):a;for(var T in x){var f=x[T],h=o[T];try{if(h.mappings)continue;if(typeof f=="string"||typeof f=="number")n.push(h.values[f].defaultClass);else if(Array.isArray(f))for(var S in f){var O=f[S];if(O!=null){var D=h.responsiveArray[S];n.push(h.values[O].conditions[D])}}else for(var N in f){var q=f[N];q!=null&&n.push(h.values[q].conditions[N])}}catch(A){throw A}}return d(n.join(" "))};return Object.assign(i,{properties:new Set(u)})},K=d=>d,F=function(){return G(K)(...arguments)};F({conditions:{defaultCondition:"default",conditionNames:["default","hover","focus"],responsiveArray:void 0},styles:{margin:{mappings:["marginTop","marginBottom","marginLeft","marginRight"]},marginX:{mappings:["marginLeft","marginRight"]},marginY:{mappings:["marginTop","marginBottom"]},padding:{mappings:["paddingTop","paddingBottom","paddingLeft","paddingRight"]},paddingX:{mappings:["paddingLeft","paddingRight"]},paddingY:{mappings:["paddingTop","paddingBottom"]},type:{mappings:["fontSize","lineHeight"]},backgroundColor:{values:{"red-light":{conditions:{default:"_1vd41r10",hover:"_1vd41r11",focus:"_1vd41r12"},defaultClass:"_1vd41r10"},"red-medium":{conditions:{default:"_1vd41r13",hover:"_1vd41r14",focus:"_1vd41r15"},defaultClass:"_1vd41r13"},"red-dark":{conditions:{default:"_1vd41r16",hover:"_1vd41r17",focus:"_1vd41r18"},defaultClass:"_1vd41r16"},"blue-extra-light":{conditions:{default:"_1vd41r19",hover:"_1vd41r1a",focus:"_1vd41r1b"},defaultClass:"_1vd41r19"},"blue-light":{conditions:{default:"_1vd41r1c",hover:"_1vd41r1d",focus:"_1vd41r1e"},defaultClass:"_1vd41r1c"},"blue-medium":{conditions:{default:"_1vd41r1f",hover:"_1vd41r1g",focus:"_1vd41r1h"},defaultClass:"_1vd41r1f"},"blue-dark":{conditions:{default:"_1vd41r1i",hover:"_1vd41r1j",focus:"_1vd41r1k"},defaultClass:"_1vd41r1i"},"green-light":{conditions:{default:"_1vd41r1l",hover:"_1vd41r1m",focus:"_1vd41r1n"},defaultClass:"_1vd41r1l"},"green-medium":{conditions:{default:"_1vd41r1o",hover:"_1vd41r1p",focus:"_1vd41r1q"},defaultClass:"_1vd41r1o"},"green-dark":{conditions:{default:"_1vd41r1r",hover:"_1vd41r1s",focus:"_1vd41r1t"},defaultClass:"_1vd41r1r"},"purple-light":{conditions:{default:"_1vd41r1u",hover:"_1vd41r1v",focus:"_1vd41r1w"},defaultClass:"_1vd41r1u"},"purple-medium-light":{conditions:{default:"_1vd41r1x",hover:"_1vd41r1y",focus:"_1vd41r1z"},defaultClass:"_1vd41r1x"},"purple-medium":{conditions:{default:"_1vd41r110",hover:"_1vd41r111",focus:"_1vd41r112"},defaultClass:"_1vd41r110"},"purple-dark":{conditions:{default:"_1vd41r113",hover:"_1vd41r114",focus:"_1vd41r115"},defaultClass:"_1vd41r113"},"orange-light":{conditions:{default:"_1vd41r116",hover:"_1vd41r117",focus:"_1vd41r118"},defaultClass:"_1vd41r116"},"orange-medium":{conditions:{default:"_1vd41r119",hover:"_1vd41r11a",focus:"_1vd41r11b"},defaultClass:"_1vd41r119"},"orange-dark":{conditions:{default:"_1vd41r11c",hover:"_1vd41r11d",focus:"_1vd41r11e"},defaultClass:"_1vd41r11c"},"grey-extra-light":{conditions:{default:"_1vd41r11f",hover:"_1vd41r11g",focus:"_1vd41r11h"},defaultClass:"_1vd41r11f"},"grey-light":{conditions:{default:"_1vd41r11i",hover:"_1vd41r11j",focus:"_1vd41r11k"},defaultClass:"_1vd41r11i"},"grey-medium-light":{conditions:{default:"_1vd41r11l",hover:"_1vd41r11m",focus:"_1vd41r11n"},defaultClass:"_1vd41r11l"},"grey-medium":{conditions:{default:"_1vd41r11o",hover:"_1vd41r11p",focus:"_1vd41r11q"},defaultClass:"_1vd41r11o"},"grey-medium-dark":{conditions:{default:"_1vd41r11r",hover:"_1vd41r11s",focus:"_1vd41r11t"},defaultClass:"_1vd41r11r"},"grey-dark":{conditions:{default:"_1vd41r11u",hover:"_1vd41r11v",focus:"_1vd41r11w"},defaultClass:"_1vd41r11u"},"yellow-light":{conditions:{default:"_1vd41r11x",hover:"_1vd41r11y",focus:"_1vd41r11z"},defaultClass:"_1vd41r11x"},"yellow-medium":{conditions:{default:"_1vd41r120",hover:"_1vd41r121",focus:"_1vd41r122"},defaultClass:"_1vd41r120"},white:{conditions:{default:"_1vd41r123",hover:"_1vd41r124",focus:"_1vd41r125"},defaultClass:"_1vd41r123"},black:{conditions:{default:"_1vd41r126",hover:"_1vd41r127",focus:"_1vd41r128"},defaultClass:"_1vd41r126"}}},borderColor:{values:{"red-light":{conditions:{default:"_1vd41r129",hover:"_1vd41r12a",focus:"_1vd41r12b"},defaultClass:"_1vd41r129"},"red-medium":{conditions:{default:"_1vd41r12c",hover:"_1vd41r12d",focus:"_1vd41r12e"},defaultClass:"_1vd41r12c"},"red-dark":{conditions:{default:"_1vd41r12f",hover:"_1vd41r12g",focus:"_1vd41r12h"},defaultClass:"_1vd41r12f"},"blue-extra-light":{conditions:{default:"_1vd41r12i",hover:"_1vd41r12j",focus:"_1vd41r12k"},defaultClass:"_1vd41r12i"},"blue-light":{conditions:{default:"_1vd41r12l",hover:"_1vd41r12m",focus:"_1vd41r12n"},defaultClass:"_1vd41r12l"},"blue-medium":{conditions:{default:"_1vd41r12o",hover:"_1vd41r12p",focus:"_1vd41r12q"},defaultClass:"_1vd41r12o"},"blue-dark":{conditions:{default:"_1vd41r12r",hover:"_1vd41r12s",focus:"_1vd41r12t"},defaultClass:"_1vd41r12r"},"green-light":{conditions:{default:"_1vd41r12u",hover:"_1vd41r12v",focus:"_1vd41r12w"},defaultClass:"_1vd41r12u"},"green-medium":{conditions:{default:"_1vd41r12x",hover:"_1vd41r12y",focus:"_1vd41r12z"},defaultClass:"_1vd41r12x"},"green-dark":{conditions:{default:"_1vd41r130",hover:"_1vd41r131",focus:"_1vd41r132"},defaultClass:"_1vd41r130"},"purple-light":{conditions:{default:"_1vd41r133",hover:"_1vd41r134",focus:"_1vd41r135"},defaultClass:"_1vd41r133"},"purple-medium-light":{conditions:{default:"_1vd41r136",hover:"_1vd41r137",focus:"_1vd41r138"},defaultClass:"_1vd41r136"},"purple-medium":{conditions:{default:"_1vd41r139",hover:"_1vd41r13a",focus:"_1vd41r13b"},defaultClass:"_1vd41r139"},"purple-dark":{conditions:{default:"_1vd41r13c",hover:"_1vd41r13d",focus:"_1vd41r13e"},defaultClass:"_1vd41r13c"},"orange-light":{conditions:{default:"_1vd41r13f",hover:"_1vd41r13g",focus:"_1vd41r13h"},defaultClass:"_1vd41r13f"},"orange-medium":{conditions:{default:"_1vd41r13i",hover:"_1vd41r13j",focus:"_1vd41r13k"},defaultClass:"_1vd41r13i"},"orange-dark":{conditions:{default:"_1vd41r13l",hover:"_1vd41r13m",focus:"_1vd41r13n"},defaultClass:"_1vd41r13l"},"grey-extra-light":{conditions:{default:"_1vd41r13o",hover:"_1vd41r13p",focus:"_1vd41r13q"},defaultClass:"_1vd41r13o"},"grey-light":{conditions:{default:"_1vd41r13r",hover:"_1vd41r13s",focus:"_1vd41r13t"},defaultClass:"_1vd41r13r"},"grey-medium-light":{conditions:{default:"_1vd41r13u",hover:"_1vd41r13v",focus:"_1vd41r13w"},defaultClass:"_1vd41r13u"},"grey-medium":{conditions:{default:"_1vd41r13x",hover:"_1vd41r13y",focus:"_1vd41r13z"},defaultClass:"_1vd41r13x"},"grey-medium-dark":{conditions:{default:"_1vd41r140",hover:"_1vd41r141",focus:"_1vd41r142"},defaultClass:"_1vd41r140"},"grey-dark":{conditions:{default:"_1vd41r143",hover:"_1vd41r144",focus:"_1vd41r145"},defaultClass:"_1vd41r143"},"yellow-light":{conditions:{default:"_1vd41r146",hover:"_1vd41r147",focus:"_1vd41r148"},defaultClass:"_1vd41r146"},"yellow-medium":{conditions:{default:"_1vd41r149",hover:"_1vd41r14a",focus:"_1vd41r14b"},defaultClass:"_1vd41r149"},white:{conditions:{default:"_1vd41r14c",hover:"_1vd41r14d",focus:"_1vd41r14e"},defaultClass:"_1vd41r14c"},black:{conditions:{default:"_1vd41r14f",hover:"_1vd41r14g",focus:"_1vd41r14h"},defaultClass:"_1vd41r14f"}}},borderBottomColor:{values:{"red-light":{conditions:{default:"_1vd41r14i",hover:"_1vd41r14j",focus:"_1vd41r14k"},defaultClass:"_1vd41r14i"},"red-medium":{conditions:{default:"_1vd41r14l",hover:"_1vd41r14m",focus:"_1vd41r14n"},defaultClass:"_1vd41r14l"},"red-dark":{conditions:{default:"_1vd41r14o",hover:"_1vd41r14p",focus:"_1vd41r14q"},defaultClass:"_1vd41r14o"},"blue-extra-light":{conditions:{default:"_1vd41r14r",hover:"_1vd41r14s",focus:"_1vd41r14t"},defaultClass:"_1vd41r14r"},"blue-light":{conditions:{default:"_1vd41r14u",hover:"_1vd41r14v",focus:"_1vd41r14w"},defaultClass:"_1vd41r14u"},"blue-medium":{conditions:{default:"_1vd41r14x",hover:"_1vd41r14y",focus:"_1vd41r14z"},defaultClass:"_1vd41r14x"},"blue-dark":{conditions:{default:"_1vd41r150",hover:"_1vd41r151",focus:"_1vd41r152"},defaultClass:"_1vd41r150"},"green-light":{conditions:{default:"_1vd41r153",hover:"_1vd41r154",focus:"_1vd41r155"},defaultClass:"_1vd41r153"},"green-medium":{conditions:{default:"_1vd41r156",hover:"_1vd41r157",focus:"_1vd41r158"},defaultClass:"_1vd41r156"},"green-dark":{conditions:{default:"_1vd41r159",hover:"_1vd41r15a",focus:"_1vd41r15b"},defaultClass:"_1vd41r159"},"purple-light":{conditions:{default:"_1vd41r15c",hover:"_1vd41r15d",focus:"_1vd41r15e"},defaultClass:"_1vd41r15c"},"purple-medium-light":{conditions:{default:"_1vd41r15f",hover:"_1vd41r15g",focus:"_1vd41r15h"},defaultClass:"_1vd41r15f"},"purple-medium":{conditions:{default:"_1vd41r15i",hover:"_1vd41r15j",focus:"_1vd41r15k"},defaultClass:"_1vd41r15i"},"purple-dark":{conditions:{default:"_1vd41r15l",hover:"_1vd41r15m",focus:"_1vd41r15n"},defaultClass:"_1vd41r15l"},"orange-light":{conditions:{default:"_1vd41r15o",hover:"_1vd41r15p",focus:"_1vd41r15q"},defaultClass:"_1vd41r15o"},"orange-medium":{conditions:{default:"_1vd41r15r",hover:"_1vd41r15s",focus:"_1vd41r15t"},defaultClass:"_1vd41r15r"},"orange-dark":{conditions:{default:"_1vd41r15u",hover:"_1vd41r15v",focus:"_1vd41r15w"},defaultClass:"_1vd41r15u"},"grey-extra-light":{conditions:{default:"_1vd41r15x",hover:"_1vd41r15y",focus:"_1vd41r15z"},defaultClass:"_1vd41r15x"},"grey-light":{conditions:{default:"_1vd41r160",hover:"_1vd41r161",focus:"_1vd41r162"},defaultClass:"_1vd41r160"},"grey-medium-light":{conditions:{default:"_1vd41r163",hover:"_1vd41r164",focus:"_1vd41r165"},defaultClass:"_1vd41r163"},"grey-medium":{conditions:{default:"_1vd41r166",hover:"_1vd41r167",focus:"_1vd41r168"},defaultClass:"_1vd41r166"},"grey-medium-dark":{conditions:{default:"_1vd41r169",hover:"_1vd41r16a",focus:"_1vd41r16b"},defaultClass:"_1vd41r169"},"grey-dark":{conditions:{default:"_1vd41r16c",hover:"_1vd41r16d",focus:"_1vd41r16e"},defaultClass:"_1vd41r16c"},"yellow-light":{conditions:{default:"_1vd41r16f",hover:"_1vd41r16g",focus:"_1vd41r16h"},defaultClass:"_1vd41r16f"},"yellow-medium":{conditions:{default:"_1vd41r16i",hover:"_1vd41r16j",focus:"_1vd41r16k"},defaultClass:"_1vd41r16i"},white:{conditions:{default:"_1vd41r16l",hover:"_1vd41r16m",focus:"_1vd41r16n"},defaultClass:"_1vd41r16l"},black:{conditions:{default:"_1vd41r16o",hover:"_1vd41r16p",focus:"_1vd41r16q"},defaultClass:"_1vd41r16o"}}},borderLeftColor:{values:{"red-light":{conditions:{default:"_1vd41r16r",hover:"_1vd41r16s",focus:"_1vd41r16t"},defaultClass:"_1vd41r16r"},"red-medium":{conditions:{default:"_1vd41r16u",hover:"_1vd41r16v",focus:"_1vd41r16w"},defaultClass:"_1vd41r16u"},"red-dark":{conditions:{default:"_1vd41r16x",hover:"_1vd41r16y",focus:"_1vd41r16z"},defaultClass:"_1vd41r16x"},"blue-extra-light":{conditions:{default:"_1vd41r170",hover:"_1vd41r171",focus:"_1vd41r172"},defaultClass:"_1vd41r170"},"blue-light":{conditions:{default:"_1vd41r173",hover:"_1vd41r174",focus:"_1vd41r175"},defaultClass:"_1vd41r173"},"blue-medium":{conditions:{default:"_1vd41r176",hover:"_1vd41r177",focus:"_1vd41r178"},defaultClass:"_1vd41r176"},"blue-dark":{conditions:{default:"_1vd41r179",hover:"_1vd41r17a",focus:"_1vd41r17b"},defaultClass:"_1vd41r179"},"green-light":{conditions:{default:"_1vd41r17c",hover:"_1vd41r17d",focus:"_1vd41r17e"},defaultClass:"_1vd41r17c"},"green-medium":{conditions:{default:"_1vd41r17f",hover:"_1vd41r17g",focus:"_1vd41r17h"},defaultClass:"_1vd41r17f"},"green-dark":{conditions:{default:"_1vd41r17i",hover:"_1vd41r17j",focus:"_1vd41r17k"},defaultClass:"_1vd41r17i"},"purple-light":{conditions:{default:"_1vd41r17l",hover:"_1vd41r17m",focus:"_1vd41r17n"},defaultClass:"_1vd41r17l"},"purple-medium-light":{conditions:{default:"_1vd41r17o",hover:"_1vd41r17p",focus:"_1vd41r17q"},defaultClass:"_1vd41r17o"},"purple-medium":{conditions:{default:"_1vd41r17r",hover:"_1vd41r17s",focus:"_1vd41r17t"},defaultClass:"_1vd41r17r"},"purple-dark":{conditions:{default:"_1vd41r17u",hover:"_1vd41r17v",focus:"_1vd41r17w"},defaultClass:"_1vd41r17u"},"orange-light":{conditions:{default:"_1vd41r17x",hover:"_1vd41r17y",focus:"_1vd41r17z"},defaultClass:"_1vd41r17x"},"orange-medium":{conditions:{default:"_1vd41r180",hover:"_1vd41r181",focus:"_1vd41r182"},defaultClass:"_1vd41r180"},"orange-dark":{conditions:{default:"_1vd41r183",hover:"_1vd41r184",focus:"_1vd41r185"},defaultClass:"_1vd41r183"},"grey-extra-light":{conditions:{default:"_1vd41r186",hover:"_1vd41r187",focus:"_1vd41r188"},defaultClass:"_1vd41r186"},"grey-light":{conditions:{default:"_1vd41r189",hover:"_1vd41r18a",focus:"_1vd41r18b"},defaultClass:"_1vd41r189"},"grey-medium-light":{conditions:{default:"_1vd41r18c",hover:"_1vd41r18d",focus:"_1vd41r18e"},defaultClass:"_1vd41r18c"},"grey-medium":{conditions:{default:"_1vd41r18f",hover:"_1vd41r18g",focus:"_1vd41r18h"},defaultClass:"_1vd41r18f"},"grey-medium-dark":{conditions:{default:"_1vd41r18i",hover:"_1vd41r18j",focus:"_1vd41r18k"},defaultClass:"_1vd41r18i"},"grey-dark":{conditions:{default:"_1vd41r18l",hover:"_1vd41r18m",focus:"_1vd41r18n"},defaultClass:"_1vd41r18l"},"yellow-light":{conditions:{default:"_1vd41r18o",hover:"_1vd41r18p",focus:"_1vd41r18q"},defaultClass:"_1vd41r18o"},"yellow-medium":{conditions:{default:"_1vd41r18r",hover:"_1vd41r18s",focus:"_1vd41r18t"},defaultClass:"_1vd41r18r"},white:{conditions:{default:"_1vd41r18u",hover:"_1vd41r18v",focus:"_1vd41r18w"},defaultClass:"_1vd41r18u"},black:{conditions:{default:"_1vd41r18x",hover:"_1vd41r18y",focus:"_1vd41r18z"},defaultClass:"_1vd41r18x"}}},borderRightColor:{values:{"red-light":{conditions:{default:"_1vd41r190",hover:"_1vd41r191",focus:"_1vd41r192"},defaultClass:"_1vd41r190"},"red-medium":{conditions:{default:"_1vd41r193",hover:"_1vd41r194",focus:"_1vd41r195"},defaultClass:"_1vd41r193"},"red-dark":{conditions:{default:"_1vd41r196",hover:"_1vd41r197",focus:"_1vd41r198"},defaultClass:"_1vd41r196"},"blue-extra-light":{conditions:{default:"_1vd41r199",hover:"_1vd41r19a",focus:"_1vd41r19b"},defaultClass:"_1vd41r199"},"blue-light":{conditions:{default:"_1vd41r19c",hover:"_1vd41r19d",focus:"_1vd41r19e"},defaultClass:"_1vd41r19c"},"blue-medium":{conditions:{default:"_1vd41r19f",hover:"_1vd41r19g",focus:"_1vd41r19h"},defaultClass:"_1vd41r19f"},"blue-dark":{conditions:{default:"_1vd41r19i",hover:"_1vd41r19j",focus:"_1vd41r19k"},defaultClass:"_1vd41r19i"},"green-light":{conditions:{default:"_1vd41r19l",hover:"_1vd41r19m",focus:"_1vd41r19n"},defaultClass:"_1vd41r19l"},"green-medium":{conditions:{default:"_1vd41r19o",hover:"_1vd41r19p",focus:"_1vd41r19q"},defaultClass:"_1vd41r19o"},"green-dark":{conditions:{default:"_1vd41r19r",hover:"_1vd41r19s",focus:"_1vd41r19t"},defaultClass:"_1vd41r19r"},"purple-light":{conditions:{default:"_1vd41r19u",hover:"_1vd41r19v",focus:"_1vd41r19w"},defaultClass:"_1vd41r19u"},"purple-medium-light":{conditions:{default:"_1vd41r19x",hover:"_1vd41r19y",focus:"_1vd41r19z"},defaultClass:"_1vd41r19x"},"purple-medium":{conditions:{default:"_1vd41r1a0",hover:"_1vd41r1a1",focus:"_1vd41r1a2"},defaultClass:"_1vd41r1a0"},"purple-dark":{conditions:{default:"_1vd41r1a3",hover:"_1vd41r1a4",focus:"_1vd41r1a5"},defaultClass:"_1vd41r1a3"},"orange-light":{conditions:{default:"_1vd41r1a6",hover:"_1vd41r1a7",focus:"_1vd41r1a8"},defaultClass:"_1vd41r1a6"},"orange-medium":{conditions:{default:"_1vd41r1a9",hover:"_1vd41r1aa",focus:"_1vd41r1ab"},defaultClass:"_1vd41r1a9"},"orange-dark":{conditions:{default:"_1vd41r1ac",hover:"_1vd41r1ad",focus:"_1vd41r1ae"},defaultClass:"_1vd41r1ac"},"grey-extra-light":{conditions:{default:"_1vd41r1af",hover:"_1vd41r1ag",focus:"_1vd41r1ah"},defaultClass:"_1vd41r1af"},"grey-light":{conditions:{default:"_1vd41r1ai",hover:"_1vd41r1aj",focus:"_1vd41r1ak"},defaultClass:"_1vd41r1ai"},"grey-medium-light":{conditions:{default:"_1vd41r1al",hover:"_1vd41r1am",focus:"_1vd41r1an"},defaultClass:"_1vd41r1al"},"grey-medium":{conditions:{default:"_1vd41r1ao",hover:"_1vd41r1ap",focus:"_1vd41r1aq"},defaultClass:"_1vd41r1ao"},"grey-medium-dark":{conditions:{default:"_1vd41r1ar",hover:"_1vd41r1as",focus:"_1vd41r1at"},defaultClass:"_1vd41r1ar"},"grey-dark":{conditions:{default:"_1vd41r1au",hover:"_1vd41r1av",focus:"_1vd41r1aw"},defaultClass:"_1vd41r1au"},"yellow-light":{conditions:{default:"_1vd41r1ax",hover:"_1vd41r1ay",focus:"_1vd41r1az"},defaultClass:"_1vd41r1ax"},"yellow-medium":{conditions:{default:"_1vd41r1b0",hover:"_1vd41r1b1",focus:"_1vd41r1b2"},defaultClass:"_1vd41r1b0"},white:{conditions:{default:"_1vd41r1b3",hover:"_1vd41r1b4",focus:"_1vd41r1b5"},defaultClass:"_1vd41r1b3"},black:{conditions:{default:"_1vd41r1b6",hover:"_1vd41r1b7",focus:"_1vd41r1b8"},defaultClass:"_1vd41r1b6"}}},borderTopColor:{values:{"red-light":{conditions:{default:"_1vd41r1b9",hover:"_1vd41r1ba",focus:"_1vd41r1bb"},defaultClass:"_1vd41r1b9"},"red-medium":{conditions:{default:"_1vd41r1bc",hover:"_1vd41r1bd",focus:"_1vd41r1be"},defaultClass:"_1vd41r1bc"},"red-dark":{conditions:{default:"_1vd41r1bf",hover:"_1vd41r1bg",focus:"_1vd41r1bh"},defaultClass:"_1vd41r1bf"},"blue-extra-light":{conditions:{default:"_1vd41r1bi",hover:"_1vd41r1bj",focus:"_1vd41r1bk"},defaultClass:"_1vd41r1bi"},"blue-light":{conditions:{default:"_1vd41r1bl",hover:"_1vd41r1bm",focus:"_1vd41r1bn"},defaultClass:"_1vd41r1bl"},"blue-medium":{conditions:{default:"_1vd41r1bo",hover:"_1vd41r1bp",focus:"_1vd41r1bq"},defaultClass:"_1vd41r1bo"},"blue-dark":{conditions:{default:"_1vd41r1br",hover:"_1vd41r1bs",focus:"_1vd41r1bt"},defaultClass:"_1vd41r1br"},"green-light":{conditions:{default:"_1vd41r1bu",hover:"_1vd41r1bv",focus:"_1vd41r1bw"},defaultClass:"_1vd41r1bu"},"green-medium":{conditions:{default:"_1vd41r1bx",hover:"_1vd41r1by",focus:"_1vd41r1bz"},defaultClass:"_1vd41r1bx"},"green-dark":{conditions:{default:"_1vd41r1c0",hover:"_1vd41r1c1",focus:"_1vd41r1c2"},defaultClass:"_1vd41r1c0"},"purple-light":{conditions:{default:"_1vd41r1c3",hover:"_1vd41r1c4",focus:"_1vd41r1c5"},defaultClass:"_1vd41r1c3"},"purple-medium-light":{conditions:{default:"_1vd41r1c6",hover:"_1vd41r1c7",focus:"_1vd41r1c8"},defaultClass:"_1vd41r1c6"},"purple-medium":{conditions:{default:"_1vd41r1c9",hover:"_1vd41r1ca",focus:"_1vd41r1cb"},defaultClass:"_1vd41r1c9"},"purple-dark":{conditions:{default:"_1vd41r1cc",hover:"_1vd41r1cd",focus:"_1vd41r1ce"},defaultClass:"_1vd41r1cc"},"orange-light":{conditions:{default:"_1vd41r1cf",hover:"_1vd41r1cg",focus:"_1vd41r1ch"},defaultClass:"_1vd41r1cf"},"orange-medium":{conditions:{default:"_1vd41r1ci",hover:"_1vd41r1cj",focus:"_1vd41r1ck"},defaultClass:"_1vd41r1ci"},"orange-dark":{conditions:{default:"_1vd41r1cl",hover:"_1vd41r1cm",focus:"_1vd41r1cn"},defaultClass:"_1vd41r1cl"},"grey-extra-light":{conditions:{default:"_1vd41r1co",hover:"_1vd41r1cp",focus:"_1vd41r1cq"},defaultClass:"_1vd41r1co"},"grey-light":{conditions:{default:"_1vd41r1cr",hover:"_1vd41r1cs",focus:"_1vd41r1ct"},defaultClass:"_1vd41r1cr"},"grey-medium-light":{conditions:{default:"_1vd41r1cu",hover:"_1vd41r1cv",focus:"_1vd41r1cw"},defaultClass:"_1vd41r1cu"},"grey-medium":{conditions:{default:"_1vd41r1cx",hover:"_1vd41r1cy",focus:"_1vd41r1cz"},defaultClass:"_1vd41r1cx"},"grey-medium-dark":{conditions:{default:"_1vd41r1d0",hover:"_1vd41r1d1",focus:"_1vd41r1d2"},defaultClass:"_1vd41r1d0"},"grey-dark":{conditions:{default:"_1vd41r1d3",hover:"_1vd41r1d4",focus:"_1vd41r1d5"},defaultClass:"_1vd41r1d3"},"yellow-light":{conditions:{default:"_1vd41r1d6",hover:"_1vd41r1d7",focus:"_1vd41r1d8"},defaultClass:"_1vd41r1d6"},"yellow-medium":{conditions:{default:"_1vd41r1d9",hover:"_1vd41r1da",focus:"_1vd41r1db"},defaultClass:"_1vd41r1d9"},white:{conditions:{default:"_1vd41r1dc",hover:"_1vd41r1dd",focus:"_1vd41r1de"},defaultClass:"_1vd41r1dc"},black:{conditions:{default:"_1vd41r1df",hover:"_1vd41r1dg",focus:"_1vd41r1dh"},defaultClass:"_1vd41r1df"}}},borderRadius:{values:{square:{conditions:{default:"_1vd41r1di",hover:"_1vd41r1dj",focus:"_1vd41r1dk"},defaultClass:"_1vd41r1di"},rounded:{conditions:{default:"_1vd41r1dl",hover:"_1vd41r1dm",focus:"_1vd41r1dn"},defaultClass:"_1vd41r1dl"}}},borderWidth:{values:{standard:{conditions:{default:"_1vd41r1do",hover:"_1vd41r1dp",focus:"_1vd41r1dq"},defaultClass:"_1vd41r1do"}}},color:{values:{"red-light":{conditions:{default:"_1vd41r1dr",hover:"_1vd41r1ds",focus:"_1vd41r1dt"},defaultClass:"_1vd41r1dr"},"red-medium":{conditions:{default:"_1vd41r1du",hover:"_1vd41r1dv",focus:"_1vd41r1dw"},defaultClass:"_1vd41r1du"},"red-dark":{conditions:{default:"_1vd41r1dx",hover:"_1vd41r1dy",focus:"_1vd41r1dz"},defaultClass:"_1vd41r1dx"},"blue-extra-light":{conditions:{default:"_1vd41r1e0",hover:"_1vd41r1e1",focus:"_1vd41r1e2"},defaultClass:"_1vd41r1e0"},"blue-light":{conditions:{default:"_1vd41r1e3",hover:"_1vd41r1e4",focus:"_1vd41r1e5"},defaultClass:"_1vd41r1e3"},"blue-medium":{conditions:{default:"_1vd41r1e6",hover:"_1vd41r1e7",focus:"_1vd41r1e8"},defaultClass:"_1vd41r1e6"},"blue-dark":{conditions:{default:"_1vd41r1e9",hover:"_1vd41r1ea",focus:"_1vd41r1eb"},defaultClass:"_1vd41r1e9"},"green-light":{conditions:{default:"_1vd41r1ec",hover:"_1vd41r1ed",focus:"_1vd41r1ee"},defaultClass:"_1vd41r1ec"},"green-medium":{conditions:{default:"_1vd41r1ef",hover:"_1vd41r1eg",focus:"_1vd41r1eh"},defaultClass:"_1vd41r1ef"},"green-dark":{conditions:{default:"_1vd41r1ei",hover:"_1vd41r1ej",focus:"_1vd41r1ek"},defaultClass:"_1vd41r1ei"},"purple-light":{conditions:{default:"_1vd41r1el",hover:"_1vd41r1em",focus:"_1vd41r1en"},defaultClass:"_1vd41r1el"},"purple-medium-light":{conditions:{default:"_1vd41r1eo",hover:"_1vd41r1ep",focus:"_1vd41r1eq"},defaultClass:"_1vd41r1eo"},"purple-medium":{conditions:{default:"_1vd41r1er",hover:"_1vd41r1es",focus:"_1vd41r1et"},defaultClass:"_1vd41r1er"},"purple-dark":{conditions:{default:"_1vd41r1eu",hover:"_1vd41r1ev",focus:"_1vd41r1ew"},defaultClass:"_1vd41r1eu"},"orange-light":{conditions:{default:"_1vd41r1ex",hover:"_1vd41r1ey",focus:"_1vd41r1ez"},defaultClass:"_1vd41r1ex"},"orange-medium":{conditions:{default:"_1vd41r1f0",hover:"_1vd41r1f1",focus:"_1vd41r1f2"},defaultClass:"_1vd41r1f0"},"orange-dark":{conditions:{default:"_1vd41r1f3",hover:"_1vd41r1f4",focus:"_1vd41r1f5"},defaultClass:"_1vd41r1f3"},"grey-extra-light":{conditions:{default:"_1vd41r1f6",hover:"_1vd41r1f7",focus:"_1vd41r1f8"},defaultClass:"_1vd41r1f6"},"grey-light":{conditions:{default:"_1vd41r1f9",hover:"_1vd41r1fa",focus:"_1vd41r1fb"},defaultClass:"_1vd41r1f9"},"grey-medium-light":{conditions:{default:"_1vd41r1fc",hover:"_1vd41r1fd",focus:"_1vd41r1fe"},defaultClass:"_1vd41r1fc"},"grey-medium":{conditions:{default:"_1vd41r1ff",hover:"_1vd41r1fg",focus:"_1vd41r1fh"},defaultClass:"_1vd41r1ff"},"grey-medium-dark":{conditions:{default:"_1vd41r1fi",hover:"_1vd41r1fj",focus:"_1vd41r1fk"},defaultClass:"_1vd41r1fi"},"grey-dark":{conditions:{default:"_1vd41r1fl",hover:"_1vd41r1fm",focus:"_1vd41r1fn"},defaultClass:"_1vd41r1fl"},"yellow-light":{conditions:{default:"_1vd41r1fo",hover:"_1vd41r1fp",focus:"_1vd41r1fq"},defaultClass:"_1vd41r1fo"},"yellow-medium":{conditions:{default:"_1vd41r1fr",hover:"_1vd41r1fs",focus:"_1vd41r1ft"},defaultClass:"_1vd41r1fr"},white:{conditions:{default:"_1vd41r1fu",hover:"_1vd41r1fv",focus:"_1vd41r1fw"},defaultClass:"_1vd41r1fu"},black:{conditions:{default:"_1vd41r1fx",hover:"_1vd41r1fy",focus:"_1vd41r1fz"},defaultClass:"_1vd41r1fx"}}},fontSize:{values:{"body-sm":{conditions:{default:"_1vd41r1g0",hover:"_1vd41r1g1",focus:"_1vd41r1g2"},defaultClass:"_1vd41r1g0"},"body-md":{conditions:{default:"_1vd41r1g3",hover:"_1vd41r1g4",focus:"_1vd41r1g5"},defaultClass:"_1vd41r1g3"},"title-sm":{conditions:{default:"_1vd41r1g6",hover:"_1vd41r1g7",focus:"_1vd41r1g8"},defaultClass:"_1vd41r1g6"},"title-md":{conditions:{default:"_1vd41r1g9",hover:"_1vd41r1ga",focus:"_1vd41r1gb"},defaultClass:"_1vd41r1g9"},"title-lg":{conditions:{default:"_1vd41r1gc",hover:"_1vd41r1gd",focus:"_1vd41r1ge"},defaultClass:"_1vd41r1gc"},"title-xl":{conditions:{default:"_1vd41r1gf",hover:"_1vd41r1gg",focus:"_1vd41r1gh"},defaultClass:"_1vd41r1gf"}}},fontWeight:{values:{normal:{conditions:{default:"_1vd41r1gi",hover:"_1vd41r1gj",focus:"_1vd41r1gk"},defaultClass:"_1vd41r1gi"},bold:{conditions:{default:"_1vd41r1gl",hover:"_1vd41r1gm",focus:"_1vd41r1gn"},defaultClass:"_1vd41r1gl"}}},lineHeight:{values:{"body-sm":{conditions:{default:"_1vd41r1go",hover:"_1vd41r1gp",focus:"_1vd41r1gq"},defaultClass:"_1vd41r1go"},"body-md":{conditions:{default:"_1vd41r1gr",hover:"_1vd41r1gs",focus:"_1vd41r1gt"},defaultClass:"_1vd41r1gr"},"title-sm":{conditions:{default:"_1vd41r1gu",hover:"_1vd41r1gv",focus:"_1vd41r1gw"},defaultClass:"_1vd41r1gu"},"title-md":{conditions:{default:"_1vd41r1gx",hover:"_1vd41r1gy",focus:"_1vd41r1gz"},defaultClass:"_1vd41r1gx"},"title-lg":{conditions:{default:"_1vd41r1h0",hover:"_1vd41r1h1",focus:"_1vd41r1h2"},defaultClass:"_1vd41r1h0"},"title-xl":{conditions:{default:"_1vd41r1h3",hover:"_1vd41r1h4",focus:"_1vd41r1h5"},defaultClass:"_1vd41r1h3"}}},marginBottom:{values:{xs:{conditions:{default:"_1vd41r1h6",hover:"_1vd41r1h7",focus:"_1vd41r1h8"},defaultClass:"_1vd41r1h6"},sm:{conditions:{default:"_1vd41r1h9",hover:"_1vd41r1ha",focus:"_1vd41r1hb"},defaultClass:"_1vd41r1h9"},md:{conditions:{default:"_1vd41r1hc",hover:"_1vd41r1hd",focus:"_1vd41r1he"},defaultClass:"_1vd41r1hc"},lg:{conditions:{default:"_1vd41r1hf",hover:"_1vd41r1hg",focus:"_1vd41r1hh"},defaultClass:"_1vd41r1hf"}}},marginLeft:{values:{xs:{conditions:{default:"_1vd41r1hi",hover:"_1vd41r1hj",focus:"_1vd41r1hk"},defaultClass:"_1vd41r1hi"},sm:{conditions:{default:"_1vd41r1hl",hover:"_1vd41r1hm",focus:"_1vd41r1hn"},defaultClass:"_1vd41r1hl"},md:{conditions:{default:"_1vd41r1ho",hover:"_1vd41r1hp",focus:"_1vd41r1hq"},defaultClass:"_1vd41r1ho"},lg:{conditions:{default:"_1vd41r1hr",hover:"_1vd41r1hs",focus:"_1vd41r1ht"},defaultClass:"_1vd41r1hr"}}},marginRight:{values:{xs:{conditions:{default:"_1vd41r1hu",hover:"_1vd41r1hv",focus:"_1vd41r1hw"},defaultClass:"_1vd41r1hu"},sm:{conditions:{default:"_1vd41r1hx",hover:"_1vd41r1hy",focus:"_1vd41r1hz"},defaultClass:"_1vd41r1hx"},md:{conditions:{default:"_1vd41r1i0",hover:"_1vd41r1i1",focus:"_1vd41r1i2"},defaultClass:"_1vd41r1i0"},lg:{conditions:{default:"_1vd41r1i3",hover:"_1vd41r1i4",focus:"_1vd41r1i5"},defaultClass:"_1vd41r1i3"}}},marginTop:{values:{xs:{conditions:{default:"_1vd41r1i6",hover:"_1vd41r1i7",focus:"_1vd41r1i8"},defaultClass:"_1vd41r1i6"},sm:{conditions:{default:"_1vd41r1i9",hover:"_1vd41r1ia",focus:"_1vd41r1ib"},defaultClass:"_1vd41r1i9"},md:{conditions:{default:"_1vd41r1ic",hover:"_1vd41r1id",focus:"_1vd41r1ie"},defaultClass:"_1vd41r1ic"},lg:{conditions:{default:"_1vd41r1if",hover:"_1vd41r1ig",focus:"_1vd41r1ih"},defaultClass:"_1vd41r1if"}}},paddingBottom:{values:{xs:{conditions:{default:"_1vd41r1ii",hover:"_1vd41r1ij",focus:"_1vd41r1ik"},defaultClass:"_1vd41r1ii"},sm:{conditions:{default:"_1vd41r1il",hover:"_1vd41r1im",focus:"_1vd41r1in"},defaultClass:"_1vd41r1il"},md:{conditions:{default:"_1vd41r1io",hover:"_1vd41r1ip",focus:"_1vd41r1iq"},defaultClass:"_1vd41r1io"},lg:{conditions:{default:"_1vd41r1ir",hover:"_1vd41r1is",focus:"_1vd41r1it"},defaultClass:"_1vd41r1ir"}}},paddingLeft:{values:{xs:{conditions:{default:"_1vd41r1iu",hover:"_1vd41r1iv",focus:"_1vd41r1iw"},defaultClass:"_1vd41r1iu"},sm:{conditions:{default:"_1vd41r1ix",hover:"_1vd41r1iy",focus:"_1vd41r1iz"},defaultClass:"_1vd41r1ix"},md:{conditions:{default:"_1vd41r1j0",hover:"_1vd41r1j1",focus:"_1vd41r1j2"},defaultClass:"_1vd41r1j0"},lg:{conditions:{default:"_1vd41r1j3",hover:"_1vd41r1j4",focus:"_1vd41r1j5"},defaultClass:"_1vd41r1j3"}}},paddingRight:{values:{xs:{conditions:{default:"_1vd41r1j6",hover:"_1vd41r1j7",focus:"_1vd41r1j8"},defaultClass:"_1vd41r1j6"},sm:{conditions:{default:"_1vd41r1j9",hover:"_1vd41r1ja",focus:"_1vd41r1jb"},defaultClass:"_1vd41r1j9"},md:{conditions:{default:"_1vd41r1jc",hover:"_1vd41r1jd",focus:"_1vd41r1je"},defaultClass:"_1vd41r1jc"},lg:{conditions:{default:"_1vd41r1jf",hover:"_1vd41r1jg",focus:"_1vd41r1jh"},defaultClass:"_1vd41r1jf"}}},paddingTop:{values:{xs:{conditions:{default:"_1vd41r1ji",hover:"_1vd41r1jj",focus:"_1vd41r1jk"},defaultClass:"_1vd41r1ji"},sm:{conditions:{default:"_1vd41r1jl",hover:"_1vd41r1jm",focus:"_1vd41r1jn"},defaultClass:"_1vd41r1jl"},md:{conditions:{default:"_1vd41r1jo",hover:"_1vd41r1jp",focus:"_1vd41r1jq"},defaultClass:"_1vd41r1jo"},lg:{conditions:{default:"_1vd41r1jr",hover:"_1vd41r1js",focus:"_1vd41r1jt"},defaultClass:"_1vd41r1jr"}}}}});Object.freeze({color:{red:{light:"#fbe6ea",medium:"#de002e",dark:"#a30d2d"},blue:{"extra-light":"#f2f8fb",light:"#e6f2f8",medium:"#007db8",dark:"#09638d"},green:{light:"#e7f3ec",medium:"#0b8940",dark:"#106b39"},purple:{light:"#f4ecf2","medium-light":"#e3d0de",medium:"#91467f",dark:"#6e3c65"},orange:{light:"#fcf1e7",medium:"#e7760b",dark:"#aa5e14"},grey:{"extra-light":"#f3f4f4",light:"#e9e9ea","medium-light":"#d2d4d4",medium:"#717779","medium-dark":"#4b5356",dark:"#1f282c"},yellow:{light:"#fff8e0",medium:"#ffcc00"},white:"#ffffff",black:"#000000"},grid:{columns:{standard:12}},size:{border:{radius:{square:"0",rounded:"0.25rem"},width:{standard:"0.0625rem"}},grid:{gutter:"1rem"},spacing:{xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"2rem"},type:{"body-sm":{font:"0.75rem",line:"1.125rem"},"body-md":{font:"0.875rem",line:"1.25rem"},"title-sm":{font:"1rem",line:"1rem"},"title-md":{font:"1.125rem",line:"1.125rem"},"title-lg":{font:"1.25rem",line:"1.25rem"},"title-xl":{font:"1.5rem",line:"1.5rem"}}},type:{weight:{normal:400,bold:600}}});var Y="_85dplj0",V="_85dplj1";function W(d,t,r){return t in d?Object.defineProperty(d,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):d[t]=r,d}function E(d,t){var r=Object.keys(d);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(d);t&&(e=e.filter(function(o){return Object.getOwnPropertyDescriptor(d,o).enumerable})),r.push.apply(r,e)}return r}function R(d){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?E(Object(r),!0).forEach(function(e){W(d,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(d,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach(function(e){Object.defineProperty(d,e,Object.getOwnPropertyDescriptor(r,e))})}return d}var X=(d,t,r)=>{for(var e of Object.keys(d)){var o;if(d[e]!==((o=t[e])!==null&&o!==void 0?o:r[e]))return!1}return!0},p=d=>t=>{var r=d.defaultClassName,e=R(R({},d.defaultVariants),t);for(var o in e){var u,l=(u=e[o])!==null&&u!==void 0?u:d.defaultVariants[o];if(l!=null){var i=l;typeof i=="boolean"&&(i=i===!0?"true":"false");var a=d.variantClassNames[o][i];a&&(r+=" "+a)}}for(var[n,_]of d.compoundVariants)X(n,e,d.defaultVariants)&&(r+=" "+_);return r},J=p({defaultClassName:"_1k4ncnf4",variantClassNames:{error:{true:"_1k4ncnf5"},warning:{true:"_1k4ncnf6"},disabled:{true:"_1k4ncnf7"}},defaultVariants:{error:!1,warning:!1,disabled:!1},compoundVariants:[]}),Q="_1k4ncnf0",U=p({defaultClassName:"_1k4ncnf1",variantClassNames:{disabled:{true:"_1k4ncnf2"}},defaultVariants:{disabled:!1},compoundVariants:[]}),Z="_1k4ncnf3",z=p({defaultClassName:"",variantClassNames:{error:{true:"_1k4ncnf8"},warning:{true:"_1k4ncnf9"},disabled:{true:"_1k4ncnfa"}},defaultVariants:{error:!1,disabled:!1,warning:!1},compoundVariants:[]}),$="_1k4ncnfb",d1="_1k4ncnfc",r1="_1k4ncnfe",e1="_1k4ncnfd";function b({className:d,href:t,icon:r,error:e=!1,errorIcon:o,title:u,warning:l=!1,warningIcon:i,disabled:a=!1,target:n,onClick:_,...c}){return v.createElement("div",{className:s.cl(M[3],Q,d),...c},v.createElement("a",{href:a?void 0:t,className:s.cl(J({error:e,warning:l,disabled:a}),V),target:n,onClick:_},(l||e)&&v.createElement("div",{className:$},l&&(i?s.contentOf(i):v.createElement(s.Icon,{icon:"status-warning",className:s.cl(z({warning:l,disabled:a}))})),e&&(o?s.contentOf(o):v.createElement(s.Icon,{icon:"ban",className:s.cl(z({error:e,disabled:a}))}))),v.createElement("div",null,v.createElement("div",{className:s.cl(Z)},typeof r=="string"?v.createElement("img",{className:s.cl(U({disabled:a})),src:r,alt:""}):s.contentOf(r)),v.createElement("div",{className:s.cl(d1)},v.createElement("p",{className:s.cl(e1)},u,n==="_blank"&&v.createElement(s.Icon,{icon:"tabs",className:s.cl(r1)}))))))}s.Metadata.set(b,{name:"Content Tile",props:{href:{type:"string"},icon:{type:"React.ReactNode | (() => React.ReactNode)",required:!0},error:{type:"boolean",default:"false"},errorIcon:{type:"React.ReactNode | (() => React.ReactNode)"},title:{type:"string",required:!0},warning:{type:"boolean",default:"false"},warningIcon:{type:"React.ReactNode | (() => React.ReactNode)"},disabled:{type:"boolean",default:"false"},target:{type:"string"},onClick:{type:"() => void"}}});function y({children:d,className:t,...r}){return v.createElement("div",{className:s.cl(Y,t),...r},d)}s.Metadata.set(y,{name:"Content Tile List"});const t1={components:[b,y],examples:{basic:{label:"Basic",examples:{basic:{react:m.code`
2
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
3
+
4
+ function Component() {
5
+ const apps = [
6
+ {
7
+ name: "App Manager",
8
+ warning: false,
9
+ error: false,
10
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg",
11
+ },
12
+ {
13
+ name: "Assortment",
14
+ warning: false,
15
+ error: false,
16
+ href: "https://www.google.com",
17
+ target: "_blank",
18
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg",
19
+ },
20
+ {
21
+ name: "Community",
22
+ warning: false,
23
+ error: false,
24
+ onClick: () => console.log("Community"),
25
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg",
26
+ },
27
+ {
28
+ name: "Design System",
29
+ warning: false,
30
+ error: true,
31
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg",
32
+ },
33
+ {
34
+ name: "Nexus",
35
+ warning: false,
36
+ error: false,
37
+ disabled: true,
38
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg",
39
+ },
40
+ {
41
+ name: "Testing & Certification",
42
+ warning: true,
43
+ error: false,
44
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg",
45
+ },
46
+ ];
47
+
48
+ return (
49
+ <>
50
+ <ContentTileList>
51
+ {apps.map((app, index) => {
52
+ return (
53
+ <ContentTile
54
+ key={index}
55
+ title={app.name}
56
+ warning={app.warning}
57
+ error={app.error}
58
+ href={app.href}
59
+ target={app.target}
60
+ disabled={app.disabled}
61
+ icon={app.icon}
62
+ onClick={app.onClick}
63
+ />
64
+ );
65
+ })}
66
+ </ContentTileList>
67
+ </>
68
+ );
69
+ }
70
+ `}}},singleTile:{label:"Single Tile",examples:{basic:{react:m.code`
71
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
72
+ function Component() {
73
+ return (
74
+ <>
75
+ <ContentTileList>
76
+ <ContentTile
77
+ title="Design System"
78
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg"}
79
+ onClick={() => console.log("Go to Design System")}
80
+ />
81
+ </ContentTileList>
82
+ </>
83
+ )
84
+ }
85
+ `},error:{react:m.code`
86
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
87
+
88
+ function Component() {
89
+ return (
90
+ <>
91
+ <ContentTileList>
92
+ <ContentTile
93
+ title="Assortment"
94
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg"}
95
+ error
96
+ id="error-app"
97
+ />
98
+ </ContentTileList>
99
+ <SpsTooltip for="error-app" title="Error">
100
+ Your application has been suspended
101
+ </SpsTooltip>
102
+ </>
103
+ )
104
+ }
105
+ `}}},sortableTiles:{label:"Sortable Tiles",examples:{basic:{react:m.code`
106
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
107
+ import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
108
+ import { grid } from "@sps-woodland/tokens";
109
+
110
+ function Component() {
111
+ const [sort, setSort] = React.useState([{ key: 'name', direction: SortDirection.ASCENDING }]);
112
+
113
+ const apps = React.useMemo(() => [
114
+ {
115
+ name: "App Manager",
116
+ warning: false,
117
+ error: false,
118
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg",
119
+ },
120
+ {
121
+ name: "Assortment",
122
+ warning: false,
123
+ error: false,
124
+ href: "https://www.google.com",
125
+ target: "_blank",
126
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg",
127
+ },
128
+ {
129
+ name: "Community",
130
+ warning: false,
131
+ error: false,
132
+ onClick: () => console.log("Community"),
133
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg",
134
+ },
135
+ {
136
+ name: "Design System",
137
+ warning: false,
138
+ error: true,
139
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg",
140
+ },
141
+ {
142
+ name: "Nexus",
143
+ warning: false,
144
+ error: false,
145
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg",
146
+ },
147
+ {
148
+ name: "Testing & Certification",
149
+ warning: true,
150
+ error: false,
151
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg",
152
+ },
153
+ ].sort((a, b) => {
154
+ if (!sort.length) {
155
+ return 0;
156
+ }
157
+
158
+ const [{ key, direction }] = sort;
159
+
160
+ // straightforward sort by name
161
+ if (key === 'name') {
162
+ if (a.name < b.name) {
163
+ return direction === SortDirection.ASCENDING ? -1 : 1;
164
+ } else if (a.name > b.name) {
165
+ return direction === SortDirection.ASCENDING ? 1 : -1;
166
+ }
167
+ }
168
+
169
+ // custom sort by status
170
+ if (key === 'status') {
171
+ if (+a.error + +a.warning < +b.error + +b.warning) {
172
+ return direction === SortDirection.ASCENDING ? -1 : 1;
173
+ } else if (+a.error + +a.warning > +b.error + +b.warning) {
174
+ return direction === SortDirection.ASCENDING ? 1 : -1;
175
+ }
176
+ }
177
+
178
+ return 0;
179
+ }), [sort]);
180
+
181
+ return (
182
+ <div className={grid.root}>
183
+ <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
184
+ <SortingHeaderCell sortKey="name">
185
+ Name
186
+ </SortingHeaderCell>
187
+ <SortingHeaderCell sortKey="status">
188
+ Status
189
+ </SortingHeaderCell>
190
+ </SortingHeader>
191
+
192
+ <ContentTileList className={grid[12]}>
193
+ {apps.map((app, index) => {
194
+ return (
195
+ <ContentTile
196
+ key={index}
197
+ title={app.name}
198
+ warning={app.warning}
199
+ error={app.error}
200
+ href={app.href}
201
+ target={app.target}
202
+ icon={app.icon}
203
+ onClick={app.onClick}
204
+ />
205
+ )
206
+ })}
207
+ </ContentTileList>
208
+ </div>
209
+ )
210
+ }
211
+ `}}}}},o1={"Content Tiles":t1};exports.ContentTile=b;exports.ContentTileList=y;exports.MANIFEST=o1;
package/lib/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from "./content-tile/ContentTile";
2
+ export * from "./content-tile-list/ContentTileList";
3
+ export * from "./manifest";
package/lib/index.es.js ADDED
@@ -0,0 +1,501 @@
1
+ import { Metadata as D, cl as v, contentOf as C, Icon as p } from "@sps-woodland/core";
2
+ import * as a from "react";
3
+ import { code as m } from "@spscommerce/utils";
4
+ var G = { 1: "_1dw0im31", 2: "_1dw0im32", 3: "_1dw0im33", 4: "_1dw0im34", 5: "_1dw0im35", 6: "_1dw0im36", 7: "_1dw0im37", 8: "_1dw0im38", 9: "_1dw0im39", 10: "_1dw0im3a", 11: "_1dw0im3b", 12: "_1dw0im3c", root: "_1dw0im30" };
5
+ function K(d, t, r) {
6
+ return t in d ? Object.defineProperty(d, t, {
7
+ value: r,
8
+ enumerable: !0,
9
+ configurable: !0,
10
+ writable: !0
11
+ }) : d[t] = r, d;
12
+ }
13
+ function q(d, t) {
14
+ var r = Object.keys(d);
15
+ if (Object.getOwnPropertySymbols) {
16
+ var e = Object.getOwnPropertySymbols(d);
17
+ t && (e = e.filter(function(o) {
18
+ return Object.getOwnPropertyDescriptor(d, o).enumerable;
19
+ })), r.push.apply(r, e);
20
+ }
21
+ return r;
22
+ }
23
+ function b(d) {
24
+ for (var t = 1; t < arguments.length; t++) {
25
+ var r = arguments[t] != null ? arguments[t] : {};
26
+ t % 2 ? q(Object(r), !0).forEach(function(e) {
27
+ K(d, e, r[e]);
28
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(d, Object.getOwnPropertyDescriptors(r)) : q(Object(r)).forEach(function(e) {
29
+ Object.defineProperty(d, e, Object.getOwnPropertyDescriptor(r, e));
30
+ });
31
+ }
32
+ return d;
33
+ }
34
+ var F = (d) => function() {
35
+ for (var t = arguments.length, r = new Array(t), e = 0; e < t; e++)
36
+ r[e] = arguments[e];
37
+ var o = Object.assign({}, ...r.map((s) => s.styles)), u = Object.keys(o), l = u.filter((s) => "mappings" in o[s]), i = (s) => {
38
+ var n = [], _ = {}, c = b({}, s), w = !1;
39
+ for (var k of l) {
40
+ var j = s[k];
41
+ if (j != null) {
42
+ var I = o[k];
43
+ w = !0;
44
+ for (var g of I.mappings)
45
+ _[g] = j, c[g] == null && delete c[g];
46
+ }
47
+ }
48
+ var x = w ? b(b({}, _), c) : s;
49
+ for (var T in x) {
50
+ var f = x[T], h = o[T];
51
+ try {
52
+ if (h.mappings)
53
+ continue;
54
+ if (typeof f == "string" || typeof f == "number")
55
+ n.push(h.values[f].defaultClass);
56
+ else if (Array.isArray(f))
57
+ for (var S in f) {
58
+ var O = f[S];
59
+ if (O != null) {
60
+ var H = h.responsiveArray[S];
61
+ n.push(h.values[O].conditions[H]);
62
+ }
63
+ }
64
+ else
65
+ for (var N in f) {
66
+ var L = f[N];
67
+ L != null && n.push(h.values[L].conditions[N]);
68
+ }
69
+ } catch (B) {
70
+ throw B;
71
+ }
72
+ }
73
+ return d(n.join(" "));
74
+ };
75
+ return Object.assign(i, {
76
+ properties: new Set(u)
77
+ });
78
+ }, M = (d) => d, Y = function() {
79
+ return F(M)(...arguments);
80
+ };
81
+ Y({ conditions: { defaultCondition: "default", conditionNames: ["default", "hover", "focus"], responsiveArray: void 0 }, styles: { margin: { mappings: ["marginTop", "marginBottom", "marginLeft", "marginRight"] }, marginX: { mappings: ["marginLeft", "marginRight"] }, marginY: { mappings: ["marginTop", "marginBottom"] }, padding: { mappings: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"] }, paddingX: { mappings: ["paddingLeft", "paddingRight"] }, paddingY: { mappings: ["paddingTop", "paddingBottom"] }, type: { mappings: ["fontSize", "lineHeight"] }, backgroundColor: { values: { "red-light": { conditions: { default: "_1vd41r10", hover: "_1vd41r11", focus: "_1vd41r12" }, defaultClass: "_1vd41r10" }, "red-medium": { conditions: { default: "_1vd41r13", hover: "_1vd41r14", focus: "_1vd41r15" }, defaultClass: "_1vd41r13" }, "red-dark": { conditions: { default: "_1vd41r16", hover: "_1vd41r17", focus: "_1vd41r18" }, defaultClass: "_1vd41r16" }, "blue-extra-light": { conditions: { default: "_1vd41r19", hover: "_1vd41r1a", focus: "_1vd41r1b" }, defaultClass: "_1vd41r19" }, "blue-light": { conditions: { default: "_1vd41r1c", hover: "_1vd41r1d", focus: "_1vd41r1e" }, defaultClass: "_1vd41r1c" }, "blue-medium": { conditions: { default: "_1vd41r1f", hover: "_1vd41r1g", focus: "_1vd41r1h" }, defaultClass: "_1vd41r1f" }, "blue-dark": { conditions: { default: "_1vd41r1i", hover: "_1vd41r1j", focus: "_1vd41r1k" }, defaultClass: "_1vd41r1i" }, "green-light": { conditions: { default: "_1vd41r1l", hover: "_1vd41r1m", focus: "_1vd41r1n" }, defaultClass: "_1vd41r1l" }, "green-medium": { conditions: { default: "_1vd41r1o", hover: "_1vd41r1p", focus: "_1vd41r1q" }, defaultClass: "_1vd41r1o" }, "green-dark": { conditions: { default: "_1vd41r1r", hover: "_1vd41r1s", focus: "_1vd41r1t" }, defaultClass: "_1vd41r1r" }, "purple-light": { conditions: { default: "_1vd41r1u", hover: "_1vd41r1v", focus: "_1vd41r1w" }, defaultClass: "_1vd41r1u" }, "purple-medium-light": { conditions: { default: "_1vd41r1x", hover: "_1vd41r1y", focus: "_1vd41r1z" }, defaultClass: "_1vd41r1x" }, "purple-medium": { conditions: { default: "_1vd41r110", hover: "_1vd41r111", focus: "_1vd41r112" }, defaultClass: "_1vd41r110" }, "purple-dark": { conditions: { default: "_1vd41r113", hover: "_1vd41r114", focus: "_1vd41r115" }, defaultClass: "_1vd41r113" }, "orange-light": { conditions: { default: "_1vd41r116", hover: "_1vd41r117", focus: "_1vd41r118" }, defaultClass: "_1vd41r116" }, "orange-medium": { conditions: { default: "_1vd41r119", hover: "_1vd41r11a", focus: "_1vd41r11b" }, defaultClass: "_1vd41r119" }, "orange-dark": { conditions: { default: "_1vd41r11c", hover: "_1vd41r11d", focus: "_1vd41r11e" }, defaultClass: "_1vd41r11c" }, "grey-extra-light": { conditions: { default: "_1vd41r11f", hover: "_1vd41r11g", focus: "_1vd41r11h" }, defaultClass: "_1vd41r11f" }, "grey-light": { conditions: { default: "_1vd41r11i", hover: "_1vd41r11j", focus: "_1vd41r11k" }, defaultClass: "_1vd41r11i" }, "grey-medium-light": { conditions: { default: "_1vd41r11l", hover: "_1vd41r11m", focus: "_1vd41r11n" }, defaultClass: "_1vd41r11l" }, "grey-medium": { conditions: { default: "_1vd41r11o", hover: "_1vd41r11p", focus: "_1vd41r11q" }, defaultClass: "_1vd41r11o" }, "grey-medium-dark": { conditions: { default: "_1vd41r11r", hover: "_1vd41r11s", focus: "_1vd41r11t" }, defaultClass: "_1vd41r11r" }, "grey-dark": { conditions: { default: "_1vd41r11u", hover: "_1vd41r11v", focus: "_1vd41r11w" }, defaultClass: "_1vd41r11u" }, "yellow-light": { conditions: { default: "_1vd41r11x", hover: "_1vd41r11y", focus: "_1vd41r11z" }, defaultClass: "_1vd41r11x" }, "yellow-medium": { conditions: { default: "_1vd41r120", hover: "_1vd41r121", focus: "_1vd41r122" }, defaultClass: "_1vd41r120" }, white: { conditions: { default: "_1vd41r123", hover: "_1vd41r124", focus: "_1vd41r125" }, defaultClass: "_1vd41r123" }, black: { conditions: { default: "_1vd41r126", hover: "_1vd41r127", focus: "_1vd41r128" }, defaultClass: "_1vd41r126" } } }, borderColor: { values: { "red-light": { conditions: { default: "_1vd41r129", hover: "_1vd41r12a", focus: "_1vd41r12b" }, defaultClass: "_1vd41r129" }, "red-medium": { conditions: { default: "_1vd41r12c", hover: "_1vd41r12d", focus: "_1vd41r12e" }, defaultClass: "_1vd41r12c" }, "red-dark": { conditions: { default: "_1vd41r12f", hover: "_1vd41r12g", focus: "_1vd41r12h" }, defaultClass: "_1vd41r12f" }, "blue-extra-light": { conditions: { default: "_1vd41r12i", hover: "_1vd41r12j", focus: "_1vd41r12k" }, defaultClass: "_1vd41r12i" }, "blue-light": { conditions: { default: "_1vd41r12l", hover: "_1vd41r12m", focus: "_1vd41r12n" }, defaultClass: "_1vd41r12l" }, "blue-medium": { conditions: { default: "_1vd41r12o", hover: "_1vd41r12p", focus: "_1vd41r12q" }, defaultClass: "_1vd41r12o" }, "blue-dark": { conditions: { default: "_1vd41r12r", hover: "_1vd41r12s", focus: "_1vd41r12t" }, defaultClass: "_1vd41r12r" }, "green-light": { conditions: { default: "_1vd41r12u", hover: "_1vd41r12v", focus: "_1vd41r12w" }, defaultClass: "_1vd41r12u" }, "green-medium": { conditions: { default: "_1vd41r12x", hover: "_1vd41r12y", focus: "_1vd41r12z" }, defaultClass: "_1vd41r12x" }, "green-dark": { conditions: { default: "_1vd41r130", hover: "_1vd41r131", focus: "_1vd41r132" }, defaultClass: "_1vd41r130" }, "purple-light": { conditions: { default: "_1vd41r133", hover: "_1vd41r134", focus: "_1vd41r135" }, defaultClass: "_1vd41r133" }, "purple-medium-light": { conditions: { default: "_1vd41r136", hover: "_1vd41r137", focus: "_1vd41r138" }, defaultClass: "_1vd41r136" }, "purple-medium": { conditions: { default: "_1vd41r139", hover: "_1vd41r13a", focus: "_1vd41r13b" }, defaultClass: "_1vd41r139" }, "purple-dark": { conditions: { default: "_1vd41r13c", hover: "_1vd41r13d", focus: "_1vd41r13e" }, defaultClass: "_1vd41r13c" }, "orange-light": { conditions: { default: "_1vd41r13f", hover: "_1vd41r13g", focus: "_1vd41r13h" }, defaultClass: "_1vd41r13f" }, "orange-medium": { conditions: { default: "_1vd41r13i", hover: "_1vd41r13j", focus: "_1vd41r13k" }, defaultClass: "_1vd41r13i" }, "orange-dark": { conditions: { default: "_1vd41r13l", hover: "_1vd41r13m", focus: "_1vd41r13n" }, defaultClass: "_1vd41r13l" }, "grey-extra-light": { conditions: { default: "_1vd41r13o", hover: "_1vd41r13p", focus: "_1vd41r13q" }, defaultClass: "_1vd41r13o" }, "grey-light": { conditions: { default: "_1vd41r13r", hover: "_1vd41r13s", focus: "_1vd41r13t" }, defaultClass: "_1vd41r13r" }, "grey-medium-light": { conditions: { default: "_1vd41r13u", hover: "_1vd41r13v", focus: "_1vd41r13w" }, defaultClass: "_1vd41r13u" }, "grey-medium": { conditions: { default: "_1vd41r13x", hover: "_1vd41r13y", focus: "_1vd41r13z" }, defaultClass: "_1vd41r13x" }, "grey-medium-dark": { conditions: { default: "_1vd41r140", hover: "_1vd41r141", focus: "_1vd41r142" }, defaultClass: "_1vd41r140" }, "grey-dark": { conditions: { default: "_1vd41r143", hover: "_1vd41r144", focus: "_1vd41r145" }, defaultClass: "_1vd41r143" }, "yellow-light": { conditions: { default: "_1vd41r146", hover: "_1vd41r147", focus: "_1vd41r148" }, defaultClass: "_1vd41r146" }, "yellow-medium": { conditions: { default: "_1vd41r149", hover: "_1vd41r14a", focus: "_1vd41r14b" }, defaultClass: "_1vd41r149" }, white: { conditions: { default: "_1vd41r14c", hover: "_1vd41r14d", focus: "_1vd41r14e" }, defaultClass: "_1vd41r14c" }, black: { conditions: { default: "_1vd41r14f", hover: "_1vd41r14g", focus: "_1vd41r14h" }, defaultClass: "_1vd41r14f" } } }, borderBottomColor: { values: { "red-light": { conditions: { default: "_1vd41r14i", hover: "_1vd41r14j", focus: "_1vd41r14k" }, defaultClass: "_1vd41r14i" }, "red-medium": { conditions: { default: "_1vd41r14l", hover: "_1vd41r14m", focus: "_1vd41r14n" }, defaultClass: "_1vd41r14l" }, "red-dark": { conditions: { default: "_1vd41r14o", hover: "_1vd41r14p", focus: "_1vd41r14q" }, defaultClass: "_1vd41r14o" }, "blue-extra-light": { conditions: { default: "_1vd41r14r", hover: "_1vd41r14s", focus: "_1vd41r14t" }, defaultClass: "_1vd41r14r" }, "blue-light": { conditions: { default: "_1vd41r14u", hover: "_1vd41r14v", focus: "_1vd41r14w" }, defaultClass: "_1vd41r14u" }, "blue-medium": { conditions: { default: "_1vd41r14x", hover: "_1vd41r14y", focus: "_1vd41r14z" }, defaultClass: "_1vd41r14x" }, "blue-dark": { conditions: { default: "_1vd41r150", hover: "_1vd41r151", focus: "_1vd41r152" }, defaultClass: "_1vd41r150" }, "green-light": { conditions: { default: "_1vd41r153", hover: "_1vd41r154", focus: "_1vd41r155" }, defaultClass: "_1vd41r153" }, "green-medium": { conditions: { default: "_1vd41r156", hover: "_1vd41r157", focus: "_1vd41r158" }, defaultClass: "_1vd41r156" }, "green-dark": { conditions: { default: "_1vd41r159", hover: "_1vd41r15a", focus: "_1vd41r15b" }, defaultClass: "_1vd41r159" }, "purple-light": { conditions: { default: "_1vd41r15c", hover: "_1vd41r15d", focus: "_1vd41r15e" }, defaultClass: "_1vd41r15c" }, "purple-medium-light": { conditions: { default: "_1vd41r15f", hover: "_1vd41r15g", focus: "_1vd41r15h" }, defaultClass: "_1vd41r15f" }, "purple-medium": { conditions: { default: "_1vd41r15i", hover: "_1vd41r15j", focus: "_1vd41r15k" }, defaultClass: "_1vd41r15i" }, "purple-dark": { conditions: { default: "_1vd41r15l", hover: "_1vd41r15m", focus: "_1vd41r15n" }, defaultClass: "_1vd41r15l" }, "orange-light": { conditions: { default: "_1vd41r15o", hover: "_1vd41r15p", focus: "_1vd41r15q" }, defaultClass: "_1vd41r15o" }, "orange-medium": { conditions: { default: "_1vd41r15r", hover: "_1vd41r15s", focus: "_1vd41r15t" }, defaultClass: "_1vd41r15r" }, "orange-dark": { conditions: { default: "_1vd41r15u", hover: "_1vd41r15v", focus: "_1vd41r15w" }, defaultClass: "_1vd41r15u" }, "grey-extra-light": { conditions: { default: "_1vd41r15x", hover: "_1vd41r15y", focus: "_1vd41r15z" }, defaultClass: "_1vd41r15x" }, "grey-light": { conditions: { default: "_1vd41r160", hover: "_1vd41r161", focus: "_1vd41r162" }, defaultClass: "_1vd41r160" }, "grey-medium-light": { conditions: { default: "_1vd41r163", hover: "_1vd41r164", focus: "_1vd41r165" }, defaultClass: "_1vd41r163" }, "grey-medium": { conditions: { default: "_1vd41r166", hover: "_1vd41r167", focus: "_1vd41r168" }, defaultClass: "_1vd41r166" }, "grey-medium-dark": { conditions: { default: "_1vd41r169", hover: "_1vd41r16a", focus: "_1vd41r16b" }, defaultClass: "_1vd41r169" }, "grey-dark": { conditions: { default: "_1vd41r16c", hover: "_1vd41r16d", focus: "_1vd41r16e" }, defaultClass: "_1vd41r16c" }, "yellow-light": { conditions: { default: "_1vd41r16f", hover: "_1vd41r16g", focus: "_1vd41r16h" }, defaultClass: "_1vd41r16f" }, "yellow-medium": { conditions: { default: "_1vd41r16i", hover: "_1vd41r16j", focus: "_1vd41r16k" }, defaultClass: "_1vd41r16i" }, white: { conditions: { default: "_1vd41r16l", hover: "_1vd41r16m", focus: "_1vd41r16n" }, defaultClass: "_1vd41r16l" }, black: { conditions: { default: "_1vd41r16o", hover: "_1vd41r16p", focus: "_1vd41r16q" }, defaultClass: "_1vd41r16o" } } }, borderLeftColor: { values: { "red-light": { conditions: { default: "_1vd41r16r", hover: "_1vd41r16s", focus: "_1vd41r16t" }, defaultClass: "_1vd41r16r" }, "red-medium": { conditions: { default: "_1vd41r16u", hover: "_1vd41r16v", focus: "_1vd41r16w" }, defaultClass: "_1vd41r16u" }, "red-dark": { conditions: { default: "_1vd41r16x", hover: "_1vd41r16y", focus: "_1vd41r16z" }, defaultClass: "_1vd41r16x" }, "blue-extra-light": { conditions: { default: "_1vd41r170", hover: "_1vd41r171", focus: "_1vd41r172" }, defaultClass: "_1vd41r170" }, "blue-light": { conditions: { default: "_1vd41r173", hover: "_1vd41r174", focus: "_1vd41r175" }, defaultClass: "_1vd41r173" }, "blue-medium": { conditions: { default: "_1vd41r176", hover: "_1vd41r177", focus: "_1vd41r178" }, defaultClass: "_1vd41r176" }, "blue-dark": { conditions: { default: "_1vd41r179", hover: "_1vd41r17a", focus: "_1vd41r17b" }, defaultClass: "_1vd41r179" }, "green-light": { conditions: { default: "_1vd41r17c", hover: "_1vd41r17d", focus: "_1vd41r17e" }, defaultClass: "_1vd41r17c" }, "green-medium": { conditions: { default: "_1vd41r17f", hover: "_1vd41r17g", focus: "_1vd41r17h" }, defaultClass: "_1vd41r17f" }, "green-dark": { conditions: { default: "_1vd41r17i", hover: "_1vd41r17j", focus: "_1vd41r17k" }, defaultClass: "_1vd41r17i" }, "purple-light": { conditions: { default: "_1vd41r17l", hover: "_1vd41r17m", focus: "_1vd41r17n" }, defaultClass: "_1vd41r17l" }, "purple-medium-light": { conditions: { default: "_1vd41r17o", hover: "_1vd41r17p", focus: "_1vd41r17q" }, defaultClass: "_1vd41r17o" }, "purple-medium": { conditions: { default: "_1vd41r17r", hover: "_1vd41r17s", focus: "_1vd41r17t" }, defaultClass: "_1vd41r17r" }, "purple-dark": { conditions: { default: "_1vd41r17u", hover: "_1vd41r17v", focus: "_1vd41r17w" }, defaultClass: "_1vd41r17u" }, "orange-light": { conditions: { default: "_1vd41r17x", hover: "_1vd41r17y", focus: "_1vd41r17z" }, defaultClass: "_1vd41r17x" }, "orange-medium": { conditions: { default: "_1vd41r180", hover: "_1vd41r181", focus: "_1vd41r182" }, defaultClass: "_1vd41r180" }, "orange-dark": { conditions: { default: "_1vd41r183", hover: "_1vd41r184", focus: "_1vd41r185" }, defaultClass: "_1vd41r183" }, "grey-extra-light": { conditions: { default: "_1vd41r186", hover: "_1vd41r187", focus: "_1vd41r188" }, defaultClass: "_1vd41r186" }, "grey-light": { conditions: { default: "_1vd41r189", hover: "_1vd41r18a", focus: "_1vd41r18b" }, defaultClass: "_1vd41r189" }, "grey-medium-light": { conditions: { default: "_1vd41r18c", hover: "_1vd41r18d", focus: "_1vd41r18e" }, defaultClass: "_1vd41r18c" }, "grey-medium": { conditions: { default: "_1vd41r18f", hover: "_1vd41r18g", focus: "_1vd41r18h" }, defaultClass: "_1vd41r18f" }, "grey-medium-dark": { conditions: { default: "_1vd41r18i", hover: "_1vd41r18j", focus: "_1vd41r18k" }, defaultClass: "_1vd41r18i" }, "grey-dark": { conditions: { default: "_1vd41r18l", hover: "_1vd41r18m", focus: "_1vd41r18n" }, defaultClass: "_1vd41r18l" }, "yellow-light": { conditions: { default: "_1vd41r18o", hover: "_1vd41r18p", focus: "_1vd41r18q" }, defaultClass: "_1vd41r18o" }, "yellow-medium": { conditions: { default: "_1vd41r18r", hover: "_1vd41r18s", focus: "_1vd41r18t" }, defaultClass: "_1vd41r18r" }, white: { conditions: { default: "_1vd41r18u", hover: "_1vd41r18v", focus: "_1vd41r18w" }, defaultClass: "_1vd41r18u" }, black: { conditions: { default: "_1vd41r18x", hover: "_1vd41r18y", focus: "_1vd41r18z" }, defaultClass: "_1vd41r18x" } } }, borderRightColor: { values: { "red-light": { conditions: { default: "_1vd41r190", hover: "_1vd41r191", focus: "_1vd41r192" }, defaultClass: "_1vd41r190" }, "red-medium": { conditions: { default: "_1vd41r193", hover: "_1vd41r194", focus: "_1vd41r195" }, defaultClass: "_1vd41r193" }, "red-dark": { conditions: { default: "_1vd41r196", hover: "_1vd41r197", focus: "_1vd41r198" }, defaultClass: "_1vd41r196" }, "blue-extra-light": { conditions: { default: "_1vd41r199", hover: "_1vd41r19a", focus: "_1vd41r19b" }, defaultClass: "_1vd41r199" }, "blue-light": { conditions: { default: "_1vd41r19c", hover: "_1vd41r19d", focus: "_1vd41r19e" }, defaultClass: "_1vd41r19c" }, "blue-medium": { conditions: { default: "_1vd41r19f", hover: "_1vd41r19g", focus: "_1vd41r19h" }, defaultClass: "_1vd41r19f" }, "blue-dark": { conditions: { default: "_1vd41r19i", hover: "_1vd41r19j", focus: "_1vd41r19k" }, defaultClass: "_1vd41r19i" }, "green-light": { conditions: { default: "_1vd41r19l", hover: "_1vd41r19m", focus: "_1vd41r19n" }, defaultClass: "_1vd41r19l" }, "green-medium": { conditions: { default: "_1vd41r19o", hover: "_1vd41r19p", focus: "_1vd41r19q" }, defaultClass: "_1vd41r19o" }, "green-dark": { conditions: { default: "_1vd41r19r", hover: "_1vd41r19s", focus: "_1vd41r19t" }, defaultClass: "_1vd41r19r" }, "purple-light": { conditions: { default: "_1vd41r19u", hover: "_1vd41r19v", focus: "_1vd41r19w" }, defaultClass: "_1vd41r19u" }, "purple-medium-light": { conditions: { default: "_1vd41r19x", hover: "_1vd41r19y", focus: "_1vd41r19z" }, defaultClass: "_1vd41r19x" }, "purple-medium": { conditions: { default: "_1vd41r1a0", hover: "_1vd41r1a1", focus: "_1vd41r1a2" }, defaultClass: "_1vd41r1a0" }, "purple-dark": { conditions: { default: "_1vd41r1a3", hover: "_1vd41r1a4", focus: "_1vd41r1a5" }, defaultClass: "_1vd41r1a3" }, "orange-light": { conditions: { default: "_1vd41r1a6", hover: "_1vd41r1a7", focus: "_1vd41r1a8" }, defaultClass: "_1vd41r1a6" }, "orange-medium": { conditions: { default: "_1vd41r1a9", hover: "_1vd41r1aa", focus: "_1vd41r1ab" }, defaultClass: "_1vd41r1a9" }, "orange-dark": { conditions: { default: "_1vd41r1ac", hover: "_1vd41r1ad", focus: "_1vd41r1ae" }, defaultClass: "_1vd41r1ac" }, "grey-extra-light": { conditions: { default: "_1vd41r1af", hover: "_1vd41r1ag", focus: "_1vd41r1ah" }, defaultClass: "_1vd41r1af" }, "grey-light": { conditions: { default: "_1vd41r1ai", hover: "_1vd41r1aj", focus: "_1vd41r1ak" }, defaultClass: "_1vd41r1ai" }, "grey-medium-light": { conditions: { default: "_1vd41r1al", hover: "_1vd41r1am", focus: "_1vd41r1an" }, defaultClass: "_1vd41r1al" }, "grey-medium": { conditions: { default: "_1vd41r1ao", hover: "_1vd41r1ap", focus: "_1vd41r1aq" }, defaultClass: "_1vd41r1ao" }, "grey-medium-dark": { conditions: { default: "_1vd41r1ar", hover: "_1vd41r1as", focus: "_1vd41r1at" }, defaultClass: "_1vd41r1ar" }, "grey-dark": { conditions: { default: "_1vd41r1au", hover: "_1vd41r1av", focus: "_1vd41r1aw" }, defaultClass: "_1vd41r1au" }, "yellow-light": { conditions: { default: "_1vd41r1ax", hover: "_1vd41r1ay", focus: "_1vd41r1az" }, defaultClass: "_1vd41r1ax" }, "yellow-medium": { conditions: { default: "_1vd41r1b0", hover: "_1vd41r1b1", focus: "_1vd41r1b2" }, defaultClass: "_1vd41r1b0" }, white: { conditions: { default: "_1vd41r1b3", hover: "_1vd41r1b4", focus: "_1vd41r1b5" }, defaultClass: "_1vd41r1b3" }, black: { conditions: { default: "_1vd41r1b6", hover: "_1vd41r1b7", focus: "_1vd41r1b8" }, defaultClass: "_1vd41r1b6" } } }, borderTopColor: { values: { "red-light": { conditions: { default: "_1vd41r1b9", hover: "_1vd41r1ba", focus: "_1vd41r1bb" }, defaultClass: "_1vd41r1b9" }, "red-medium": { conditions: { default: "_1vd41r1bc", hover: "_1vd41r1bd", focus: "_1vd41r1be" }, defaultClass: "_1vd41r1bc" }, "red-dark": { conditions: { default: "_1vd41r1bf", hover: "_1vd41r1bg", focus: "_1vd41r1bh" }, defaultClass: "_1vd41r1bf" }, "blue-extra-light": { conditions: { default: "_1vd41r1bi", hover: "_1vd41r1bj", focus: "_1vd41r1bk" }, defaultClass: "_1vd41r1bi" }, "blue-light": { conditions: { default: "_1vd41r1bl", hover: "_1vd41r1bm", focus: "_1vd41r1bn" }, defaultClass: "_1vd41r1bl" }, "blue-medium": { conditions: { default: "_1vd41r1bo", hover: "_1vd41r1bp", focus: "_1vd41r1bq" }, defaultClass: "_1vd41r1bo" }, "blue-dark": { conditions: { default: "_1vd41r1br", hover: "_1vd41r1bs", focus: "_1vd41r1bt" }, defaultClass: "_1vd41r1br" }, "green-light": { conditions: { default: "_1vd41r1bu", hover: "_1vd41r1bv", focus: "_1vd41r1bw" }, defaultClass: "_1vd41r1bu" }, "green-medium": { conditions: { default: "_1vd41r1bx", hover: "_1vd41r1by", focus: "_1vd41r1bz" }, defaultClass: "_1vd41r1bx" }, "green-dark": { conditions: { default: "_1vd41r1c0", hover: "_1vd41r1c1", focus: "_1vd41r1c2" }, defaultClass: "_1vd41r1c0" }, "purple-light": { conditions: { default: "_1vd41r1c3", hover: "_1vd41r1c4", focus: "_1vd41r1c5" }, defaultClass: "_1vd41r1c3" }, "purple-medium-light": { conditions: { default: "_1vd41r1c6", hover: "_1vd41r1c7", focus: "_1vd41r1c8" }, defaultClass: "_1vd41r1c6" }, "purple-medium": { conditions: { default: "_1vd41r1c9", hover: "_1vd41r1ca", focus: "_1vd41r1cb" }, defaultClass: "_1vd41r1c9" }, "purple-dark": { conditions: { default: "_1vd41r1cc", hover: "_1vd41r1cd", focus: "_1vd41r1ce" }, defaultClass: "_1vd41r1cc" }, "orange-light": { conditions: { default: "_1vd41r1cf", hover: "_1vd41r1cg", focus: "_1vd41r1ch" }, defaultClass: "_1vd41r1cf" }, "orange-medium": { conditions: { default: "_1vd41r1ci", hover: "_1vd41r1cj", focus: "_1vd41r1ck" }, defaultClass: "_1vd41r1ci" }, "orange-dark": { conditions: { default: "_1vd41r1cl", hover: "_1vd41r1cm", focus: "_1vd41r1cn" }, defaultClass: "_1vd41r1cl" }, "grey-extra-light": { conditions: { default: "_1vd41r1co", hover: "_1vd41r1cp", focus: "_1vd41r1cq" }, defaultClass: "_1vd41r1co" }, "grey-light": { conditions: { default: "_1vd41r1cr", hover: "_1vd41r1cs", focus: "_1vd41r1ct" }, defaultClass: "_1vd41r1cr" }, "grey-medium-light": { conditions: { default: "_1vd41r1cu", hover: "_1vd41r1cv", focus: "_1vd41r1cw" }, defaultClass: "_1vd41r1cu" }, "grey-medium": { conditions: { default: "_1vd41r1cx", hover: "_1vd41r1cy", focus: "_1vd41r1cz" }, defaultClass: "_1vd41r1cx" }, "grey-medium-dark": { conditions: { default: "_1vd41r1d0", hover: "_1vd41r1d1", focus: "_1vd41r1d2" }, defaultClass: "_1vd41r1d0" }, "grey-dark": { conditions: { default: "_1vd41r1d3", hover: "_1vd41r1d4", focus: "_1vd41r1d5" }, defaultClass: "_1vd41r1d3" }, "yellow-light": { conditions: { default: "_1vd41r1d6", hover: "_1vd41r1d7", focus: "_1vd41r1d8" }, defaultClass: "_1vd41r1d6" }, "yellow-medium": { conditions: { default: "_1vd41r1d9", hover: "_1vd41r1da", focus: "_1vd41r1db" }, defaultClass: "_1vd41r1d9" }, white: { conditions: { default: "_1vd41r1dc", hover: "_1vd41r1dd", focus: "_1vd41r1de" }, defaultClass: "_1vd41r1dc" }, black: { conditions: { default: "_1vd41r1df", hover: "_1vd41r1dg", focus: "_1vd41r1dh" }, defaultClass: "_1vd41r1df" } } }, borderRadius: { values: { square: { conditions: { default: "_1vd41r1di", hover: "_1vd41r1dj", focus: "_1vd41r1dk" }, defaultClass: "_1vd41r1di" }, rounded: { conditions: { default: "_1vd41r1dl", hover: "_1vd41r1dm", focus: "_1vd41r1dn" }, defaultClass: "_1vd41r1dl" } } }, borderWidth: { values: { standard: { conditions: { default: "_1vd41r1do", hover: "_1vd41r1dp", focus: "_1vd41r1dq" }, defaultClass: "_1vd41r1do" } } }, color: { values: { "red-light": { conditions: { default: "_1vd41r1dr", hover: "_1vd41r1ds", focus: "_1vd41r1dt" }, defaultClass: "_1vd41r1dr" }, "red-medium": { conditions: { default: "_1vd41r1du", hover: "_1vd41r1dv", focus: "_1vd41r1dw" }, defaultClass: "_1vd41r1du" }, "red-dark": { conditions: { default: "_1vd41r1dx", hover: "_1vd41r1dy", focus: "_1vd41r1dz" }, defaultClass: "_1vd41r1dx" }, "blue-extra-light": { conditions: { default: "_1vd41r1e0", hover: "_1vd41r1e1", focus: "_1vd41r1e2" }, defaultClass: "_1vd41r1e0" }, "blue-light": { conditions: { default: "_1vd41r1e3", hover: "_1vd41r1e4", focus: "_1vd41r1e5" }, defaultClass: "_1vd41r1e3" }, "blue-medium": { conditions: { default: "_1vd41r1e6", hover: "_1vd41r1e7", focus: "_1vd41r1e8" }, defaultClass: "_1vd41r1e6" }, "blue-dark": { conditions: { default: "_1vd41r1e9", hover: "_1vd41r1ea", focus: "_1vd41r1eb" }, defaultClass: "_1vd41r1e9" }, "green-light": { conditions: { default: "_1vd41r1ec", hover: "_1vd41r1ed", focus: "_1vd41r1ee" }, defaultClass: "_1vd41r1ec" }, "green-medium": { conditions: { default: "_1vd41r1ef", hover: "_1vd41r1eg", focus: "_1vd41r1eh" }, defaultClass: "_1vd41r1ef" }, "green-dark": { conditions: { default: "_1vd41r1ei", hover: "_1vd41r1ej", focus: "_1vd41r1ek" }, defaultClass: "_1vd41r1ei" }, "purple-light": { conditions: { default: "_1vd41r1el", hover: "_1vd41r1em", focus: "_1vd41r1en" }, defaultClass: "_1vd41r1el" }, "purple-medium-light": { conditions: { default: "_1vd41r1eo", hover: "_1vd41r1ep", focus: "_1vd41r1eq" }, defaultClass: "_1vd41r1eo" }, "purple-medium": { conditions: { default: "_1vd41r1er", hover: "_1vd41r1es", focus: "_1vd41r1et" }, defaultClass: "_1vd41r1er" }, "purple-dark": { conditions: { default: "_1vd41r1eu", hover: "_1vd41r1ev", focus: "_1vd41r1ew" }, defaultClass: "_1vd41r1eu" }, "orange-light": { conditions: { default: "_1vd41r1ex", hover: "_1vd41r1ey", focus: "_1vd41r1ez" }, defaultClass: "_1vd41r1ex" }, "orange-medium": { conditions: { default: "_1vd41r1f0", hover: "_1vd41r1f1", focus: "_1vd41r1f2" }, defaultClass: "_1vd41r1f0" }, "orange-dark": { conditions: { default: "_1vd41r1f3", hover: "_1vd41r1f4", focus: "_1vd41r1f5" }, defaultClass: "_1vd41r1f3" }, "grey-extra-light": { conditions: { default: "_1vd41r1f6", hover: "_1vd41r1f7", focus: "_1vd41r1f8" }, defaultClass: "_1vd41r1f6" }, "grey-light": { conditions: { default: "_1vd41r1f9", hover: "_1vd41r1fa", focus: "_1vd41r1fb" }, defaultClass: "_1vd41r1f9" }, "grey-medium-light": { conditions: { default: "_1vd41r1fc", hover: "_1vd41r1fd", focus: "_1vd41r1fe" }, defaultClass: "_1vd41r1fc" }, "grey-medium": { conditions: { default: "_1vd41r1ff", hover: "_1vd41r1fg", focus: "_1vd41r1fh" }, defaultClass: "_1vd41r1ff" }, "grey-medium-dark": { conditions: { default: "_1vd41r1fi", hover: "_1vd41r1fj", focus: "_1vd41r1fk" }, defaultClass: "_1vd41r1fi" }, "grey-dark": { conditions: { default: "_1vd41r1fl", hover: "_1vd41r1fm", focus: "_1vd41r1fn" }, defaultClass: "_1vd41r1fl" }, "yellow-light": { conditions: { default: "_1vd41r1fo", hover: "_1vd41r1fp", focus: "_1vd41r1fq" }, defaultClass: "_1vd41r1fo" }, "yellow-medium": { conditions: { default: "_1vd41r1fr", hover: "_1vd41r1fs", focus: "_1vd41r1ft" }, defaultClass: "_1vd41r1fr" }, white: { conditions: { default: "_1vd41r1fu", hover: "_1vd41r1fv", focus: "_1vd41r1fw" }, defaultClass: "_1vd41r1fu" }, black: { conditions: { default: "_1vd41r1fx", hover: "_1vd41r1fy", focus: "_1vd41r1fz" }, defaultClass: "_1vd41r1fx" } } }, fontSize: { values: { "body-sm": { conditions: { default: "_1vd41r1g0", hover: "_1vd41r1g1", focus: "_1vd41r1g2" }, defaultClass: "_1vd41r1g0" }, "body-md": { conditions: { default: "_1vd41r1g3", hover: "_1vd41r1g4", focus: "_1vd41r1g5" }, defaultClass: "_1vd41r1g3" }, "title-sm": { conditions: { default: "_1vd41r1g6", hover: "_1vd41r1g7", focus: "_1vd41r1g8" }, defaultClass: "_1vd41r1g6" }, "title-md": { conditions: { default: "_1vd41r1g9", hover: "_1vd41r1ga", focus: "_1vd41r1gb" }, defaultClass: "_1vd41r1g9" }, "title-lg": { conditions: { default: "_1vd41r1gc", hover: "_1vd41r1gd", focus: "_1vd41r1ge" }, defaultClass: "_1vd41r1gc" }, "title-xl": { conditions: { default: "_1vd41r1gf", hover: "_1vd41r1gg", focus: "_1vd41r1gh" }, defaultClass: "_1vd41r1gf" } } }, fontWeight: { values: { normal: { conditions: { default: "_1vd41r1gi", hover: "_1vd41r1gj", focus: "_1vd41r1gk" }, defaultClass: "_1vd41r1gi" }, bold: { conditions: { default: "_1vd41r1gl", hover: "_1vd41r1gm", focus: "_1vd41r1gn" }, defaultClass: "_1vd41r1gl" } } }, lineHeight: { values: { "body-sm": { conditions: { default: "_1vd41r1go", hover: "_1vd41r1gp", focus: "_1vd41r1gq" }, defaultClass: "_1vd41r1go" }, "body-md": { conditions: { default: "_1vd41r1gr", hover: "_1vd41r1gs", focus: "_1vd41r1gt" }, defaultClass: "_1vd41r1gr" }, "title-sm": { conditions: { default: "_1vd41r1gu", hover: "_1vd41r1gv", focus: "_1vd41r1gw" }, defaultClass: "_1vd41r1gu" }, "title-md": { conditions: { default: "_1vd41r1gx", hover: "_1vd41r1gy", focus: "_1vd41r1gz" }, defaultClass: "_1vd41r1gx" }, "title-lg": { conditions: { default: "_1vd41r1h0", hover: "_1vd41r1h1", focus: "_1vd41r1h2" }, defaultClass: "_1vd41r1h0" }, "title-xl": { conditions: { default: "_1vd41r1h3", hover: "_1vd41r1h4", focus: "_1vd41r1h5" }, defaultClass: "_1vd41r1h3" } } }, marginBottom: { values: { xs: { conditions: { default: "_1vd41r1h6", hover: "_1vd41r1h7", focus: "_1vd41r1h8" }, defaultClass: "_1vd41r1h6" }, sm: { conditions: { default: "_1vd41r1h9", hover: "_1vd41r1ha", focus: "_1vd41r1hb" }, defaultClass: "_1vd41r1h9" }, md: { conditions: { default: "_1vd41r1hc", hover: "_1vd41r1hd", focus: "_1vd41r1he" }, defaultClass: "_1vd41r1hc" }, lg: { conditions: { default: "_1vd41r1hf", hover: "_1vd41r1hg", focus: "_1vd41r1hh" }, defaultClass: "_1vd41r1hf" } } }, marginLeft: { values: { xs: { conditions: { default: "_1vd41r1hi", hover: "_1vd41r1hj", focus: "_1vd41r1hk" }, defaultClass: "_1vd41r1hi" }, sm: { conditions: { default: "_1vd41r1hl", hover: "_1vd41r1hm", focus: "_1vd41r1hn" }, defaultClass: "_1vd41r1hl" }, md: { conditions: { default: "_1vd41r1ho", hover: "_1vd41r1hp", focus: "_1vd41r1hq" }, defaultClass: "_1vd41r1ho" }, lg: { conditions: { default: "_1vd41r1hr", hover: "_1vd41r1hs", focus: "_1vd41r1ht" }, defaultClass: "_1vd41r1hr" } } }, marginRight: { values: { xs: { conditions: { default: "_1vd41r1hu", hover: "_1vd41r1hv", focus: "_1vd41r1hw" }, defaultClass: "_1vd41r1hu" }, sm: { conditions: { default: "_1vd41r1hx", hover: "_1vd41r1hy", focus: "_1vd41r1hz" }, defaultClass: "_1vd41r1hx" }, md: { conditions: { default: "_1vd41r1i0", hover: "_1vd41r1i1", focus: "_1vd41r1i2" }, defaultClass: "_1vd41r1i0" }, lg: { conditions: { default: "_1vd41r1i3", hover: "_1vd41r1i4", focus: "_1vd41r1i5" }, defaultClass: "_1vd41r1i3" } } }, marginTop: { values: { xs: { conditions: { default: "_1vd41r1i6", hover: "_1vd41r1i7", focus: "_1vd41r1i8" }, defaultClass: "_1vd41r1i6" }, sm: { conditions: { default: "_1vd41r1i9", hover: "_1vd41r1ia", focus: "_1vd41r1ib" }, defaultClass: "_1vd41r1i9" }, md: { conditions: { default: "_1vd41r1ic", hover: "_1vd41r1id", focus: "_1vd41r1ie" }, defaultClass: "_1vd41r1ic" }, lg: { conditions: { default: "_1vd41r1if", hover: "_1vd41r1ig", focus: "_1vd41r1ih" }, defaultClass: "_1vd41r1if" } } }, paddingBottom: { values: { xs: { conditions: { default: "_1vd41r1ii", hover: "_1vd41r1ij", focus: "_1vd41r1ik" }, defaultClass: "_1vd41r1ii" }, sm: { conditions: { default: "_1vd41r1il", hover: "_1vd41r1im", focus: "_1vd41r1in" }, defaultClass: "_1vd41r1il" }, md: { conditions: { default: "_1vd41r1io", hover: "_1vd41r1ip", focus: "_1vd41r1iq" }, defaultClass: "_1vd41r1io" }, lg: { conditions: { default: "_1vd41r1ir", hover: "_1vd41r1is", focus: "_1vd41r1it" }, defaultClass: "_1vd41r1ir" } } }, paddingLeft: { values: { xs: { conditions: { default: "_1vd41r1iu", hover: "_1vd41r1iv", focus: "_1vd41r1iw" }, defaultClass: "_1vd41r1iu" }, sm: { conditions: { default: "_1vd41r1ix", hover: "_1vd41r1iy", focus: "_1vd41r1iz" }, defaultClass: "_1vd41r1ix" }, md: { conditions: { default: "_1vd41r1j0", hover: "_1vd41r1j1", focus: "_1vd41r1j2" }, defaultClass: "_1vd41r1j0" }, lg: { conditions: { default: "_1vd41r1j3", hover: "_1vd41r1j4", focus: "_1vd41r1j5" }, defaultClass: "_1vd41r1j3" } } }, paddingRight: { values: { xs: { conditions: { default: "_1vd41r1j6", hover: "_1vd41r1j7", focus: "_1vd41r1j8" }, defaultClass: "_1vd41r1j6" }, sm: { conditions: { default: "_1vd41r1j9", hover: "_1vd41r1ja", focus: "_1vd41r1jb" }, defaultClass: "_1vd41r1j9" }, md: { conditions: { default: "_1vd41r1jc", hover: "_1vd41r1jd", focus: "_1vd41r1je" }, defaultClass: "_1vd41r1jc" }, lg: { conditions: { default: "_1vd41r1jf", hover: "_1vd41r1jg", focus: "_1vd41r1jh" }, defaultClass: "_1vd41r1jf" } } }, paddingTop: { values: { xs: { conditions: { default: "_1vd41r1ji", hover: "_1vd41r1jj", focus: "_1vd41r1jk" }, defaultClass: "_1vd41r1ji" }, sm: { conditions: { default: "_1vd41r1jl", hover: "_1vd41r1jm", focus: "_1vd41r1jn" }, defaultClass: "_1vd41r1jl" }, md: { conditions: { default: "_1vd41r1jo", hover: "_1vd41r1jp", focus: "_1vd41r1jq" }, defaultClass: "_1vd41r1jo" }, lg: { conditions: { default: "_1vd41r1jr", hover: "_1vd41r1js", focus: "_1vd41r1jt" }, defaultClass: "_1vd41r1jr" } } } } });
82
+ Object.freeze({
83
+ color: {
84
+ red: { light: "#fbe6ea", medium: "#de002e", dark: "#a30d2d" },
85
+ blue: {
86
+ "extra-light": "#f2f8fb",
87
+ light: "#e6f2f8",
88
+ medium: "#007db8",
89
+ dark: "#09638d"
90
+ },
91
+ green: { light: "#e7f3ec", medium: "#0b8940", dark: "#106b39" },
92
+ purple: {
93
+ light: "#f4ecf2",
94
+ "medium-light": "#e3d0de",
95
+ medium: "#91467f",
96
+ dark: "#6e3c65"
97
+ },
98
+ orange: { light: "#fcf1e7", medium: "#e7760b", dark: "#aa5e14" },
99
+ grey: {
100
+ "extra-light": "#f3f4f4",
101
+ light: "#e9e9ea",
102
+ "medium-light": "#d2d4d4",
103
+ medium: "#717779",
104
+ "medium-dark": "#4b5356",
105
+ dark: "#1f282c"
106
+ },
107
+ yellow: { light: "#fff8e0", medium: "#ffcc00" },
108
+ white: "#ffffff",
109
+ black: "#000000"
110
+ },
111
+ grid: { columns: { standard: 12 } },
112
+ size: {
113
+ border: {
114
+ radius: { square: "0", rounded: "0.25rem" },
115
+ width: { standard: "0.0625rem" }
116
+ },
117
+ grid: { gutter: "1rem" },
118
+ spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "2rem" },
119
+ type: {
120
+ "body-sm": { font: "0.75rem", line: "1.125rem" },
121
+ "body-md": { font: "0.875rem", line: "1.25rem" },
122
+ "title-sm": { font: "1rem", line: "1rem" },
123
+ "title-md": { font: "1.125rem", line: "1.125rem" },
124
+ "title-lg": { font: "1.25rem", line: "1.25rem" },
125
+ "title-xl": { font: "1.5rem", line: "1.5rem" }
126
+ }
127
+ },
128
+ type: { weight: { normal: 400, bold: 600 } }
129
+ });
130
+ var V = "_85dplj0", W = "_85dplj1";
131
+ function X(d, t, r) {
132
+ return t in d ? Object.defineProperty(d, t, {
133
+ value: r,
134
+ enumerable: !0,
135
+ configurable: !0,
136
+ writable: !0
137
+ }) : d[t] = r, d;
138
+ }
139
+ function E(d, t) {
140
+ var r = Object.keys(d);
141
+ if (Object.getOwnPropertySymbols) {
142
+ var e = Object.getOwnPropertySymbols(d);
143
+ t && (e = e.filter(function(o) {
144
+ return Object.getOwnPropertyDescriptor(d, o).enumerable;
145
+ })), r.push.apply(r, e);
146
+ }
147
+ return r;
148
+ }
149
+ function R(d) {
150
+ for (var t = 1; t < arguments.length; t++) {
151
+ var r = arguments[t] != null ? arguments[t] : {};
152
+ t % 2 ? E(Object(r), !0).forEach(function(e) {
153
+ X(d, e, r[e]);
154
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(d, Object.getOwnPropertyDescriptors(r)) : E(Object(r)).forEach(function(e) {
155
+ Object.defineProperty(d, e, Object.getOwnPropertyDescriptor(r, e));
156
+ });
157
+ }
158
+ return d;
159
+ }
160
+ var J = (d, t, r) => {
161
+ for (var e of Object.keys(d)) {
162
+ var o;
163
+ if (d[e] !== ((o = t[e]) !== null && o !== void 0 ? o : r[e]))
164
+ return !1;
165
+ }
166
+ return !0;
167
+ }, y = (d) => (t) => {
168
+ var r = d.defaultClassName, e = R(R({}, d.defaultVariants), t);
169
+ for (var o in e) {
170
+ var u, l = (u = e[o]) !== null && u !== void 0 ? u : d.defaultVariants[o];
171
+ if (l != null) {
172
+ var i = l;
173
+ typeof i == "boolean" && (i = i === !0 ? "true" : "false");
174
+ var s = d.variantClassNames[o][i];
175
+ s && (r += " " + s);
176
+ }
177
+ }
178
+ for (var [n, _] of d.compoundVariants)
179
+ J(n, e, d.defaultVariants) && (r += " " + _);
180
+ return r;
181
+ }, Q = y({ defaultClassName: "_1k4ncnf4", variantClassNames: { error: { true: "_1k4ncnf5" }, warning: { true: "_1k4ncnf6" }, disabled: { true: "_1k4ncnf7" } }, defaultVariants: { error: !1, warning: !1, disabled: !1 }, compoundVariants: [] }), U = "_1k4ncnf0", Z = y({ defaultClassName: "_1k4ncnf1", variantClassNames: { disabled: { true: "_1k4ncnf2" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), $ = "_1k4ncnf3", z = y({ defaultClassName: "", variantClassNames: { error: { true: "_1k4ncnf8" }, warning: { true: "_1k4ncnf9" }, disabled: { true: "_1k4ncnfa" } }, defaultVariants: { error: !1, disabled: !1, warning: !1 }, compoundVariants: [] }), d1 = "_1k4ncnfb", r1 = "_1k4ncnfc", e1 = "_1k4ncnfe", t1 = "_1k4ncnfd";
182
+ function P({
183
+ className: d,
184
+ href: t,
185
+ icon: r,
186
+ error: e = !1,
187
+ errorIcon: o,
188
+ title: u,
189
+ warning: l = !1,
190
+ warningIcon: i,
191
+ disabled: s = !1,
192
+ target: n,
193
+ onClick: _,
194
+ ...c
195
+ }) {
196
+ return /* @__PURE__ */ a.createElement("div", {
197
+ className: v(G[3], U, d),
198
+ ...c
199
+ }, /* @__PURE__ */ a.createElement("a", {
200
+ href: s ? void 0 : t,
201
+ className: v(Q({ error: e, warning: l, disabled: s }), W),
202
+ target: n,
203
+ onClick: _
204
+ }, (l || e) && /* @__PURE__ */ a.createElement("div", {
205
+ className: d1
206
+ }, l && (i ? C(i) : /* @__PURE__ */ a.createElement(p, {
207
+ icon: "status-warning",
208
+ className: v(z({ warning: l, disabled: s }))
209
+ })), e && (o ? C(o) : /* @__PURE__ */ a.createElement(p, {
210
+ icon: "ban",
211
+ className: v(z({ error: e, disabled: s }))
212
+ }))), /* @__PURE__ */ a.createElement("div", null, /* @__PURE__ */ a.createElement("div", {
213
+ className: v($)
214
+ }, typeof r == "string" ? /* @__PURE__ */ a.createElement("img", {
215
+ className: v(Z({ disabled: s })),
216
+ src: r,
217
+ alt: ""
218
+ }) : C(r)), /* @__PURE__ */ a.createElement("div", {
219
+ className: v(r1)
220
+ }, /* @__PURE__ */ a.createElement("p", {
221
+ className: v(t1)
222
+ }, u, n === "_blank" && /* @__PURE__ */ a.createElement(p, {
223
+ icon: "tabs",
224
+ className: v(e1)
225
+ }))))));
226
+ }
227
+ D.set(P, {
228
+ name: "Content Tile",
229
+ props: {
230
+ href: { type: "string" },
231
+ icon: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 },
232
+ error: { type: "boolean", default: "false" },
233
+ errorIcon: { type: "React.ReactNode | (() => React.ReactNode)" },
234
+ title: { type: "string", required: !0 },
235
+ warning: { type: "boolean", default: "false" },
236
+ warningIcon: { type: "React.ReactNode | (() => React.ReactNode)" },
237
+ disabled: { type: "boolean", default: "false" },
238
+ target: { type: "string" },
239
+ onClick: { type: "() => void" }
240
+ }
241
+ });
242
+ function A({
243
+ children: d,
244
+ className: t,
245
+ ...r
246
+ }) {
247
+ return /* @__PURE__ */ a.createElement("div", {
248
+ className: v(V, t),
249
+ ...r
250
+ }, d);
251
+ }
252
+ D.set(A, { name: "Content Tile List" });
253
+ const o1 = {
254
+ components: [P, A],
255
+ examples: {
256
+ basic: {
257
+ label: "Basic",
258
+ examples: {
259
+ basic: {
260
+ react: m`
261
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
262
+
263
+ function Component() {
264
+ const apps = [
265
+ {
266
+ name: "App Manager",
267
+ warning: false,
268
+ error: false,
269
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg",
270
+ },
271
+ {
272
+ name: "Assortment",
273
+ warning: false,
274
+ error: false,
275
+ href: "https://www.google.com",
276
+ target: "_blank",
277
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg",
278
+ },
279
+ {
280
+ name: "Community",
281
+ warning: false,
282
+ error: false,
283
+ onClick: () => console.log("Community"),
284
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg",
285
+ },
286
+ {
287
+ name: "Design System",
288
+ warning: false,
289
+ error: true,
290
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg",
291
+ },
292
+ {
293
+ name: "Nexus",
294
+ warning: false,
295
+ error: false,
296
+ disabled: true,
297
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg",
298
+ },
299
+ {
300
+ name: "Testing & Certification",
301
+ warning: true,
302
+ error: false,
303
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg",
304
+ },
305
+ ];
306
+
307
+ return (
308
+ <>
309
+ <ContentTileList>
310
+ {apps.map((app, index) => {
311
+ return (
312
+ <ContentTile
313
+ key={index}
314
+ title={app.name}
315
+ warning={app.warning}
316
+ error={app.error}
317
+ href={app.href}
318
+ target={app.target}
319
+ disabled={app.disabled}
320
+ icon={app.icon}
321
+ onClick={app.onClick}
322
+ />
323
+ );
324
+ })}
325
+ </ContentTileList>
326
+ </>
327
+ );
328
+ }
329
+ `
330
+ }
331
+ }
332
+ },
333
+ singleTile: {
334
+ label: "Single Tile",
335
+ examples: {
336
+ basic: {
337
+ react: m`
338
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
339
+ function Component() {
340
+ return (
341
+ <>
342
+ <ContentTileList>
343
+ <ContentTile
344
+ title="Design System"
345
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg"}
346
+ onClick={() => console.log("Go to Design System")}
347
+ />
348
+ </ContentTileList>
349
+ </>
350
+ )
351
+ }
352
+ `
353
+ },
354
+ error: {
355
+ react: m`
356
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
357
+
358
+ function Component() {
359
+ return (
360
+ <>
361
+ <ContentTileList>
362
+ <ContentTile
363
+ title="Assortment"
364
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg"}
365
+ error
366
+ id="error-app"
367
+ />
368
+ </ContentTileList>
369
+ <SpsTooltip for="error-app" title="Error">
370
+ Your application has been suspended
371
+ </SpsTooltip>
372
+ </>
373
+ )
374
+ }
375
+ `
376
+ }
377
+ }
378
+ },
379
+ sortableTiles: {
380
+ label: "Sortable Tiles",
381
+ examples: {
382
+ basic: {
383
+ react: m`
384
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
385
+ import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
386
+ import { grid } from "@sps-woodland/tokens";
387
+
388
+ function Component() {
389
+ const [sort, setSort] = React.useState([{ key: 'name', direction: SortDirection.ASCENDING }]);
390
+
391
+ const apps = React.useMemo(() => [
392
+ {
393
+ name: "App Manager",
394
+ warning: false,
395
+ error: false,
396
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg",
397
+ },
398
+ {
399
+ name: "Assortment",
400
+ warning: false,
401
+ error: false,
402
+ href: "https://www.google.com",
403
+ target: "_blank",
404
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg",
405
+ },
406
+ {
407
+ name: "Community",
408
+ warning: false,
409
+ error: false,
410
+ onClick: () => console.log("Community"),
411
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg",
412
+ },
413
+ {
414
+ name: "Design System",
415
+ warning: false,
416
+ error: true,
417
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg",
418
+ },
419
+ {
420
+ name: "Nexus",
421
+ warning: false,
422
+ error: false,
423
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg",
424
+ },
425
+ {
426
+ name: "Testing & Certification",
427
+ warning: true,
428
+ error: false,
429
+ icon: "https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg",
430
+ },
431
+ ].sort((a, b) => {
432
+ if (!sort.length) {
433
+ return 0;
434
+ }
435
+
436
+ const [{ key, direction }] = sort;
437
+
438
+ // straightforward sort by name
439
+ if (key === 'name') {
440
+ if (a.name < b.name) {
441
+ return direction === SortDirection.ASCENDING ? -1 : 1;
442
+ } else if (a.name > b.name) {
443
+ return direction === SortDirection.ASCENDING ? 1 : -1;
444
+ }
445
+ }
446
+
447
+ // custom sort by status
448
+ if (key === 'status') {
449
+ if (+a.error + +a.warning < +b.error + +b.warning) {
450
+ return direction === SortDirection.ASCENDING ? -1 : 1;
451
+ } else if (+a.error + +a.warning > +b.error + +b.warning) {
452
+ return direction === SortDirection.ASCENDING ? 1 : -1;
453
+ }
454
+ }
455
+
456
+ return 0;
457
+ }), [sort]);
458
+
459
+ return (
460
+ <div className={grid.root}>
461
+ <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
462
+ <SortingHeaderCell sortKey="name">
463
+ Name
464
+ </SortingHeaderCell>
465
+ <SortingHeaderCell sortKey="status">
466
+ Status
467
+ </SortingHeaderCell>
468
+ </SortingHeader>
469
+
470
+ <ContentTileList className={grid[12]}>
471
+ {apps.map((app, index) => {
472
+ return (
473
+ <ContentTile
474
+ key={index}
475
+ title={app.name}
476
+ warning={app.warning}
477
+ error={app.error}
478
+ href={app.href}
479
+ target={app.target}
480
+ icon={app.icon}
481
+ onClick={app.onClick}
482
+ />
483
+ )
484
+ })}
485
+ </ContentTileList>
486
+ </div>
487
+ )
488
+ }
489
+ `
490
+ }
491
+ }
492
+ }
493
+ }
494
+ }, v1 = {
495
+ "Content Tiles": o1
496
+ };
497
+ export {
498
+ P as ContentTile,
499
+ A as ContentTileList,
500
+ v1 as MANIFEST
501
+ };
package/lib/manifest.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ComponentManifest } from "@sps-woodland/core";
2
+ export declare const MANIFEST: ComponentManifest;
package/lib/style.css ADDED
@@ -0,0 +1 @@
1
+ ._85dplj0{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}._85dplj1{color:#000}._85dplj1:hover{text-decoration:none;color:#000}._1k4ncnf0{transition:all .25s ease}._1k4ncnf1{height:3.75rem;width:3.75rem}._1k4ncnf2{opacity:.25}._1k4ncnf3{height:3.75rem;width:3.75rem;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:1rem}._1k4ncnf4{display:block;background-color:#fff;border-radius:.25rem;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;cursor:pointer;height:8.625rem;text-decoration:none}._1k4ncnf4:hover{border-color:#007db8;color:#000}._1k4ncnf5{border-color:#de002e}._1k4ncnf5:hover{border-color:#de002e;cursor:not-allowed}._1k4ncnf6{border-color:#e7760b}._1k4ncnf7{border-color:#d2d4d4;background-color:#f3f4f4;color:#d2d4d4}._1k4ncnf7:hover{border-color:#d2d4d4;cursor:not-allowed}._1k4ncnf8{color:#de002e}._1k4ncnf9{color:#e7760b}._1k4ncnfa{color:#717779}._1k4ncnfb{position:absolute;padding:.5rem}._1k4ncnfc{text-align:center;padding-left:.5rem;padding-right:.5rem}._1k4ncnfd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._1k4ncnfe{text-align:center;padding:.5rem;color:#007db8}
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@sps-woodland/content-tiles",
3
+ "description": "SPS Woodland Design System content-tile and content tile list components.",
4
+ "version": "7.0.0",
5
+ "author": "SPS Commerce",
6
+ "license": "UNLICENSED",
7
+ "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/content-tiles",
8
+ "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-tiles#readme",
9
+ "main": "./lib/index.es.js",
10
+ "module": "./lib/index.es.js",
11
+ "types": "./lib/index.d.ts",
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "peerDependencies": {
16
+ "@sps-woodland/core": "7.0.0",
17
+ "@sps-woodland/tokens": "7.0.0",
18
+ "@spscommerce/utils": "^6.12.1",
19
+ "react": "^16.9.0",
20
+ "react-dom": "^16.9.0"
21
+ },
22
+ "devDependencies": {
23
+ "@sps-woodland/core": "7.0.0",
24
+ "@sps-woodland/tokens": "7.0.0",
25
+ "@spscommerce/utils": "^6.12.1",
26
+ "@spscommerce/ds-tokens": "^6.33.0",
27
+ "@vanilla-extract/css": "^1.9.1",
28
+ "@vanilla-extract/recipes": "^0.2.5",
29
+ "react": "^16.9.0",
30
+ "react-dom": "^16.9.0"
31
+ },
32
+ "scripts": {
33
+ "build": "pnpm run build:js && pnpm run build:types",
34
+ "build:js": "vite build",
35
+ "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
36
+ "watch": "vite build --watch",
37
+ "clean": "git clean -fdX",
38
+ "pub": "node ../../../scripts/publish-package.js"
39
+ }
40
+ }
package/vite.config.js ADDED
@@ -0,0 +1,21 @@
1
+ import path from "path";
2
+ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
+ import { defineConfig } from "vite";
4
+
5
+ import pkg from "./package.json";
6
+
7
+ export default defineConfig({
8
+ plugins: [vanillaExtractPlugin()],
9
+ build: {
10
+ lib: {
11
+ entry: path.resolve(__dirname, "src/index.ts"),
12
+ formats: ["es", "cjs"],
13
+ fileName: (format) => `index.${format}.js`,
14
+ },
15
+ outDir: path.resolve(__dirname, "./lib"),
16
+ emptyOutDir: false,
17
+ rollupOptions: {
18
+ external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
19
+ },
20
+ },
21
+ });