@sendoutcards/quantum-design-ui 2.0.0-alpha.6 → 2.0.0-canary.1
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.
- package/README.md +136 -83
- package/dist/index.css +1 -1
- package/dist/index.d.ts +142 -122
- package/dist/{index.mjs → index.js} +2768 -2692
- package/package.json +75 -51
package/README.md
CHANGED
|
@@ -1,117 +1,170 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Release Pipeline
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This document describes how the automated release pipeline works for the Quantum Design System.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
We use [semantic-release](https://semantic-release.gitbook.io/) to automate versioning and publishing based on [Conventional Commits](https://www.conventionalcommits.org/).
|
|
4
8
|
|
|
5
9
|
## Branch Strategy
|
|
6
10
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- All current feature development and bug fixes
|
|
11
|
+
| Branch | Purpose | npm Tag | Example Version |
|
|
12
|
+
| -------- | ----------------------- | -------- | ---------------- |
|
|
13
|
+
| `main` | Stable releases | `latest` | `2.0.0`, `2.1.0` |
|
|
14
|
+
| `canary` | Prerelease/alpha builds | `canary` | `2.1.0-canary.1` |
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
- **Active development branch for version 2.0.0**
|
|
15
|
-
- Contains breaking changes and new architecture
|
|
16
|
-
- Used for experimental features and major refactoring
|
|
17
|
-
- Published as **alpha releases** (e.g., `2.0.0-alpha.1`, `2.0.0-alpha.2`) until stable 2.0.0
|
|
18
|
-
- **Not recommended for production use**
|
|
16
|
+
## How It Works
|
|
19
17
|
|
|
20
|
-
###
|
|
18
|
+
### Automatic Releases
|
|
19
|
+
|
|
20
|
+
When code is merged to `main` or `canary`, the CI pipeline:
|
|
21
|
+
|
|
22
|
+
1. Checks out the code
|
|
23
|
+
2. Installs dependencies
|
|
24
|
+
3. Runs linting (`npm run lint`)
|
|
25
|
+
4. Builds the library (`npm run build`)
|
|
26
|
+
5. Analyzes commits since the last release
|
|
27
|
+
6. Determines the version bump based on commit types
|
|
28
|
+
7. Updates `package.json` and `CHANGELOG.md`
|
|
29
|
+
8. Creates a git tag
|
|
30
|
+
9. Publishes to npm
|
|
31
|
+
10. Creates a GitHub Release with release notes
|
|
32
|
+
|
|
33
|
+
### Version Bumps
|
|
34
|
+
|
|
35
|
+
The version bump is determined by commit message prefixes:
|
|
36
|
+
|
|
37
|
+
| Commit Type | Description | Version Bump | Example |
|
|
38
|
+
| ------------------------------ | ----------------------- | ------------- | -------------------------------- |
|
|
39
|
+
| `feat:` | New feature | Minor (0.1.0) | `feat: add new Button variant` |
|
|
40
|
+
| `fix:` | Bug fix | Patch (0.0.1) | `fix: correct padding on Card` |
|
|
41
|
+
| `perf:` | Performance improvement | Patch (0.0.1) | `perf: optimize re-renders` |
|
|
42
|
+
| `refactor:` | Code refactoring | Patch (0.0.1) | `refactor: simplify Div logic` |
|
|
43
|
+
| `feat!:` or `BREAKING CHANGE:` | Breaking change | Major (1.0.0) | `feat!: remove deprecated props` |
|
|
44
|
+
| `docs:` | Documentation only | No release | `docs: update README` |
|
|
45
|
+
| `style:` | Code style changes | No release | `style: fix formatting` |
|
|
46
|
+
| `chore:` | Maintenance tasks | No release | `chore: update dependencies` |
|
|
47
|
+
| `test:` | Test changes | No release | `test: add unit tests` |
|
|
48
|
+
| `ci:` | CI changes | No release | `ci: update workflow` |
|
|
49
|
+
|
|
50
|
+
### Commit Message Format
|
|
21
51
|
|
|
22
|
-
**For current stable features and bug fixes:**
|
|
23
|
-
```bash
|
|
24
|
-
git checkout master
|
|
25
|
-
# Make changes
|
|
26
|
-
git push origin master
|
|
27
52
|
```
|
|
53
|
+
<type>(<optional scope>): <description>
|
|
28
54
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
# Make changes for v2.0.0
|
|
33
|
-
git push origin canary
|
|
55
|
+
[optional body]
|
|
56
|
+
|
|
57
|
+
[optional footer(s)]
|
|
34
58
|
```
|
|
35
59
|
|
|
36
|
-
**
|
|
60
|
+
**Examples:**
|
|
61
|
+
|
|
37
62
|
```bash
|
|
38
|
-
#
|
|
39
|
-
|
|
63
|
+
# Minor release (new feature)
|
|
64
|
+
feat: add Tooltip component
|
|
65
|
+
|
|
66
|
+
# Patch release (bug fix)
|
|
67
|
+
fix: correct z-index on Modal overlay
|
|
40
68
|
|
|
41
|
-
#
|
|
42
|
-
|
|
69
|
+
# Major release (breaking change)
|
|
70
|
+
feat!: remove deprecated `size` prop from Button
|
|
71
|
+
|
|
72
|
+
BREAKING CHANGE: The `size` prop has been removed. Use `variant` instead.
|
|
73
|
+
|
|
74
|
+
# No release (documentation)
|
|
75
|
+
docs: update component examples
|
|
43
76
|
```
|
|
44
77
|
|
|
45
|
-
##
|
|
78
|
+
## Installing Packages
|
|
46
79
|
|
|
47
|
-
|
|
80
|
+
### Stable Version (Recommended)
|
|
48
81
|
|
|
49
|
-
### Build Command
|
|
50
82
|
```bash
|
|
51
|
-
|
|
83
|
+
npm install @sendoutcards/quantum-design-ui
|
|
52
84
|
```
|
|
53
85
|
|
|
54
|
-
###
|
|
86
|
+
### Canary/Prerelease Version
|
|
55
87
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
- Handles tree-shaking and code splitting
|
|
60
|
-
- Outputs: `dist/index.mjs` and `dist/index.css`
|
|
88
|
+
```bash
|
|
89
|
+
npm install @sendoutcards/quantum-design-ui@canary
|
|
90
|
+
```
|
|
61
91
|
|
|
62
|
-
|
|
63
|
-
- Generates TypeScript declaration files (`.d.ts`)
|
|
64
|
-
- Uses specialized `tsconfig.build.json` config
|
|
65
|
-
- Excludes stories, tests, and spec files
|
|
66
|
-
- Outputs: `dist/index.d.ts` + `dist/src/**/*.d.ts` (417+ files)
|
|
92
|
+
## Workflow
|
|
67
93
|
|
|
68
|
-
###
|
|
69
|
-
- `dist/index.mjs` - ES module bundle (~813KB)
|
|
70
|
-
- `dist/index.css` - Compiled styles (~14KB)
|
|
71
|
-
- `dist/index.d.ts` - Main TypeScript declarations entry point
|
|
72
|
-
- `dist/src/**/*.d.ts` - Individual component type definitions
|
|
94
|
+
### Normal Development
|
|
73
95
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
96
|
+
1. Create a feature branch from `canary`
|
|
97
|
+
2. Make changes with conventional commit messages
|
|
98
|
+
3. Open a PR to `canary`
|
|
99
|
+
4. On merge, a canary release is automatically published
|
|
78
100
|
|
|
79
|
-
|
|
101
|
+
### Stable Release
|
|
80
102
|
|
|
81
|
-
|
|
103
|
+
1. Open a PR from `canary` to `main`
|
|
104
|
+
2. On merge, a stable release is automatically published
|
|
82
105
|
|
|
83
|
-
|
|
84
|
-
- `yarn test` - Run Jest tests
|
|
85
|
-
- `yarn test --testNamePattern="ComponentName"` - Run specific test
|
|
86
|
-
- `yarn lint` - ESLint src directory
|
|
87
|
-
- `yarn prettier` - Format code with Prettier
|
|
88
|
-
- `yarn storybook` - Start Storybook dev server
|
|
106
|
+
### Hotfix
|
|
89
107
|
|
|
90
|
-
|
|
108
|
+
1. Create a branch from `main`
|
|
109
|
+
2. Make the fix with conventional commit messages
|
|
110
|
+
3. Open a PR directly to `main`
|
|
111
|
+
4. On merge, a patch release is automatically published
|
|
91
112
|
|
|
92
|
-
|
|
93
|
-
src/
|
|
94
|
-
├── atoms/ # Basic building blocks (Button, Input, etc.)
|
|
95
|
-
├── molecules/ # Composed components (Card, Dialog, etc.)
|
|
96
|
-
├── organisms/ # Complex components (Accordion, Navigation, etc.)
|
|
97
|
-
├── hooks/ # Custom React hooks
|
|
98
|
-
├── theme/ # Theme configuration and tokens
|
|
99
|
-
├── helpers/ # Utility functions and HOCs
|
|
100
|
-
└── exports/ # Barrel files for clean imports
|
|
101
|
-
```
|
|
113
|
+
## Manual Version Override
|
|
102
114
|
|
|
103
|
-
|
|
115
|
+
If you need to force a specific version (rare):
|
|
104
116
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
117
|
+
1. Manually update the version in `packages/ui/package.json`
|
|
118
|
+
2. Commit with message: `chore(release): 2.0.0 [skip ci]`
|
|
119
|
+
3. Push to the appropriate branch
|
|
120
|
+
4. Manually run `npm publish` from `packages/ui`
|
|
108
121
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
122
|
+
**Note:** This bypasses the automated changelog generation.
|
|
123
|
+
|
|
124
|
+
## Setup Requirements
|
|
125
|
+
|
|
126
|
+
### GitHub Secrets
|
|
127
|
+
|
|
128
|
+
The following secrets must be configured in the repository:
|
|
129
|
+
|
|
130
|
+
| Secret | Description |
|
|
131
|
+
| -------------- | ----------------------------------------- |
|
|
132
|
+
| `NPM_TOKEN` | npm access token with publish permissions |
|
|
133
|
+
| `GITHUB_TOKEN` | Automatically provided by GitHub Actions |
|
|
134
|
+
|
|
135
|
+
### Creating an npm Token
|
|
136
|
+
|
|
137
|
+
1. Go to [npmjs.com](https://www.npmjs.com/) and log in
|
|
138
|
+
2. Click your profile icon > Access Tokens
|
|
139
|
+
3. Generate New Token > Classic Token
|
|
140
|
+
4. Select "Automation" type
|
|
141
|
+
5. Copy the token
|
|
142
|
+
6. Add it to GitHub: Repository Settings > Secrets and variables > Actions > New repository secret
|
|
143
|
+
7. Name: `NPM_TOKEN`, Value: (paste token)
|
|
144
|
+
|
|
145
|
+
## Troubleshooting
|
|
146
|
+
|
|
147
|
+
### Release didn't trigger
|
|
148
|
+
|
|
149
|
+
- Ensure commits follow conventional commit format
|
|
150
|
+
- Check that the branch is `main` or `canary`
|
|
151
|
+
- Verify the CI workflow completed successfully
|
|
152
|
+
|
|
153
|
+
### Version wasn't bumped
|
|
154
|
+
|
|
155
|
+
- Commits like `docs:`, `style:`, `chore:`, `test:`, `ci:` don't trigger releases
|
|
156
|
+
- Ensure at least one commit has `feat:`, `fix:`, `perf:`, or `refactor:` prefix
|
|
157
|
+
|
|
158
|
+
### npm publish failed
|
|
159
|
+
|
|
160
|
+
- Verify `NPM_TOKEN` is set correctly in GitHub Secrets
|
|
161
|
+
- Check that the token has publish permissions
|
|
162
|
+
- Ensure the package name is available on npm
|
|
114
163
|
|
|
115
|
-
##
|
|
164
|
+
## Configuration Files
|
|
116
165
|
|
|
117
|
-
|
|
166
|
+
| File | Purpose |
|
|
167
|
+
| ------------------------------- | ------------------------------ |
|
|
168
|
+
| `.releaserc.json` | semantic-release configuration |
|
|
169
|
+
| `.github/workflows/release.yml` | GitHub Actions workflow |
|
|
170
|
+
| `CHANGELOG.md` | Auto-generated changelog |
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{font-family:var(--qds-font-body, "Inter", sans-serif);font-size:16px;line-height:1.65}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--qds-font-heading, "Inter", sans-serif)}button{font-family:var(--qds-font-body, "Inter", sans-serif)}.quantum-theme-root{font-size:16px}.quantum-theme-root>div{font-size:inherit}.avatar-container{position:relative;border-radius:15%;background-color:var(--avatar-background-color);background-position:center;background-size:cover;border:var(--avatar-border-width) solid var(--avatar-border-color);box-shadow:var(--avatar-box-shadow);display:flex;justify-content:center;align-items:center}.avatar-container.size-xSmall{height:var(--avatar-size-xSmall);width:var(--avatar-size-xSmall);min-width:var(--avatar-size-xSmall)}.avatar-container.size-small{height:var(--avatar-size-small);width:var(--avatar-size-small);min-width:var(--avatar-size-small)}.avatar-container.size-medium{height:var(--avatar-size-medium);width:var(--avatar-size-medium);min-width:var(--avatar-size-medium)}.avatar-container.size-large{height:var(--avatar-size-large);width:var(--avatar-size-large);min-width:var(--avatar-size-large)}.avatar-container.size-xLarge{height:var(--avatar-size-xLarge);width:var(--avatar-size-xLarge);min-width:var(--avatar-size-xLarge)}.avatar-container.has-image{background-image:var(--avatar-image-url)}.avatar-container.no-image{background-image:linear-gradient(var(--avatar-default-accent),var(--avatar-default-accent))}.active-bubble{position:absolute;bottom:0;background:var(--avatar-bubble-background);border-radius:50%;z-index:1;box-shadow:var(--avatar-box-shadow)}.active-bubble.size-xSmall{width:var(--avatar-bubble-size-xSmall);height:var(--avatar-bubble-size-xSmall);left:var(--avatar-bubble-left-xSmall)}.active-bubble.size-small{width:var(--avatar-bubble-size-small);height:var(--avatar-bubble-size-small);left:var(--avatar-bubble-left-small)}.active-bubble.size-medium{width:var(--avatar-bubble-size-medium);height:var(--avatar-bubble-size-medium);left:var(--avatar-bubble-left-medium)}.active-bubble.size-large{width:var(--avatar-bubble-size-large);height:var(--avatar-bubble-size-large);left:var(--avatar-bubble-left-large)}.active-bubble.size-xLarge{width:var(--avatar-bubble-size-xLarge);height:var(--avatar-bubble-size-xLarge);left:var(--avatar-bubble-left-xLarge)}.checkmark-container{position:absolute;bottom:0}.checkmark-container.size-xSmall{left:var(--avatar-bubble-left-xSmall)}.checkmark-container.size-small{left:var(--avatar-bubble-left-small)}.checkmark-container.size-medium{left:var(--avatar-bubble-left-medium)}.checkmark-container.size-large{left:var(--avatar-bubble-left-large)}.checkmark-container.size-xLarge{left:var(--avatar-bubble-left-xLarge)}.tooltip{position:relative;left:0;background:var(--tooltip-background);transform:var(--tooltip-transform)}.tooltip:after,.tooltip:before{border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.tooltip:after{border-color:#fefefe00;border-width:8px}.tooltip:before{border-color:#e3e6e800;border-width:9px}.tooltip.direction-left:after,.tooltip.direction-left:before{right:100%;top:50%}.tooltip.direction-left:after{border-right-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-left:before{border-right-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-right:after,.tooltip.direction-right:before{left:100%;top:50%}.tooltip.direction-right:after{border-left-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-right:before{border-left-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-top:after,.tooltip.direction-top:before{bottom:100%;left:50%}.tooltip.direction-top:after{border-bottom-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-top:before{border-bottom-color:var(--tooltip-background);margin-left:-9px}.tooltip.direction-bottom:after,.tooltip.direction-bottom:before{top:100%;left:50%}.tooltip.direction-bottom:after{border-top-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-bottom:before{border-top-color:var(--tooltip-background);margin-left:-9px}.tooltip.reposition{transform:translateY(-125%)}.button-base:disabled{opacity:.35;cursor:not-allowed}.button-base:disabled:hover{box-shadow:none!important;transform:translateY(0)!important}.button-hover:hover{transform:translateY(3px);box-shadow:none;transition:transform .2s,box-shadow .2s ease-out}.info-block-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-container span{display:block}.info-block-caption-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-caption-container span{display:block}.icon-link-container{width:100%}.icon-link-icon-container{display:flex;justify-content:center;align-items:center}.icon-link-title-container{white-space:nowrap}.icon-link-container.disabled,.icon-link-container.disabled .icon-link-icon-container,.icon-link-container.disabled .icon-link-title-container{cursor:not-allowed}.grid{display:grid;width:100%;grid-gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(var(--grid-column-size),1fr));grid-auto-rows:minmax(var(--grid-row-size),auto);grid-auto-flow:var(--grid-auto-flow);max-width:var(--grid-max-width);height:var(--grid-height);overflow:var(--grid-overflow)}.grid-item{width:100%;height:100%;display:flex;align-items:flex-end;grid-column-end:span var(--grid-item-col-span);grid-row-end:span var(--grid-item-row-span);grid-column-start:var(--grid-item-col-start);grid-row-start:var(--grid-item-row-start);aspect-ratio:var(--grid-item-aspect-ratio)}.progress-container{display:flex;align-items:center;width:100%}.progress-bar{height:8px;position:relative;width:100%;margin-right:8px}.progress-fill{background:var(--progress-background);width:var(--progress-width);height:100%;position:relative;border-radius:inherit}.progress-bar.complete .progress-fill{background:#4cd964}.progress-bar.incomplete .progress-fill{background:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc)}.navigation-link:hover~.navigation-tooltip{opacity:1}.sheet-wrapper{position:var(--sheet-wrapper-position);bottom:0;left:0;z-index:var(--sheet-wrapper-z-index)}.sheet{width:var(--sheet-width-base);display:flex;background-color:var(--sheet-background-color);place-items:start center;place-content:start center;flex-direction:column;border-radius:var(--sheet-border-radius-base);box-shadow:var(--sheet-box-shadow);position:var(--sheet-position);bottom:var(--sheet-bottom);z-index:3;order:var(--sheet-order-base)}@media screen and (min-width: 768px){.sheet{border-radius:var(--sheet-border-radius-small)}}@media screen and (min-width: 1024px){.sheet{width:var(--sheet-width-medium);order:var(--sheet-order-medium);border-radius:var(--sheet-border-radius-medium)}}.sheet-drag-bar{transform:translate(-50%)}.sheet-child-wrapper::-webkit-scrollbar{width:0px;background:transparent}.menu-container{max-width:246px;overflow:hidden}.input-container input::placeholder{color:#6f8394;transition:color .3s ease-in;font-family:inherit}.input-container input:invalid{box-shadow:none}.input-container input[type=number]{-moz-appearance:textfield}.input-container input::-webkit-outer-spin-button,.input-container input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-container:focus-within input::placeholder{color:transparent;transition:color .3s}.input-container:focus-within span{transform:scale(1.1);transition:transform .3s}.input-container .number-input-buttons svg{opacity:var(--button-opacity, 1)}.dialogContainer{min-width:308px;display:flex;justify-content:flex-start;flex-direction:column;position:relative}.select-container{display:flex;justify-content:center;flex-direction:column;width:100%;position:relative}.select-body{cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:var(--select-height);width:var(--select-width);padding:0 8px;border:none;outline:none;overflow:hidden}.select-body:focus{border:solid 1.5px var(--focus-color)!important}.select-dropdown-contents{max-height:var(--dropdown-max-height);overflow-y:auto;position:absolute;left:var(--dropdown-left);transform:var(--dropdown-transform);scrollbar-width:var(--scrollbar-width)}.active-option{width:100%;height:100%;display:flex;align-items:center;justify-content:var(--active-option-justify)}.active-option .hide-on-active{display:none}.option{width:100%;padding:12px;border:none;display:flex;justify-content:var(--option-justify);outline:none;align-items:center;cursor:pointer;font-size:inherit}.transitionContainer{width:100%}.checkbox-container input[type=checkbox]{opacity:0}.checkbox-container label{display:flex;align-items:center;cursor:pointer}.checkbox-box:hover{background:var(--checkbox-unchecked-bg)}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{border:var(--checkbox-border-width) solid var(--checkbox-checked-color)!important;transition:box-shadow .3s .05s,border .3s .14s}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{background:var(--checkbox-checked-color);transform:scale(1.1);transition:all .3s}.hideScrollbar::-webkit-scrollbar{display:none}.showScrollbar::-webkit-scrollbar{display:auto}.image-container p{position:relative;z-index:100}.image-css>div{position:absolute;width:100%;height:100%;margin:0;padding:0;border-radius:inherit}.image-background:before{content:"";background:inherit;width:100%;height:100%;display:block;z-index:1;position:absolute;top:16px;transform:scale(.9);filter:blur(10px);opacity:.88;border-radius:inherit}.image-background:after{content:"";background:inherit;width:100%;height:100%;display:block;z-index:2;position:absolute;border-radius:inherit}.filter-overlay:before{content:"";border-radius:inherit;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;mix-blend-mode:var(--filter-mix-blend-mode, initial);opacity:var(--filter-opacity, initial);background:var(--filter-background, initial)}.close-button-container:hover{transform:translate(-2px,2px)!important;transition:transform .25s ease}@media screen and (max-width: var(--small-breakpoint, 768px)){.close-button-container{border-radius:11px!important;top:var(--small-top, 7px)!important;right:var(--small-right, 7px)!important}}.slider-bar{width:100%;height:6px;border-radius:var(--slider-border-radius);background:var(--slider-background-color);overflow:hidden}.slider-progress{height:100%;width:100%}.slider-progress.disabled{opacity:.5}.slider-progress.enabled{opacity:1}.slider-handle{width:var(--slider-handle-size);height:var(--slider-handle-size);background:var(--slider-handle-color);border-radius:var(--slider-handle-radius);box-shadow:var(--slider-handle-shadow);position:absolute;left:0}.slider-handle.enabled{cursor:pointer}.slider-handle.disabled{cursor:not-allowed}.table-container{display:grid}.table-row{display:grid;grid-template-columns:repeat(1,1fr)}.table-row.responsive{grid-template-columns:repeat(var(--table-columns),1fr)}.row-item{display:grid;align-items:center;width:100%;height:100%}.row-item.align-left{justify-items:start;padding:0 0 0 8px}.row-item.align-center{justify-items:center;padding:initial}.row-item.align-right{justify-items:end;padding:0 8px 0 0}@media (min-width: var(--breakpoint-small)){.table-row{grid-template-columns:repeat(var(--table-columns),1fr)}}.userCardContainer{display:flex;justify-content:flex-start;align-items:center}.userInfoContainer{padding-left:16px}.navigation-pill-cutout:before,.navigation-pill-cutout:after{content:" ";position:absolute;width:100vw;height:100%;background-color:#fff;top:30%;border-top:solid 2px #fff}.navigation-pill-cutout:before{right:100%;border-top-right-radius:24px}.navigation-pill-cutout:after{left:100%;border-top-left-radius:24px}.navigation-pill-item>div{height:100%}.expandedButtonContainer{margin-bottom:65px}@media (min-height: 600px){.expandedButtonContainer{margin-bottom:initial}}.awardCardContainer:hover>div:first-of-type{transform:scale(1.06);transition:transform .2s ease-in-out}.incremental{white-space:nowrap}.pin-form input[type=tel]::-webkit-inner-spin-button,.pin-form input[type=tel]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.phoneInputWrapper{width:100%;display:flex;flex-direction:column}.phoneInputContainer{display:flex;justify-content:center;align-items:center;width:100%;height:50px}.video-player{transition:all .5s cubic-bezier(0,.99,.67,1)}.video-player>iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:inherit}.play-button{cursor:pointer;transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button>div{transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover>div{transform:scale(1.28);transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover svg path{transition:all .5s cubic-bezier(0,.99,.67,1)}.iconContainer:hover{background:var(--icon-hover-bg)}.thumbnailContainer{scrollbar-width:none}.thumbnailContainer::-webkit-scrollbar{width:0;background:transparent}.ribbon{clip-path:inset(0);transform:rotate(45deg);right:-33px;top:12px;line-height:initial;text-align:center}.ribbon p{line-height:initial}.fillRuleWrapper{position:relative;background:#d4d4d4;cursor:pointer}.fillRuleWrapper:before{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;top:0;left:0;border-radius:50px 0 0}.fillRuleWrapper:after{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;bottom:0;right:0;border-radius:0 0 50px}.stickersContainer::-webkit-scrollbar{width:0;background:transparent}.wrapper{position:relative;height:100%;width:100%;overflow:hidden;cursor:pointer;display:flex}.container{position:absolute;left:0;height:100%;width:100%;border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;overflow:hidden}.upload{background:transparent;color:#eb417b;z-index:1;top:0;padding:0 2rem}.loading{background:#ff059f;color:#fff;z-index:2;top:-100%;position:relative;padding:0 2rem 0 3rem}.loadingBar{position:absolute;bottom:0;left:0;width:0%;height:3px;background:#fff}.done{background:#2abb8b;color:#fff;z-index:3;top:-100%;padding:0 2rem 0 3.5rem}.paperTypeCardContainer ::-webkit-scrollbar{width:0px;background:transparent}
|
|
1
|
+
body{font-family:var(--qds-font-body, "Inter", sans-serif);font-size:16px;line-height:1.65}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--qds-font-heading, "Inter", sans-serif)}button{font-family:var(--qds-font-body, "Inter", sans-serif)}.quantum-theme-root{font-size:16px}.quantum-theme-root>div{font-size:inherit}.avatar-container{position:relative;border-radius:15%;background-color:var(--avatar-background-color);background-position:center;background-size:cover;border:var(--avatar-border-width) solid var(--avatar-border-color);box-shadow:var(--avatar-box-shadow);display:flex;justify-content:center;align-items:center}.avatar-container.size-xSmall{height:var(--avatar-size-xSmall);width:var(--avatar-size-xSmall);min-width:var(--avatar-size-xSmall)}.avatar-container.size-small{height:var(--avatar-size-small);width:var(--avatar-size-small);min-width:var(--avatar-size-small)}.avatar-container.size-medium{height:var(--avatar-size-medium);width:var(--avatar-size-medium);min-width:var(--avatar-size-medium)}.avatar-container.size-large{height:var(--avatar-size-large);width:var(--avatar-size-large);min-width:var(--avatar-size-large)}.avatar-container.size-xLarge{height:var(--avatar-size-xLarge);width:var(--avatar-size-xLarge);min-width:var(--avatar-size-xLarge)}.avatar-container.has-image{background-image:var(--avatar-image-url)}.avatar-container.no-image{background-image:linear-gradient(var(--avatar-default-accent),var(--avatar-default-accent))}.active-bubble{position:absolute;bottom:0;background:var(--avatar-bubble-background);border-radius:50%;z-index:1;box-shadow:var(--avatar-box-shadow)}.active-bubble.size-xSmall{width:var(--avatar-bubble-size-xSmall);height:var(--avatar-bubble-size-xSmall);left:var(--avatar-bubble-left-xSmall)}.active-bubble.size-small{width:var(--avatar-bubble-size-small);height:var(--avatar-bubble-size-small);left:var(--avatar-bubble-left-small)}.active-bubble.size-medium{width:var(--avatar-bubble-size-medium);height:var(--avatar-bubble-size-medium);left:var(--avatar-bubble-left-medium)}.active-bubble.size-large{width:var(--avatar-bubble-size-large);height:var(--avatar-bubble-size-large);left:var(--avatar-bubble-left-large)}.active-bubble.size-xLarge{width:var(--avatar-bubble-size-xLarge);height:var(--avatar-bubble-size-xLarge);left:var(--avatar-bubble-left-xLarge)}.checkmark-container{position:absolute;bottom:0}.checkmark-container.size-xSmall{left:var(--avatar-bubble-left-xSmall)}.checkmark-container.size-small{left:var(--avatar-bubble-left-small)}.checkmark-container.size-medium{left:var(--avatar-bubble-left-medium)}.checkmark-container.size-large{left:var(--avatar-bubble-left-large)}.checkmark-container.size-xLarge{left:var(--avatar-bubble-left-xLarge)}.tooltip{position:relative;left:0;background:var(--tooltip-background);transform:var(--tooltip-transform)}.tooltip:after,.tooltip:before{border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.tooltip:after{border-color:#fefefe00;border-width:8px}.tooltip:before{border-color:#e3e6e800;border-width:9px}.tooltip.direction-left:after,.tooltip.direction-left:before{right:100%;top:50%}.tooltip.direction-left:after{border-right-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-left:before{border-right-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-right:after,.tooltip.direction-right:before{left:100%;top:50%}.tooltip.direction-right:after{border-left-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-right:before{border-left-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-top:after,.tooltip.direction-top:before{bottom:100%;left:50%}.tooltip.direction-top:after{border-bottom-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-top:before{border-bottom-color:var(--tooltip-background);margin-left:-9px}.tooltip.direction-bottom:after,.tooltip.direction-bottom:before{top:100%;left:50%}.tooltip.direction-bottom:after{border-top-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-bottom:before{border-top-color:var(--tooltip-background);margin-left:-9px}.tooltip.reposition{transform:translateY(-125%)}.button-base:disabled{opacity:.35;cursor:not-allowed}.button-base:disabled:hover{box-shadow:none!important;transform:translateY(0)!important}.button-hover:hover{transform:translateY(3px);box-shadow:none;transition:transform .2s,box-shadow .2s ease-out}.info-block-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-container span{display:block}.info-block-caption-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-caption-container span{display:block}.icon-link-container{width:100%}.icon-link-icon-container{display:flex;justify-content:center;align-items:center}.icon-link-title-container{white-space:nowrap}.icon-link-container.disabled,.icon-link-container.disabled .icon-link-icon-container,.icon-link-container.disabled .icon-link-title-container{cursor:not-allowed}.grid{display:grid;width:100%;grid-gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(var(--grid-column-size),1fr));grid-auto-rows:minmax(var(--grid-row-size),auto);grid-auto-flow:var(--grid-auto-flow);max-width:var(--grid-max-width);height:var(--grid-height);overflow:var(--grid-overflow)}.grid-item{width:100%;height:100%;display:flex;align-items:flex-end;grid-column-end:span var(--grid-item-col-span);grid-row-end:span var(--grid-item-row-span);grid-column-start:var(--grid-item-col-start);grid-row-start:var(--grid-item-row-start);aspect-ratio:var(--grid-item-aspect-ratio)}.progress-container{display:flex;align-items:center;width:100%}.progress-bar{height:8px;position:relative;width:100%;margin-right:8px}.progress-fill{background:var(--progress-background);width:var(--progress-width);height:100%;position:relative;border-radius:inherit}.progress-bar.complete .progress-fill{background:#4cd964}.progress-bar.incomplete .progress-fill{background:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc)}.navigation-link:hover~.navigation-tooltip{opacity:1}.sheet-wrapper{position:var(--sheet-wrapper-position);bottom:0;left:0;z-index:var(--sheet-wrapper-z-index)}.sheet{width:var(--sheet-width-base);display:flex;background-color:var(--sheet-background-color);place-items:start center;place-content:start center;flex-direction:column;border-radius:var(--sheet-border-radius-base);box-shadow:var(--sheet-box-shadow);position:var(--sheet-position);bottom:var(--sheet-bottom);z-index:3;order:var(--sheet-order-base)}@media screen and (min-width:768px){.sheet{border-radius:var(--sheet-border-radius-small)}}@media screen and (min-width:1024px){.sheet{width:var(--sheet-width-medium);order:var(--sheet-order-medium);border-radius:var(--sheet-border-radius-medium)}}.sheet-drag-bar{transform:translate(-50%)}.sheet-child-wrapper::-webkit-scrollbar{width:0px;background:transparent}.menu-container{max-width:246px;overflow:hidden}.input-container input::placeholder{color:#6f8394;transition:color .3s ease-in;font-family:inherit}.input-container input:invalid{box-shadow:none}.input-container input[type=number]{-moz-appearance:textfield}.input-container input::-webkit-outer-spin-button,.input-container input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-container:focus-within input::placeholder{color:transparent;transition:color .3s}.input-container:focus-within span{transform:scale(1.1);transition:transform .3s}.input-container .number-input-buttons svg{opacity:var(--button-opacity, 1)}.dialogContainer{min-width:308px;display:flex;justify-content:flex-start;flex-direction:column;position:relative}.select-container{display:flex;justify-content:center;flex-direction:column;width:100%;position:relative}.select-body{cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:var(--select-height);width:var(--select-width);padding:0 8px;border:none;outline:none;overflow:hidden}.select-body:focus{border:solid 1.5px var(--focus-color)!important}.select-dropdown-contents{max-height:var(--dropdown-max-height);overflow-y:auto;position:absolute;left:var(--dropdown-left);transform:var(--dropdown-transform);scrollbar-width:var(--scrollbar-width)}.active-option{width:100%;height:100%;display:flex;align-items:center;justify-content:var(--active-option-justify)}.active-option .hide-on-active{display:none}.option{width:100%;padding:12px;border:none;display:flex;justify-content:var(--option-justify);outline:none;align-items:center;cursor:pointer;font-size:inherit}.transitionContainer{width:100%}.checkbox-container input[type=checkbox]{opacity:0}.checkbox-container label{display:flex;align-items:center;cursor:pointer}.checkbox-box:hover{background:var(--checkbox-unchecked-bg)}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{border:var(--checkbox-border-width) solid var(--checkbox-checked-color)!important;transition:box-shadow .3s .05s,border .3s .14s}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{background:var(--checkbox-checked-color);transform:scale(1.1);transition:all .3s}.hideScrollbar::-webkit-scrollbar{display:none}.showScrollbar::-webkit-scrollbar{display:auto}.image-container p{position:relative;z-index:100}.image-css>div{position:absolute;width:100%;height:100%;margin:0;padding:0;border-radius:inherit}.image-background:before{content:"";background:inherit;width:100%;height:100%;display:block;z-index:1;position:absolute;top:16px;transform:scale(.9);filter:blur(10px);opacity:.88;border-radius:inherit}.image-background:after{content:"";background:inherit;width:100%;height:100%;display:block;z-index:2;position:absolute;border-radius:inherit}.filter-overlay:before{content:"";border-radius:inherit;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;mix-blend-mode:var(--filter-mix-blend-mode, initial);opacity:var(--filter-opacity, initial);background:var(--filter-background, initial)}.close-button-container:hover{transform:translate(-2px,2px)!important;transition:transform .25s ease}@media screen and (max-width: var(--small-breakpoint, 768px)){.close-button-container{border-radius:11px!important;top:var(--small-top, 7px)!important;right:var(--small-right, 7px)!important}}.slider-bar{width:100%;height:6px;border-radius:var(--slider-border-radius);background:var(--slider-background-color);overflow:hidden}.slider-progress{height:100%;width:100%}.slider-progress.disabled{opacity:.5}.slider-progress.enabled{opacity:1}.slider-handle{width:var(--slider-handle-size);height:var(--slider-handle-size);background:var(--slider-handle-color);border-radius:var(--slider-handle-radius);box-shadow:var(--slider-handle-shadow);position:absolute;left:0}.slider-handle.enabled{cursor:pointer}.slider-handle.disabled{cursor:not-allowed}.table-container{display:grid}.table-row{display:grid;grid-template-columns:repeat(1,1fr)}.table-row.responsive{grid-template-columns:repeat(var(--table-columns),1fr)}.row-item{display:grid;align-items:center;width:100%;height:100%}.row-item.align-left{justify-items:start;padding:0 0 0 8px}.row-item.align-center{justify-items:center;padding:initial}.row-item.align-right{justify-items:end;padding:0 8px 0 0}@media (min-width: var(--breakpoint-small)){.table-row{grid-template-columns:repeat(var(--table-columns),1fr)}}.userCardContainer{display:flex;justify-content:flex-start;align-items:center}.userInfoContainer{padding-left:16px}.navigation-pill-cutout:before,.navigation-pill-cutout:after{content:" ";position:absolute;width:100vw;height:100%;background-color:#fff;top:30%;border-top:solid 2px #fff}.navigation-pill-cutout:before{right:100%;border-top-right-radius:24px}.navigation-pill-cutout:after{left:100%;border-top-left-radius:24px}.navigation-pill-item>div{height:100%}.expandedButtonContainer{margin-bottom:65px}@media(min-height:600px){.expandedButtonContainer{margin-bottom:initial}}.awardCardContainer:hover>div:first-of-type{transform:scale(1.06);transition:transform .2s ease-in-out}.incremental{white-space:nowrap}.pin-form input[type=text]::-webkit-inner-spin-button,.pin-form input[type=text]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.phoneInputWrapper{width:100%;display:flex;flex-direction:column}.phoneInputContainer{display:flex;justify-content:center;align-items:center;width:100%;height:50px}.video-player{transition:all .5s cubic-bezier(0,.99,.67,1)}.video-player>iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:inherit}.play-button{cursor:pointer;transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button>div{transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover>div{transform:scale(1.28);transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover svg path{transition:all .5s cubic-bezier(0,.99,.67,1)}.iconContainer:hover{background:var(--icon-hover-bg)}.thumbnailContainer{scrollbar-width:none}.thumbnailContainer::-webkit-scrollbar{width:0;background:transparent}.ribbon{clip-path:inset(0);transform:rotate(45deg);right:-33px;top:12px;line-height:initial;text-align:center}.ribbon p{line-height:initial}.fillRuleWrapper{position:relative;background:#d4d4d4;cursor:pointer}.fillRuleWrapper:before{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;top:0;left:0;border-radius:50px 0 0}.fillRuleWrapper:after{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;bottom:0;right:0;border-radius:0 0 50px}.stickersContainer::-webkit-scrollbar{width:0;background:transparent}.wrapper{position:relative;height:100%;width:100%;overflow:hidden;cursor:pointer;display:flex}.container{position:absolute;left:0;height:100%;width:100%;border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;overflow:hidden}.upload{background:transparent;color:#eb417b;z-index:1;top:0;padding:0 2rem}.loading{background:#ff059f;color:#fff;z-index:2;top:-100%;position:relative;padding:0 2rem 0 3rem}.loadingBar{position:absolute;bottom:0;left:0;width:0%;height:3px;background:#fff}.done{background:#2abb8b;color:#fff;z-index:3;top:-100%;padding:0 2rem 0 3.5rem}.paperTypeCardContainer ::-webkit-scrollbar{width:0px;background:transparent}
|