enjanga-components-library 1.0.11 → 1.0.14

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 (3) hide show
  1. package/README.md +48 -6
  2. package/dist/styles.css +1 -0
  3. package/package.json +6 -7
package/README.md CHANGED
@@ -6,6 +6,22 @@ A reusable React component library built for Next.js 13+ applications, implement
6
6
 
7
7
  > ⚠️ **Important:** This library is built on top of the [IBM Carbon Design System](https://carbondesignsystem.com/). To function correctly, **Carbon must be installed and configured** in the consuming project.
8
8
 
9
+ ---
10
+
11
+ ## 🔗 Dependency on enjanga-core-setup
12
+
13
+ This library depends on **[enjanga-core-setup](https://github.com/ericnjanga/enjanga-core-setup)** for design tokens, Carbon utilities, and shared SASS configuration.
14
+ - `enjanga-core-setup` bundles Carbon’s design tokens (spacing, type, colors, motion, grid, etc.) and forwards them through a single entry point:
15
+
16
+ ```scss
17
+ @use 'enjanga-core-setup/styles' as core;
18
+ ```
19
+
20
+ - Components in this library rely on these tokens to ensure **consistent theming, spacing, and typography** across all consuming projects.
21
+ - This separation keeps **core design tokens/utilities** (in `enjanga-core-setup`) independent from **components** (in `enjanga-components-library`).
22
+
23
+ ---
24
+
9
25
  ## 📚 Live Storybook
10
26
 
11
27
  Explore the interactive documentation and try all components in Storybook, hosted on Chromatic:
@@ -16,7 +32,7 @@ Explore the interactive documentation and try all components in Storybook, hoste
16
32
  - **Framework:** Next.js 13+ (App Router), React 18+
17
33
  - **Language:** TypeScript
18
34
  - **Design System:** IBM Carbon Design System
19
- - **Styling:** SASS
35
+ - **Styling:** SASS (+ enjanga-core-setup)
20
36
  - **Development & Testing:** Storybook, Chromatic, React Testing Library, Vitest
21
37
  - **Build Tool:** Tsup
22
38
 
@@ -30,14 +46,14 @@ Explore the interactive documentation and try all components in Storybook, hoste
30
46
  yarn add enjanga-components-library next@^15.0.0 react@^18.0.0 react-dom@^18.0.0
31
47
  ```
32
48
 
33
- 2. **Install and configure IBM Carbon:**
34
- Follow the [official Carbon React setup guide](https://carbondesignsystem.com/developing/frameworks/react#install).
49
+ 2. **Install and configure IBM Carbon and core setup:**
35
50
  ```bash
36
- npm install @carbon/react @carbon/styles
51
+ npm install @carbon/react @carbon/styles enjanga-core-setup
37
52
  # or
38
- yarn add @carbon/react @carbon/styles
53
+ yarn add @carbon/react @carbon/styles enjanga-core-setup
39
54
  ```
40
- Import Carbon’s global styles (e.g., in `app/layout.tsx`):
55
+
56
+ Import Carbon’s global styles (e.g., in `app/layout.tsx`):
41
57
  ```tsx
42
58
  import '@carbon/styles/css/index.css';
43
59
  ```
@@ -57,6 +73,32 @@ export default function MyPage() {
57
73
 
58
74
  ✅ **Note:** Component CSS is automatically included — no manual CSS imports needed.
59
75
 
76
+ ---
77
+
78
+ ## 🎨 Styling Structure
79
+
80
+ This library’s styles follow a **three-tier structure** for clarity and maintainability:
81
+
82
+ 1. **Core (via `enjanga-core-setup`)**
83
+ - Provides Carbon design tokens, utilities, and mixins.
84
+ - Always imported with:
85
+ ```scss
86
+ @use 'enjanga-core-setup/styles' as core;
87
+ ```
88
+ - Example usage: `core.$spacing-03`, `core.type-style('heading-02')`.
89
+
90
+ 2. **Global (library-wide styles in `src/styles/global/`)**
91
+ - Apply across components (e.g., typography, skeleton loading animation, utilities).
92
+ - Imported into the main stylesheet (`src/styles/index.scss`).
93
+
94
+ 3. **Component-level (scoped styles in `src/components/*/_Component.scss`)**
95
+ - Define structure, layout, and visuals for individual components.
96
+ - Can extend/override global styles when necessary.
97
+
98
+ This separation ensures **consistent design foundations (core)**, **predictable global rules**, and **flexible, isolated component styles**.
99
+
100
+ ---
101
+
60
102
  ## 🧪 Testing
61
103
 
62
104
  This library is tested for quality and reliability:
package/dist/styles.css ADDED
@@ -0,0 +1 @@
1
+ :root{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-background:var(--cds-layer-background-01, #ffffff);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-one{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-background:var(--cds-layer-background-01, #ffffff);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02, #ffffff);--cds-layer-active:var(--cds-layer-active-02, #c6c6c6);--cds-layer-background:var(--cds-layer-background-02, #f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);--cds-field:var(--cds-field-02, #ffffff);--cds-field-hover:var(--cds-field-hover-02, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);--cds-border-strong:var(--cds-border-strong-02, #8d8d8d);--cds-border-tile:var(--cds-border-tile-02, #a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03, #f4f4f4);--cds-layer-active:var(--cds-layer-active-03, #c6c6c6);--cds-layer-background:var(--cds-layer-background-03, #ffffff);--cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);--cds-field:var(--cds-field-03, #f4f4f4);--cds-field-hover:var(--cds-field-hover-03, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);--cds-border-strong:var(--cds-border-strong-03, #8d8d8d);--cds-border-tile:var(--cds-border-tile-03, #c6c6c6)}.cds--layer-one.cds--layer__with-background{background-color:var(--cds-layer-background)}.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}.cds--layer-three.cds--layer__with-background{background-color:var(--cds-layer-background)}:root{--cds-grid-gutter: 2rem;--cds-grid-columns: 4;--cds-grid-margin: 0}@media(min-width: 42rem){:root{--cds-grid-columns: 8;--cds-grid-margin: 1rem}}@media(min-width: 66rem){:root{--cds-grid-columns: 16}}@media(min-width: 99rem){:root{--cds-grid-margin: 1.5rem}}.cds--css-grid{--cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);--cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);--cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns), minmax(0, 1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width{max-inline-size:100%}.cds--css-grid-column{--cds-grid-mode-start: var(--cds-grid-gutter-start);--cds-grid-mode-end: var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow{--cds-grid-gutter-start: 0rem}.cds--css-grid--condensed{--cds-grid-gutter: 0.0625rem;--cds-grid-column-hang: 0.96875rem}.cds--css-grid--start{margin-inline-start:0}.cds--css-grid--end{margin-inline-end:0}.cds--subgrid{display:grid;grid-template-columns:repeat(var(--cds-grid-columns), minmax(0, 1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide{--cds-grid-gutter-start: 1rem;--cds-grid-gutter-end: 1rem;--cds-grid-column-hang: 0}.cds--subgrid--narrow{--cds-grid-gutter-start: 0rem;--cds-grid-gutter-end: 1rem;--cds-grid-column-hang: 1rem}.cds--subgrid--condensed{--cds-grid-gutter-start: 0.03125rem;--cds-grid-gutter-end: 0.03125rem;--cds-grid-column-hang: 0.96875rem}.cds--grid-column-hang{margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang{margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}.cds--col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}.cds--col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}.cds--col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}.cds--col-span-5{--cds-grid-columns: 5;display:block;grid-column:span 5/span 5}.cds--col-span-6{--cds-grid-columns: 6;display:block;grid-column:span 6/span 6}.cds--col-span-7{--cds-grid-columns: 7;display:block;grid-column:span 7/span 7}.cds--col-span-8{--cds-grid-columns: 8;display:block;grid-column:span 8/span 8}.cds--col-span-9{--cds-grid-columns: 9;display:block;grid-column:span 9/span 9}.cds--col-span-10{--cds-grid-columns: 10;display:block;grid-column:span 10/span 10}.cds--col-span-11{--cds-grid-columns: 11;display:block;grid-column:span 11/span 11}.cds--col-span-12{--cds-grid-columns: 12;display:block;grid-column:span 12/span 12}.cds--col-span-13{--cds-grid-columns: 13;display:block;grid-column:span 13/span 13}.cds--col-span-14{--cds-grid-columns: 14;display:block;grid-column:span 14/span 14}.cds--col-span-15{--cds-grid-columns: 15;display:block;grid-column:span 15/span 15}.cds--col-span-16{--cds-grid-columns: 16;display:block;grid-column:span 16/span 16}.cds--sm\:col-span-0{display:none}.cds--sm\:col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}.cds--sm\:col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}.cds--sm\:col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}.cds--sm\:col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}.cds--sm\:col-span-auto{grid-column:auto}.cds--sm\:col-span-100{grid-column:1/-1}.cds--sm\:col-span-75{--cds-grid-columns: 3;grid-column:span 3/span 3}.cds--sm\:col-span-50{--cds-grid-columns: 2;grid-column:span 2/span 2}.cds--sm\:col-span-25{--cds-grid-columns: 1;grid-column:span 1/span 1}@media(min-width: 42rem){.cds--md\:col-span-0{display:none}}@media(min-width: 42rem){.cds--md\:col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}}@media(min-width: 42rem){.cds--md\:col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}}@media(min-width: 42rem){.cds--md\:col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}}@media(min-width: 42rem){.cds--md\:col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}}@media(min-width: 42rem){.cds--md\:col-span-5{--cds-grid-columns: 5;display:block;grid-column:span 5/span 5}}@media(min-width: 42rem){.cds--md\:col-span-6{--cds-grid-columns: 6;display:block;grid-column:span 6/span 6}}@media(min-width: 42rem){.cds--md\:col-span-7{--cds-grid-columns: 7;display:block;grid-column:span 7/span 7}}@media(min-width: 42rem){.cds--md\:col-span-8{--cds-grid-columns: 8;display:block;grid-column:span 8/span 8}}@media(min-width: 42rem){.cds--md\:col-span-auto{grid-column:auto}.cds--md\:col-span-100{grid-column:1/-1}.cds--md\:col-span-75{--cds-grid-columns: 6;grid-column:span 6/span 6}.cds--md\:col-span-50{--cds-grid-columns: 4;grid-column:span 4/span 4}.cds--md\:col-span-25{--cds-grid-columns: 2;grid-column:span 2/span 2}}@media(min-width: 66rem){.cds--lg\:col-span-0{display:none}}@media(min-width: 66rem){.cds--lg\:col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}}@media(min-width: 66rem){.cds--lg\:col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}}@media(min-width: 66rem){.cds--lg\:col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}}@media(min-width: 66rem){.cds--lg\:col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}}@media(min-width: 66rem){.cds--lg\:col-span-5{--cds-grid-columns: 5;display:block;grid-column:span 5/span 5}}@media(min-width: 66rem){.cds--lg\:col-span-6{--cds-grid-columns: 6;display:block;grid-column:span 6/span 6}}@media(min-width: 66rem){.cds--lg\:col-span-7{--cds-grid-columns: 7;display:block;grid-column:span 7/span 7}}@media(min-width: 66rem){.cds--lg\:col-span-8{--cds-grid-columns: 8;display:block;grid-column:span 8/span 8}}@media(min-width: 66rem){.cds--lg\:col-span-9{--cds-grid-columns: 9;display:block;grid-column:span 9/span 9}}@media(min-width: 66rem){.cds--lg\:col-span-10{--cds-grid-columns: 10;display:block;grid-column:span 10/span 10}}@media(min-width: 66rem){.cds--lg\:col-span-11{--cds-grid-columns: 11;display:block;grid-column:span 11/span 11}}@media(min-width: 66rem){.cds--lg\:col-span-12{--cds-grid-columns: 12;display:block;grid-column:span 12/span 12}}@media(min-width: 66rem){.cds--lg\:col-span-13{--cds-grid-columns: 13;display:block;grid-column:span 13/span 13}}@media(min-width: 66rem){.cds--lg\:col-span-14{--cds-grid-columns: 14;display:block;grid-column:span 14/span 14}}@media(min-width: 66rem){.cds--lg\:col-span-15{--cds-grid-columns: 15;display:block;grid-column:span 15/span 15}}@media(min-width: 66rem){.cds--lg\:col-span-16{--cds-grid-columns: 16;display:block;grid-column:span 16/span 16}}@media(min-width: 66rem){.cds--lg\:col-span-auto{grid-column:auto}.cds--lg\:col-span-100{grid-column:1/-1}.cds--lg\:col-span-75{--cds-grid-columns: 12;grid-column:span 12/span 12}.cds--lg\:col-span-50{--cds-grid-columns: 8;grid-column:span 8/span 8}.cds--lg\:col-span-25{--cds-grid-columns: 4;grid-column:span 4/span 4}}@media(min-width: 82rem){.cds--xlg\:col-span-0{display:none}}@media(min-width: 82rem){.cds--xlg\:col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}}@media(min-width: 82rem){.cds--xlg\:col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}}@media(min-width: 82rem){.cds--xlg\:col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}}@media(min-width: 82rem){.cds--xlg\:col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}}@media(min-width: 82rem){.cds--xlg\:col-span-5{--cds-grid-columns: 5;display:block;grid-column:span 5/span 5}}@media(min-width: 82rem){.cds--xlg\:col-span-6{--cds-grid-columns: 6;display:block;grid-column:span 6/span 6}}@media(min-width: 82rem){.cds--xlg\:col-span-7{--cds-grid-columns: 7;display:block;grid-column:span 7/span 7}}@media(min-width: 82rem){.cds--xlg\:col-span-8{--cds-grid-columns: 8;display:block;grid-column:span 8/span 8}}@media(min-width: 82rem){.cds--xlg\:col-span-9{--cds-grid-columns: 9;display:block;grid-column:span 9/span 9}}@media(min-width: 82rem){.cds--xlg\:col-span-10{--cds-grid-columns: 10;display:block;grid-column:span 10/span 10}}@media(min-width: 82rem){.cds--xlg\:col-span-11{--cds-grid-columns: 11;display:block;grid-column:span 11/span 11}}@media(min-width: 82rem){.cds--xlg\:col-span-12{--cds-grid-columns: 12;display:block;grid-column:span 12/span 12}}@media(min-width: 82rem){.cds--xlg\:col-span-13{--cds-grid-columns: 13;display:block;grid-column:span 13/span 13}}@media(min-width: 82rem){.cds--xlg\:col-span-14{--cds-grid-columns: 14;display:block;grid-column:span 14/span 14}}@media(min-width: 82rem){.cds--xlg\:col-span-15{--cds-grid-columns: 15;display:block;grid-column:span 15/span 15}}@media(min-width: 82rem){.cds--xlg\:col-span-16{--cds-grid-columns: 16;display:block;grid-column:span 16/span 16}}@media(min-width: 82rem){.cds--xlg\:col-span-auto{grid-column:auto}.cds--xlg\:col-span-100{grid-column:1/-1}.cds--xlg\:col-span-75{--cds-grid-columns: 12;grid-column:span 12/span 12}.cds--xlg\:col-span-50{--cds-grid-columns: 8;grid-column:span 8/span 8}.cds--xlg\:col-span-25{--cds-grid-columns: 4;grid-column:span 4/span 4}}@media(min-width: 99rem){.cds--max\:col-span-0{display:none}}@media(min-width: 99rem){.cds--max\:col-span-1{--cds-grid-columns: 1;display:block;grid-column:span 1/span 1}}@media(min-width: 99rem){.cds--max\:col-span-2{--cds-grid-columns: 2;display:block;grid-column:span 2/span 2}}@media(min-width: 99rem){.cds--max\:col-span-3{--cds-grid-columns: 3;display:block;grid-column:span 3/span 3}}@media(min-width: 99rem){.cds--max\:col-span-4{--cds-grid-columns: 4;display:block;grid-column:span 4/span 4}}@media(min-width: 99rem){.cds--max\:col-span-5{--cds-grid-columns: 5;display:block;grid-column:span 5/span 5}}@media(min-width: 99rem){.cds--max\:col-span-6{--cds-grid-columns: 6;display:block;grid-column:span 6/span 6}}@media(min-width: 99rem){.cds--max\:col-span-7{--cds-grid-columns: 7;display:block;grid-column:span 7/span 7}}@media(min-width: 99rem){.cds--max\:col-span-8{--cds-grid-columns: 8;display:block;grid-column:span 8/span 8}}@media(min-width: 99rem){.cds--max\:col-span-9{--cds-grid-columns: 9;display:block;grid-column:span 9/span 9}}@media(min-width: 99rem){.cds--max\:col-span-10{--cds-grid-columns: 10;display:block;grid-column:span 10/span 10}}@media(min-width: 99rem){.cds--max\:col-span-11{--cds-grid-columns: 11;display:block;grid-column:span 11/span 11}}@media(min-width: 99rem){.cds--max\:col-span-12{--cds-grid-columns: 12;display:block;grid-column:span 12/span 12}}@media(min-width: 99rem){.cds--max\:col-span-13{--cds-grid-columns: 13;display:block;grid-column:span 13/span 13}}@media(min-width: 99rem){.cds--max\:col-span-14{--cds-grid-columns: 14;display:block;grid-column:span 14/span 14}}@media(min-width: 99rem){.cds--max\:col-span-15{--cds-grid-columns: 15;display:block;grid-column:span 15/span 15}}@media(min-width: 99rem){.cds--max\:col-span-16{--cds-grid-columns: 16;display:block;grid-column:span 16/span 16}}@media(min-width: 99rem){.cds--max\:col-span-auto{grid-column:auto}.cds--max\:col-span-100{grid-column:1/-1}.cds--max\:col-span-75{--cds-grid-columns: 12;grid-column:span 12/span 12}.cds--max\:col-span-50{--cds-grid-columns: 8;grid-column:span 8/span 8}.cds--max\:col-span-25{--cds-grid-columns: 4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100{grid-column:1/-1}.cds--col-span-75{--cds-grid-columns: 3;grid-column:span 3/span 3}@media(min-width: 42rem){.cds--col-span-75{--cds-grid-columns: 6;grid-column:span 6/span 6}}@media(min-width: 66rem){.cds--col-span-75{--cds-grid-columns: 12;grid-column:span 12/span 12}}.cds--col-span-50{--cds-grid-columns: 2;grid-column:span 2/span 2}@media(min-width: 42rem){.cds--col-span-50{--cds-grid-columns: 4;grid-column:span 4/span 4}}@media(min-width: 66rem){.cds--col-span-50{--cds-grid-columns: 8;grid-column:span 8/span 8}}.cds--col-span-25{--cds-grid-columns: 1;grid-column:span 1/span 1}@media(min-width: 42rem){.cds--col-span-25{--cds-grid-columns: 2;grid-column:span 2/span 2}}@media(min-width: 66rem){.cds--col-span-25{--cds-grid-columns: 4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\:col-start-1{grid-column-start:1}.cds--sm\:col-start-2{grid-column-start:2}.cds--sm\:col-start-3{grid-column-start:3}.cds--sm\:col-start-4{grid-column-start:4}.cds--sm\:col-start-5{grid-column-start:5}.cds--sm\:col-start-6{grid-column-start:6}.cds--sm\:col-start-7{grid-column-start:7}.cds--sm\:col-start-8{grid-column-start:8}.cds--sm\:col-start-9{grid-column-start:9}.cds--sm\:col-start-10{grid-column-start:10}.cds--sm\:col-start-11{grid-column-start:11}.cds--sm\:col-start-12{grid-column-start:12}.cds--sm\:col-start-13{grid-column-start:13}.cds--sm\:col-start-14{grid-column-start:14}.cds--sm\:col-start-15{grid-column-start:15}.cds--sm\:col-start-16{grid-column-start:16}.cds--sm\:col-end-2{grid-column-end:2}.cds--sm\:col-end-3{grid-column-end:3}.cds--sm\:col-end-4{grid-column-end:4}.cds--sm\:col-end-5{grid-column-end:5}.cds--sm\:col-end-6{grid-column-end:6}.cds--sm\:col-end-7{grid-column-end:7}.cds--sm\:col-end-8{grid-column-end:8}.cds--sm\:col-end-9{grid-column-end:9}.cds--sm\:col-end-10{grid-column-end:10}.cds--sm\:col-end-11{grid-column-end:11}.cds--sm\:col-end-12{grid-column-end:12}.cds--sm\:col-end-13{grid-column-end:13}.cds--sm\:col-end-14{grid-column-end:14}.cds--sm\:col-end-15{grid-column-end:15}.cds--sm\:col-end-16{grid-column-end:16}.cds--sm\:col-end-17{grid-column-end:17}.cds--sm\:col-start-auto{grid-column-start:auto}.cds--sm\:col-end-auto{grid-column-end:auto}@media(min-width: 42rem){.cds--md\:col-start-1{grid-column-start:1}.cds--md\:col-start-2{grid-column-start:2}.cds--md\:col-start-3{grid-column-start:3}.cds--md\:col-start-4{grid-column-start:4}.cds--md\:col-start-5{grid-column-start:5}.cds--md\:col-start-6{grid-column-start:6}.cds--md\:col-start-7{grid-column-start:7}.cds--md\:col-start-8{grid-column-start:8}.cds--md\:col-start-9{grid-column-start:9}.cds--md\:col-start-10{grid-column-start:10}.cds--md\:col-start-11{grid-column-start:11}.cds--md\:col-start-12{grid-column-start:12}.cds--md\:col-start-13{grid-column-start:13}.cds--md\:col-start-14{grid-column-start:14}.cds--md\:col-start-15{grid-column-start:15}.cds--md\:col-start-16{grid-column-start:16}.cds--md\:col-end-2{grid-column-end:2}.cds--md\:col-end-3{grid-column-end:3}.cds--md\:col-end-4{grid-column-end:4}.cds--md\:col-end-5{grid-column-end:5}.cds--md\:col-end-6{grid-column-end:6}.cds--md\:col-end-7{grid-column-end:7}.cds--md\:col-end-8{grid-column-end:8}.cds--md\:col-end-9{grid-column-end:9}.cds--md\:col-end-10{grid-column-end:10}.cds--md\:col-end-11{grid-column-end:11}.cds--md\:col-end-12{grid-column-end:12}.cds--md\:col-end-13{grid-column-end:13}.cds--md\:col-end-14{grid-column-end:14}.cds--md\:col-end-15{grid-column-end:15}.cds--md\:col-end-16{grid-column-end:16}.cds--md\:col-end-17{grid-column-end:17}.cds--md\:col-start-auto{grid-column-start:auto}.cds--md\:col-end-auto{grid-column-end:auto}}@media(min-width: 66rem){.cds--lg\:col-start-1{grid-column-start:1}.cds--lg\:col-start-2{grid-column-start:2}.cds--lg\:col-start-3{grid-column-start:3}.cds--lg\:col-start-4{grid-column-start:4}.cds--lg\:col-start-5{grid-column-start:5}.cds--lg\:col-start-6{grid-column-start:6}.cds--lg\:col-start-7{grid-column-start:7}.cds--lg\:col-start-8{grid-column-start:8}.cds--lg\:col-start-9{grid-column-start:9}.cds--lg\:col-start-10{grid-column-start:10}.cds--lg\:col-start-11{grid-column-start:11}.cds--lg\:col-start-12{grid-column-start:12}.cds--lg\:col-start-13{grid-column-start:13}.cds--lg\:col-start-14{grid-column-start:14}.cds--lg\:col-start-15{grid-column-start:15}.cds--lg\:col-start-16{grid-column-start:16}.cds--lg\:col-end-2{grid-column-end:2}.cds--lg\:col-end-3{grid-column-end:3}.cds--lg\:col-end-4{grid-column-end:4}.cds--lg\:col-end-5{grid-column-end:5}.cds--lg\:col-end-6{grid-column-end:6}.cds--lg\:col-end-7{grid-column-end:7}.cds--lg\:col-end-8{grid-column-end:8}.cds--lg\:col-end-9{grid-column-end:9}.cds--lg\:col-end-10{grid-column-end:10}.cds--lg\:col-end-11{grid-column-end:11}.cds--lg\:col-end-12{grid-column-end:12}.cds--lg\:col-end-13{grid-column-end:13}.cds--lg\:col-end-14{grid-column-end:14}.cds--lg\:col-end-15{grid-column-end:15}.cds--lg\:col-end-16{grid-column-end:16}.cds--lg\:col-end-17{grid-column-end:17}.cds--lg\:col-start-auto{grid-column-start:auto}.cds--lg\:col-end-auto{grid-column-end:auto}}@media(min-width: 82rem){.cds--xlg\:col-start-1{grid-column-start:1}.cds--xlg\:col-start-2{grid-column-start:2}.cds--xlg\:col-start-3{grid-column-start:3}.cds--xlg\:col-start-4{grid-column-start:4}.cds--xlg\:col-start-5{grid-column-start:5}.cds--xlg\:col-start-6{grid-column-start:6}.cds--xlg\:col-start-7{grid-column-start:7}.cds--xlg\:col-start-8{grid-column-start:8}.cds--xlg\:col-start-9{grid-column-start:9}.cds--xlg\:col-start-10{grid-column-start:10}.cds--xlg\:col-start-11{grid-column-start:11}.cds--xlg\:col-start-12{grid-column-start:12}.cds--xlg\:col-start-13{grid-column-start:13}.cds--xlg\:col-start-14{grid-column-start:14}.cds--xlg\:col-start-15{grid-column-start:15}.cds--xlg\:col-start-16{grid-column-start:16}.cds--xlg\:col-end-2{grid-column-end:2}.cds--xlg\:col-end-3{grid-column-end:3}.cds--xlg\:col-end-4{grid-column-end:4}.cds--xlg\:col-end-5{grid-column-end:5}.cds--xlg\:col-end-6{grid-column-end:6}.cds--xlg\:col-end-7{grid-column-end:7}.cds--xlg\:col-end-8{grid-column-end:8}.cds--xlg\:col-end-9{grid-column-end:9}.cds--xlg\:col-end-10{grid-column-end:10}.cds--xlg\:col-end-11{grid-column-end:11}.cds--xlg\:col-end-12{grid-column-end:12}.cds--xlg\:col-end-13{grid-column-end:13}.cds--xlg\:col-end-14{grid-column-end:14}.cds--xlg\:col-end-15{grid-column-end:15}.cds--xlg\:col-end-16{grid-column-end:16}.cds--xlg\:col-end-17{grid-column-end:17}.cds--xlg\:col-start-auto{grid-column-start:auto}.cds--xlg\:col-end-auto{grid-column-end:auto}}@media(min-width: 99rem){.cds--max\:col-start-1{grid-column-start:1}.cds--max\:col-start-2{grid-column-start:2}.cds--max\:col-start-3{grid-column-start:3}.cds--max\:col-start-4{grid-column-start:4}.cds--max\:col-start-5{grid-column-start:5}.cds--max\:col-start-6{grid-column-start:6}.cds--max\:col-start-7{grid-column-start:7}.cds--max\:col-start-8{grid-column-start:8}.cds--max\:col-start-9{grid-column-start:9}.cds--max\:col-start-10{grid-column-start:10}.cds--max\:col-start-11{grid-column-start:11}.cds--max\:col-start-12{grid-column-start:12}.cds--max\:col-start-13{grid-column-start:13}.cds--max\:col-start-14{grid-column-start:14}.cds--max\:col-start-15{grid-column-start:15}.cds--max\:col-start-16{grid-column-start:16}.cds--max\:col-end-2{grid-column-end:2}.cds--max\:col-end-3{grid-column-end:3}.cds--max\:col-end-4{grid-column-end:4}.cds--max\:col-end-5{grid-column-end:5}.cds--max\:col-end-6{grid-column-end:6}.cds--max\:col-end-7{grid-column-end:7}.cds--max\:col-end-8{grid-column-end:8}.cds--max\:col-end-9{grid-column-end:9}.cds--max\:col-end-10{grid-column-end:10}.cds--max\:col-end-11{grid-column-end:11}.cds--max\:col-end-12{grid-column-end:12}.cds--max\:col-end-13{grid-column-end:13}.cds--max\:col-end-14{grid-column-end:14}.cds--max\:col-end-15{grid-column-end:15}.cds--max\:col-end-16{grid-column-end:16}.cds--max\:col-end-17{grid-column-end:17}.cds--max\:col-start-auto{grid-column-start:auto}.cds--max\:col-end-auto{grid-column-end:auto}}:root{--enj-h1-mb: 0.75rem;--enj-h1-ft: 1.75rem;--enj-h2-mb: 0.5rem;--enj-h2-ft: 1.5rem;--enj-h3-mb: 0.75rem;--enj-h3-ft: 1.25rem;--enj-h4-mb: 0.5rem;--enj-h4-ft: 1rem}h1{font-weight:500;font-size:var(--enj-h1-ft);margin-bottom:var(--enj-h1-mb);line-height:1.2}@media(min-width: 42rem){h1{--enj-h1-ft: 2rem;--enj-h1-mb: 1rem}}@media(min-width: 66rem){h1{--enj-h1-ft: 2.825rem}}@media(min-width: 82rem){h1{--enj-h1-ft: 3.1rem}}h2{font-weight:500;font-size:var(--enj-h2-ft);margin-bottom:var(--enj-h2-mb);line-height:1.25}@media(min-width: 42rem){h2{--enj-h2-ft: 1.75rem;--enj-h2-mb: 1.5rem}}@media(min-width: 66rem){h2{--enj-h2-ft: 2rem}}@media(min-width: 82rem){h2{--enj-h2-ft: 2.25rem}}h3{font-weight:500;font-size:var(--enj-h3-ft);margin-bottom:var(--enj-h3-mb);line-height:1.3}@media(min-width: 42rem){h3{--enj-h3-ft: 1.5rem;--enj-h3-mb: 1rem}}@media(min-width: 66rem){h3{--enj-h3-ft: 1.75rem}}h4{font-weight:500;font-size:var(--enj-h4-ft);margin-bottom:var(--enj-h4-mb);line-height:1.4}@media(min-width: 42rem){h4{--enj-h4-ft: 1.25rem;--enj-h4-mb: 0.75rem}}:root{--enj-skeleton-anim-title-h: 24px;--enj-skeleton-anim-text-h: 16px}.skeleton{display:inline-block;background-color:#a8a8a8;border-radius:4px;position:relative;overflow:hidden}.skeleton::after{content:"";position:absolute;top:0;left:-150%;height:100%;width:150%;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);animation:shimmer 1.5s infinite}@keyframes shimmer{100%{transform:translateX(150%)}}.skeleton-bot-spacing-1{margin-bottom:12px}.skeleton-bot-spacing-2{margin-bottom:5px}.skeleton-title{width:70%;height:var(--enj-skeleton-anim-title-h);margin-bottom:12px}.skeleton-text-wrapper .skeleton-list-item{display:flex;gap:10px}.skeleton-text,.skeleton-list-item,.skeleton-dot{width:100%;height:var(--enj-skeleton-anim-text-h)}.skeleton-dot{width:var(--enj-skeleton-anim-text-h)}.img-fluid{max-width:100%;height:auto}.enj-AppHeader .header-inner{max-width:95rem;margin:0 auto;display:flex;align-items:center;width:100%}:root{--enj-Banner-gap: 3rem;--enj-Banner-p-font-size: 1.25rem}.enj-Banner.enj-Banner--isHuge{--enj-Banner-jumbotron-padd: var(--enj-Banner-gap) 0 var(--enj-Banner-padd-bot) 0;padding:var(--enj-Banner-jumbotron-padd);--enj-Banner-padd-bot: 10rem;--enj-Banner-jumbotron-padd: var(--enj-Banner-gap) 0 var(--enj-Banner-padd-bot) 0;padding:var(--enj-Banner-jumbotron-padd)}.enj-Banner.enj-Banner--isHuge.enj-Banner-sm{--enj-Banner-padd-bot: 11.5rem}.enj-Banner.enj-Banner--isHuge.enj-Banner-md{--enj-Banner-padd-bot: 12.25rem}.enj-Banner.enj-Banner--isHuge.enj-Banner-lg p{font-size:var(--cds-heading-03-font-size, 1.25rem);font-weight:var(--cds-heading-03-font-weight, 400);line-height:var(--cds-heading-03-line-height, 1.4);letter-spacing:var(--cds-heading-03-letter-spacing, 0)}.enj-Banner.enj-Banner--isHuge.enj-Banner-lg{--enj-Banner-padd-bot: 13.25rem}.enj-Banner.enj-Banner--isHuge.enj-Banner-xlg p{font-size:var(--cds-heading-03-font-size, 1.25rem);font-weight:var(--cds-heading-03-font-weight, 400);line-height:var(--cds-heading-03-line-height, 1.4);letter-spacing:var(--cds-heading-03-letter-spacing, 0)}.enj-Banner.enj-Banner--isHuge.enj-Banner-xlg{--enj-Banner-padd-bot: 14.75rem}.enj-Banner.enj-Banner--isHuge.enj-Banner-max p{font-size:var(--cds-heading-03-font-size, 1.25rem);font-weight:var(--cds-heading-03-font-weight, 400);line-height:var(--cds-heading-03-line-height, 1.4);letter-spacing:var(--cds-heading-03-letter-spacing, 0)}.enj-Banner.enj-Banner--isHuge.enj-Banner-max{--enj-Banner-padd-bot: 16.25rem}.enj-Banner h1,.enj-Banner h2,.enj-Banner h3,.enj-Banner h4,.enj-Banner h5,.enj-Banner h6{color:var(--cds-text-on-color, #ffffff)}.enj-Banner p,.enj-Banner span{color:#e0e0e0;font-size:var(--enj-Banner-p-font-size)}.enj-Banner a{color:#fb00ff}.enj-Banner a span{color:#fb00ff}.enj-Banner a:hover{text-decoration:none}.enj-Banner .skeleton{background-color:#8d8d8d}.enj-Banner{background-color:#21272a}.enj-Banner .enj-FeatureText-title{margin-bottom:1rem}.enj-Banner .enj-FeatureText-article>p:last-of-type,.enj-Banner .enj-CMSRichText>p:last-of-type{margin-bottom:0}.enj-Banner{--enj-Banner-padd: var(--enj-Banner-gap) 0 var(--enj-Banner-gap) 0;padding:var(--enj-Banner-padd)}.enj-Banner.enj-Banner-md{--enj-Banner-gap: 5rem}.enj-Banner.enj-Banner-lg{--enj-Banner-gap: 5rem}.enj-Banner.enj-Banner-xlg{--enj-Banner-gap: 6rem}.enj-Banner.enj-Banner-max{--enj-Banner-gap: 6rem}.enj-BrandLogo{font-weight:bold;text-transform:uppercase}:root{--enj-CTL-bann-flex-dir: column;--enj-CTL-bann-align-items: flex-start;--enj-CTL-bann-flex-gap: 1rem;--enj-CTL-bann-title-mb: 0;--enj-CTL-banner-pad: 4rem;--enj-CTL-bann-title-flex: unset;--enj-CTL-bann-article-flex: unset;--enj-CTL-br-col: #6f6f6f;--enj-CTL-card-pad: 2rem;--enj-CTL-card-img-col-gap: 1.5rem;--enj-CTL-card-withIcon-gap: 1rem;--enj-CTL-icon-dimg: 1.5rem}.enj-CustomTile--card{padding:var(--enj-CTL-card-pad)}.enj-CustomTile--card.enj-CustomTile-sm{--enj-CTL-card-pad: 0.75rem}.enj-CustomTile--card.enj-CustomTile-md{--enj-CTL-card-pad: 1.5rem}.enj-CustomTile--banner .enj-CustomTile-title{margin-bottom:var(--enj-CTL-bann-title-mb);flex:var(--enj-CTL-bann-title-flex)}.enj-CustomTile--banner article{flex:var(--enj-CTL-bann-article-flex)}.enj-CustomTile--banner .enj-FeatureText{display:flex;gap:var(--enj-CTL-bann-flex-gap);flex-direction:var(--enj-CTL-bann-flex-dir);align-items:var(--enj-CTL-bann-align-items)}.enj-CustomTile--banner .enj-FeatureText .enj-FeatureText-article *{font-size:1.2rem}.enj-CustomTile--banner{padding:var(--enj-CTL-banner-pad)}.enj-CustomTile--banner.enj-CustomTile-sm{--enj-CTL-banner-pad: 0.75rem}.enj-CustomTile--banner.enj-CustomTile-md{--enj-CTL-banner-pad: 2rem}.enj-CustomTile--banner.enj-CustomTile-max{--enj-CTL-banner-pad: 6rem}.enj-CustomTile--banner.enj-CustomTile-lg{--enj-CTL-bann-flex-gap: 1.2rem}.enj-CustomTile--banner.enj-CustomTile-xlg{--enj-CTL-bann-flex-gap: 1.5rem}.enj-CustomTile--banner.enj-CustomTile-max{--enj-CTL-bann-flex-gap: 2rem}.enj-CustomTile--banner.enj-CustomTile-xlg{--enj-CTL-bann-flex-dir: row;--enj-CTL-bann-align-items: center;--enj-CTL-bann-flex-gap: 3.5rem;--enj-CTL-bann-title-flex: 0.6;--enj-CTL-bann-article-flex: 1}.enj-CustomTile--banner.enj-CustomTile-max{--enj-CTL-bann-flex-dir: row;--enj-CTL-bann-align-items: center;--enj-CTL-bann-flex-gap: 6rem;--enj-CTL-bann-title-flex: 0.6;--enj-CTL-bann-article-flex: 1}.enj-CustomTile-wrapper .cds--modal-container{max-width:47rem}.enj-CustomTile--has-link.enj-CustomTile--card,.enj-CustomTile--has-link.enj-CustomTile--banner{padding:0}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--banner .enj-CustomTile-anchor-tag,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--banner .enj-CustomTile-anchor-tag{padding:var(--enj-CTL-banner-pad)}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-sm,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-sm{--enj-CTL-banner-pad: 0.75rem}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-md,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-md{--enj-CTL-banner-pad: 2rem}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-max,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--banner .enj-CustomTile-anchor-tag.enj-CustomTile-max{--enj-CTL-banner-pad: 6rem}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--card .enj-CustomTile-anchor-tag,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--card .enj-CustomTile-anchor-tag{padding:var(--enj-CTL-card-pad)}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--card .enj-CustomTile-anchor-tag.enj-CustomTile-sm,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--card .enj-CustomTile-anchor-tag.enj-CustomTile-sm{--enj-CTL-card-pad: 0.75rem}.enj-CustomTile--has-link.enj-CustomTile--card.enj-CustomTile--card .enj-CustomTile-anchor-tag.enj-CustomTile-md,.enj-CustomTile--has-link.enj-CustomTile--banner.enj-CustomTile--card .enj-CustomTile-anchor-tag.enj-CustomTile-md{--enj-CTL-card-pad: 1.5rem}.enj-CustomTile--has-link a,.enj-CustomTile--has-modal a{text-decoration:none}.enj-CustomTile--has-link .enj-CustomTile-title,.enj-CustomTile--has-modal .enj-CustomTile-title{color:#262626}.enj-CustomTile--has-link .enj-CustomTile-title a,.enj-CustomTile--has-modal .enj-CustomTile-title a{color:#262626}.enj-CustomTile--has-link .enj-FeatureText-article,.enj-CustomTile--has-link .enj-CustomTile-pictogram,.enj-CustomTile--has-modal .enj-FeatureText-article,.enj-CustomTile--has-modal .enj-CustomTile-pictogram{color:#525252}.enj-CustomTile--has-link .enj-FeatureText-article a,.enj-CustomTile--has-link .enj-CustomTile-pictogram a,.enj-CustomTile--has-modal .enj-FeatureText-article a,.enj-CustomTile--has-modal .enj-CustomTile-pictogram a{color:#525252}.enj-CustomTile--card .enj-CustomTile-image{object-fit:cover}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-sm .enj-CustomTile-image{display:none}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max{display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max{grid-template:auto auto/auto 1.5rem}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg .enj-CustomTile-image,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg .enj-CustomTile-image,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max .enj-CustomTile-image{grid-row:3 span;height:100%}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg .enj-FeatureText,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg .enj-FeatureText,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max .enj-FeatureText{display:flex;flex-direction:column;justify-content:center;grid-row:2 span}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg{--enj-CTL-card-img-col-gap: 3rem}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max{--enj-CTL-card-img-col-gap: 4.5rem}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link{display:block}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag{display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag{grid-template:auto auto/auto 1.5rem}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag .enj-CustomTile-image,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag .enj-CustomTile-image,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag .enj-CustomTile-image{grid-row:3 span;height:100%}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag .enj-FeatureText,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag .enj-FeatureText,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag .enj-FeatureText{display:flex;flex-direction:column;justify-content:center;grid-row:2 span}.enj-CustomTile--card.enj-CustomTile--has-img .enj-CustomTile-image{position:absolute;top:0;left:0}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-icon.enj-CustomTile-lg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-icon.enj-CustomTile-xlg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile--has-icon.enj-CustomTile-max .enj-CustomTile-icon-wrapper{position:absolute;bottom:var(--enj-CTL-card-pad);right:var(--enj-CTL-card-pad)}.enj-CustomTile--card.enj-CustomTile--has-img{--enj-CustomTile-md-img-height: 200px;--enj-CustomTile-lg-img-width: 30%;--enj-CustomTile-xlg-img-width: 35%;--enj-CustomTile-max-img-width: 35%;--enj-CustomTile-md-img-gap: 1.25rem;--enj-CustomTile-lg-img-gap: 1.5rem;--enj-CustomTile-xlg-img-gap: 3.125rem;--enj-CustomTile-max-img-gap: 4.063rem}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-md{padding-top:var(--enj-CustomTile-md-img-height)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-md:not(.enj-CustomTile--has-link){padding-top:calc(var(--enj-CustomTile-md-img-height) + var(--enj-CustomTile-md-img-gap))}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-md .enj-CustomTile-image{width:100%;max-height:var(--enj-CustomTile-md-img-height)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg .enj-CustomTile-image{width:var(--enj-CustomTile-lg-img-width)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-lg .enj-FeatureText{margin-left:calc(var(--enj-CustomTile-lg-img-width) + var(--enj-CustomTile-lg-img-gap))}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg .enj-CustomTile-image{width:var(--enj-CustomTile-xlg-img-width)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-xlg .enj-FeatureText{margin-left:calc(var(--enj-CustomTile-xlg-img-width) + var(--enj-CustomTile-xlg-img-gap))}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max .enj-CustomTile-image{width:var(--enj-CustomTile-max-img-width)}.enj-CustomTile--card.enj-CustomTile--has-img.enj-CustomTile-max .enj-FeatureText{margin-left:calc(var(--enj-CustomTile-max-img-width) + var(--enj-CustomTile-max-img-gap))}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-md{display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-md .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-lg,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-xlg,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-max{--enj-CTL-card-withIcon-gap: 2rem;display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-lg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-xlg .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile-max .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link{display:block}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-md .enj-CustomTile-anchor-tag{display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-md .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag{--enj-CTL-card-withIcon-gap: 2rem;display:grid;grid-template:auto auto/3rem auto;column-gap:var(--enj-CTL-card-img-col-gap)}.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-lg .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-xlg .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper,.enj-CustomTile--card.enj-CustomTile--has-pictogram.enj-CustomTile--has-link.enj-CustomTile-max .enj-CustomTile-anchor-tag .enj-CustomTile-icon-wrapper{grid-column:2}.enj-CustomTile{border:1px solid #8d8d8d}.enj-CustomTile .enj-CustomTile-icon-wrapper{display:flex;justify-content:flex-end;align-items:flex-end}.enj-CustomTile .enj-CustomTile-icon{margin-top:1rem;width:var(--enj-CTL-icon-dimg);height:var(--enj-CTL-icon-dimg);color:#0f62fe}.enj-CustomTile a{text-decoration:none}.enj-CustomTile .enj-CustomTile-title{color:#262626}.enj-CustomTile .enj-CustomTile-title a{color:#262626}.enj-CustomTile .enj-FeatureText-article,.enj-CustomTile .enj-CustomTile-pictogram{color:#525252}.enj-CustomTile .enj-FeatureText-article a,.enj-CustomTile .enj-CustomTile-pictogram a{color:#525252}.enj-CustomTile .enj-CustomTile-pictogram{color:#0f62fe}.enj-CustomTile .enj-CustomTile-icon-wrapper svg{color:#8d8d8d}.enj-CustomTile .enj-FeatureText .enj-FeatureText-article p:last-of-type,.enj-CustomTile .enj-FeatureText .enj-FeatureText-article blockquote{margin-bottom:0}.enj-CustomTile-has-hover-effect,.enj-CustomTile-anchor-tag,.enj-CustomTile--has-modal{display:block}.enj-CustomTile-has-hover-effect:hover,.enj-CustomTile-anchor-tag:hover,.enj-CustomTile--has-modal:hover{cursor:pointer;background-color:#491d8b}.enj-CustomTile-has-hover-effect:hover .enj-CustomTile-pictogram,.enj-CustomTile-anchor-tag:hover .enj-CustomTile-pictogram,.enj-CustomTile--has-modal:hover .enj-CustomTile-pictogram{color:#a6c8ff}.enj-CustomTile-has-hover-effect:hover .enj-CustomTile-icon-wrapper svg,.enj-CustomTile-anchor-tag:hover .enj-CustomTile-icon-wrapper svg,.enj-CustomTile--has-modal:hover .enj-CustomTile-icon-wrapper svg{color:#ee5396}.enj-CustomTile-has-hover-effect:hover .enj-CustomTile-title,.enj-CustomTile-anchor-tag:hover .enj-CustomTile-title,.enj-CustomTile--has-modal:hover .enj-CustomTile-title{color:#fff}.enj-CustomTile-has-hover-effect:hover .enj-CustomTile-title a,.enj-CustomTile-anchor-tag:hover .enj-CustomTile-title a,.enj-CustomTile--has-modal:hover .enj-CustomTile-title a{color:#fff}.enj-CustomTile-has-hover-effect:hover .enj-FeatureText-article,.enj-CustomTile-anchor-tag:hover .enj-FeatureText-article,.enj-CustomTile--has-modal:hover .enj-FeatureText-article{color:#fff}.enj-CustomTile-has-hover-effect:hover .enj-FeatureText-article a,.enj-CustomTile-anchor-tag:hover .enj-FeatureText-article a,.enj-CustomTile--has-modal:hover .enj-FeatureText-article a{color:#fff}.enj-list{padding-left:1.1rem}.enj-list li{line-height:1.5rem}ol.enj-list{list-style:decimal}ul.enj-list{list-style:disc}.enj-CMSRichText{--enj-CMSRichText-ul-pad-left: 1.4rem;--enj-CMSRichText-ul-mb: 1.4rem;--enj-CMSRichText-hr-gap: 1.7rem}.enj-CMSRichText ul{list-style:disc}.enj-CMSRichText ol{list-style:decimal}.enj-CMSRichText ul,.enj-CMSRichText ol{padding-left:var(--enj-CMSRichText-ul-pad-left);margin-bottom:var(--enj-CMSRichText-ul-mb)}.enj-CMSRichText ul li p,.enj-CMSRichText ol li p{margin-bottom:0}.enj-CMSRichText p{border:1px solid rgba(0,0,0,0);margin-bottom:var(--enj-CMSRichText-ul-mb)}.enj-CMSRichText blockquote{border-left:.6rem solid #a8a8a8;padding-left:1rem;margin-bottom:var(--enj-CMSRichText-ul-mb)}.enj-CMSRichText blockquote p:last-of-type{margin-bottom:0}.enj-CMSRichText hr{margin:var(--enj-CMSRichText-hr-gap) 0}.enj-CMSRichText figure{padding:2rem;background:#f4f1f6;border:1px solid #cec5d3;margin-bottom:1rem;line-height:1.4rem;font-size:1rem;font-style:italic}.enj-CMSRichText figure img{max-width:100%;margin-bottom:1rem}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "enjanga-components-library",
3
- "version": "1.0.11",
3
+ "version": "1.0.14",
4
4
  "description": "Reusable component library for Next.js 13+ projects with Carbon design system.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -20,9 +20,7 @@
20
20
  "types": "./dist/index.d.ts",
21
21
  "default": "./dist/index.mjs"
22
22
  },
23
- "./styles.css": {
24
- "default": "./dist/styles.css"
25
- }
23
+ "./styles.css": "./dist/styles.css"
26
24
  },
27
25
  "sideEffects": [
28
26
  "**/*.css",
@@ -34,13 +32,14 @@
34
32
  "scripts": {
35
33
  "prepare": "yarn build",
36
34
  "build": "yarn build:css && tsup src/index.ts --dts --format esm,cjs --out-dir dist --external react --external react-dom --external @carbon/react --external clsx",
37
- "build:css": "sass --load-path=node_modules --load-path=node_modules/enjanga-core-setup/src/styles --no-source-map --style=compressed src/styles/index.scss dist/styles.css",
35
+ "build:css": "mkdir -p dist && sass --load-path=node_modules --no-source-map --style=compressed src/styles/index.scss dist/styles.css",
38
36
  "watch": "concurrently \"yarn watch:ts\" \"yarn watch:css\"",
39
37
  "watch:ts": "tsup src/index.ts --dts --format esm,cjs --out-dir dist --watch --external react --external react-dom --external @carbon/react --external clsx",
40
38
  "watch:css": "sass -I node_modules --no-source-map --watch src/styles/index.scss dist/styles.css",
41
39
  "storybook": "storybook dev -p 6006",
42
40
  "build-storybook": "storybook build",
43
- "release": "yarn build && npm version patch && npm publish"
41
+ "release": "yarn build && npm version patch && npm publish",
42
+ "prepublishOnly": "yarn build"
44
43
  },
45
44
  "peerDependencies": {
46
45
  "@carbon/react": "^1",
@@ -73,7 +72,7 @@
73
72
  "react": "^18.1.1",
74
73
  "react-docgen-typescript": "^2.4.0",
75
74
  "react-dom": "^18.1.1",
76
- "sass": "^1.92.1",
75
+ "sass": "^1.93.0",
77
76
  "sass-loader": "^16.0.5",
78
77
  "storybook": "^8.6.14",
79
78
  "style-loader": "^4.0.0",