@sendoutcards/quantum-design-ui 2.0.0-alpha.7 → 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 +109 -100
- 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}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
|
8
8
|
import { MotionProps } from 'framer-motion';
|
|
9
9
|
import { MotionValue } from 'framer-motion';
|
|
10
10
|
import { Provider } from 'react';
|
|
11
|
+
import { ReactNode } from 'react';
|
|
11
12
|
import { RgbColor } from 'react-colorful';
|
|
12
13
|
import { Target as Target_2 } from 'framer-motion';
|
|
13
14
|
import { TargetAndTransition } from 'framer-motion';
|
|
@@ -36,6 +37,7 @@ export declare type AccordionBodyProps = {
|
|
|
36
37
|
onAnimationComplete?: () => void;
|
|
37
38
|
overflow?: Overflow;
|
|
38
39
|
insetBody?: HOCSpacingKeys;
|
|
40
|
+
children?: default_2.ReactNode;
|
|
39
41
|
};
|
|
40
42
|
|
|
41
43
|
export declare const AccordionHeading: ({ children, eventKey, headingSize, onHeadingClick, arrowLocation, }: AccordionHeadingProps) => JSX_2.Element;
|
|
@@ -557,7 +559,7 @@ export declare const colors: {
|
|
|
557
559
|
export declare type ColorSelection = PrimaryBrandColorSelection | SecondaryBrandColorSelection | SuccessColorSelection | WarningColorSelection | DangerColorSelection | AccentColorSelection | GrayScaleColorSelection | BlueScaleColorSelection | PurpleScaleColorSelection;
|
|
558
560
|
|
|
559
561
|
export declare type ColorStop = {
|
|
560
|
-
color:
|
|
562
|
+
color: HOCSwatchColorKeys;
|
|
561
563
|
percentage: number;
|
|
562
564
|
};
|
|
563
565
|
|
|
@@ -1199,26 +1201,26 @@ declare const entities: {
|
|
|
1199
1201
|
};
|
|
1200
1202
|
};
|
|
1201
1203
|
icons: {
|
|
1202
|
-
sizes: {
|
|
1203
|
-
xSmall: number;
|
|
1204
|
-
small: number;
|
|
1205
|
-
medium: number;
|
|
1206
|
-
large: number;
|
|
1207
|
-
xLarge: number;
|
|
1204
|
+
readonly sizes: {
|
|
1205
|
+
readonly xSmall: number;
|
|
1206
|
+
readonly small: number;
|
|
1207
|
+
readonly medium: number;
|
|
1208
|
+
readonly large: number;
|
|
1209
|
+
readonly xLarge: number;
|
|
1208
1210
|
};
|
|
1209
|
-
colors: {
|
|
1210
|
-
default: string | undefined;
|
|
1211
|
-
primaryBodyText: string;
|
|
1212
|
-
primaryHeadingText: string | undefined;
|
|
1213
|
-
inverseBodyText: string;
|
|
1214
|
-
inverseHeadingText: string;
|
|
1215
|
-
primaryBrand: string;
|
|
1216
|
-
secondaryBrand: string;
|
|
1217
|
-
warning: string;
|
|
1218
|
-
danger: string;
|
|
1219
|
-
success: string;
|
|
1220
|
-
background: string;
|
|
1221
|
-
accent: string;
|
|
1211
|
+
readonly colors: {
|
|
1212
|
+
readonly default: string | undefined;
|
|
1213
|
+
readonly primaryBodyText: string;
|
|
1214
|
+
readonly primaryHeadingText: string | undefined;
|
|
1215
|
+
readonly inverseBodyText: string;
|
|
1216
|
+
readonly inverseHeadingText: string;
|
|
1217
|
+
readonly primaryBrand: string;
|
|
1218
|
+
readonly secondaryBrand: string;
|
|
1219
|
+
readonly warning: string;
|
|
1220
|
+
readonly danger: string;
|
|
1221
|
+
readonly success: string;
|
|
1222
|
+
readonly background: string;
|
|
1223
|
+
readonly accent: string;
|
|
1222
1224
|
};
|
|
1223
1225
|
};
|
|
1224
1226
|
card: {
|
|
@@ -1665,26 +1667,26 @@ export declare type IconProps = {
|
|
|
1665
1667
|
} & Omit<SVGProps, 'entity'>;
|
|
1666
1668
|
|
|
1667
1669
|
declare const icons: {
|
|
1668
|
-
sizes: {
|
|
1669
|
-
xSmall: number;
|
|
1670
|
-
small: number;
|
|
1671
|
-
medium: number;
|
|
1672
|
-
large: number;
|
|
1673
|
-
xLarge: number;
|
|
1670
|
+
readonly sizes: {
|
|
1671
|
+
readonly xSmall: number;
|
|
1672
|
+
readonly small: number;
|
|
1673
|
+
readonly medium: number;
|
|
1674
|
+
readonly large: number;
|
|
1675
|
+
readonly xLarge: number;
|
|
1674
1676
|
};
|
|
1675
|
-
colors: {
|
|
1676
|
-
default: string | undefined;
|
|
1677
|
-
primaryBodyText: string;
|
|
1678
|
-
primaryHeadingText: string | undefined;
|
|
1679
|
-
inverseBodyText: string;
|
|
1680
|
-
inverseHeadingText: string;
|
|
1681
|
-
primaryBrand: string;
|
|
1682
|
-
secondaryBrand: string;
|
|
1683
|
-
warning: string;
|
|
1684
|
-
danger: string;
|
|
1685
|
-
success: string;
|
|
1686
|
-
background: string;
|
|
1687
|
-
accent: string;
|
|
1677
|
+
readonly colors: {
|
|
1678
|
+
readonly default: string | undefined;
|
|
1679
|
+
readonly primaryBodyText: string;
|
|
1680
|
+
readonly primaryHeadingText: string | undefined;
|
|
1681
|
+
readonly inverseBodyText: string;
|
|
1682
|
+
readonly inverseHeadingText: string;
|
|
1683
|
+
readonly primaryBrand: string;
|
|
1684
|
+
readonly secondaryBrand: string;
|
|
1685
|
+
readonly warning: string;
|
|
1686
|
+
readonly danger: string;
|
|
1687
|
+
readonly success: string;
|
|
1688
|
+
readonly background: string;
|
|
1689
|
+
readonly accent: string;
|
|
1688
1690
|
};
|
|
1689
1691
|
};
|
|
1690
1692
|
|
|
@@ -2305,6 +2307,7 @@ export declare type PromotionWidgetProps = {
|
|
|
2305
2307
|
width?: string;
|
|
2306
2308
|
type: ThemeMode;
|
|
2307
2309
|
buttonSize?: SizeType;
|
|
2310
|
+
children?: ReactNode;
|
|
2308
2311
|
};
|
|
2309
2312
|
|
|
2310
2313
|
export declare const promptingsTheme: Entities;
|
|
@@ -2330,6 +2333,7 @@ export declare type QDSChromeProps = {
|
|
|
2330
2333
|
accountRouteOnClick: () => void;
|
|
2331
2334
|
quickLinks: QuickLinksType;
|
|
2332
2335
|
isFullScreen?: boolean;
|
|
2336
|
+
children?: ReactNode;
|
|
2333
2337
|
};
|
|
2334
2338
|
|
|
2335
2339
|
export declare const QuantitySlider: FC<QuantitySliderProps>;
|
|
@@ -2384,7 +2388,7 @@ declare type QuickLinkType = {
|
|
|
2384
2388
|
link: Item;
|
|
2385
2389
|
};
|
|
2386
2390
|
|
|
2387
|
-
declare type QuoteType =
|
|
2391
|
+
declare type QuoteType = Exclude<ThemeMode, 'accent' | 'shadow'>;
|
|
2388
2392
|
|
|
2389
2393
|
export declare const RadioOptionCard: FC<RadioOptionCardProps>;
|
|
2390
2394
|
|
|
@@ -2470,6 +2474,7 @@ declare type RevealingContentProps = {
|
|
|
2470
2474
|
width: string;
|
|
2471
2475
|
height: string;
|
|
2472
2476
|
isMobile: boolean;
|
|
2477
|
+
children?: ReactNode;
|
|
2473
2478
|
};
|
|
2474
2479
|
|
|
2475
2480
|
declare type RotationAndOffsetType = {
|
|
@@ -2537,6 +2542,7 @@ declare type SelectableCardProps = {
|
|
|
2537
2542
|
isActive: boolean;
|
|
2538
2543
|
onClick?: () => void;
|
|
2539
2544
|
shouldShowActiveIcons?: boolean;
|
|
2545
|
+
children?: ReactNode;
|
|
2540
2546
|
};
|
|
2541
2547
|
|
|
2542
2548
|
export declare const SelectableList: FC<SelectableListProps>;
|
|
@@ -2546,6 +2552,7 @@ export declare type SelectableListProps = {
|
|
|
2546
2552
|
orientation?: ListOrientation;
|
|
2547
2553
|
selectedIndexes: number[];
|
|
2548
2554
|
setSelectedIndexes: (selectedIndexes: number[]) => void;
|
|
2555
|
+
children?: ReactNode;
|
|
2549
2556
|
};
|
|
2550
2557
|
|
|
2551
2558
|
export declare type SelectableOptions = {
|
|
@@ -2554,7 +2561,7 @@ export declare type SelectableOptions = {
|
|
|
2554
2561
|
glare: GlareType;
|
|
2555
2562
|
};
|
|
2556
2563
|
|
|
2557
|
-
export declare type SelectFocusType =
|
|
2564
|
+
export declare type SelectFocusType = HOCSwatchColorKeys;
|
|
2558
2565
|
|
|
2559
2566
|
export declare type SelectProps = {
|
|
2560
2567
|
alignment?: AlignmentOptions;
|
|
@@ -2794,6 +2801,7 @@ export declare type StepperProps = {
|
|
|
2794
2801
|
type: ButtonType;
|
|
2795
2802
|
title: string;
|
|
2796
2803
|
};
|
|
2804
|
+
children?: ReactNode;
|
|
2797
2805
|
};
|
|
2798
2806
|
|
|
2799
2807
|
export declare const Stoplight: ({ activeIndex, setActiveIndex, isExpanded, setIsExpanded, type, onClick, orientation, isCollapsible, children, }: StoplightProps) => JSX_2.Element;
|
|
@@ -3280,26 +3288,26 @@ blue: string;
|
|
|
3280
3288
|
};
|
|
3281
3289
|
};
|
|
3282
3290
|
icons: {
|
|
3283
|
-
sizes: {
|
|
3284
|
-
xSmall: number;
|
|
3285
|
-
small: number;
|
|
3286
|
-
medium: number;
|
|
3287
|
-
large: number;
|
|
3288
|
-
xLarge: number;
|
|
3289
|
-
};
|
|
3290
|
-
colors: {
|
|
3291
|
-
default: string | undefined;
|
|
3292
|
-
primaryBodyText: string;
|
|
3293
|
-
primaryHeadingText: string | undefined;
|
|
3294
|
-
inverseBodyText: string;
|
|
3295
|
-
inverseHeadingText: string;
|
|
3296
|
-
primaryBrand: string;
|
|
3297
|
-
secondaryBrand: string;
|
|
3298
|
-
warning: string;
|
|
3299
|
-
danger: string;
|
|
3300
|
-
success: string;
|
|
3301
|
-
background: string;
|
|
3302
|
-
accent: string;
|
|
3291
|
+
readonly sizes: {
|
|
3292
|
+
readonly xSmall: number;
|
|
3293
|
+
readonly small: number;
|
|
3294
|
+
readonly medium: number;
|
|
3295
|
+
readonly large: number;
|
|
3296
|
+
readonly xLarge: number;
|
|
3297
|
+
};
|
|
3298
|
+
readonly colors: {
|
|
3299
|
+
readonly default: string | undefined;
|
|
3300
|
+
readonly primaryBodyText: string;
|
|
3301
|
+
readonly primaryHeadingText: string | undefined;
|
|
3302
|
+
readonly inverseBodyText: string;
|
|
3303
|
+
readonly inverseHeadingText: string;
|
|
3304
|
+
readonly primaryBrand: string;
|
|
3305
|
+
readonly secondaryBrand: string;
|
|
3306
|
+
readonly warning: string;
|
|
3307
|
+
readonly danger: string;
|
|
3308
|
+
readonly success: string;
|
|
3309
|
+
readonly background: string;
|
|
3310
|
+
readonly accent: string;
|
|
3303
3311
|
};
|
|
3304
3312
|
};
|
|
3305
3313
|
card: {
|
|
@@ -3797,26 +3805,26 @@ blue: string;
|
|
|
3797
3805
|
};
|
|
3798
3806
|
};
|
|
3799
3807
|
icons: {
|
|
3800
|
-
sizes: {
|
|
3801
|
-
xSmall: number;
|
|
3802
|
-
small: number;
|
|
3803
|
-
medium: number;
|
|
3804
|
-
large: number;
|
|
3805
|
-
xLarge: number;
|
|
3806
|
-
};
|
|
3807
|
-
colors: {
|
|
3808
|
-
default: string | undefined;
|
|
3809
|
-
primaryBodyText: string;
|
|
3810
|
-
primaryHeadingText: string | undefined;
|
|
3811
|
-
inverseBodyText: string;
|
|
3812
|
-
inverseHeadingText: string;
|
|
3813
|
-
primaryBrand: string;
|
|
3814
|
-
secondaryBrand: string;
|
|
3815
|
-
warning: string;
|
|
3816
|
-
danger: string;
|
|
3817
|
-
success: string;
|
|
3818
|
-
background: string;
|
|
3819
|
-
accent: string;
|
|
3808
|
+
readonly sizes: {
|
|
3809
|
+
readonly xSmall: number;
|
|
3810
|
+
readonly small: number;
|
|
3811
|
+
readonly medium: number;
|
|
3812
|
+
readonly large: number;
|
|
3813
|
+
readonly xLarge: number;
|
|
3814
|
+
};
|
|
3815
|
+
readonly colors: {
|
|
3816
|
+
readonly default: string | undefined;
|
|
3817
|
+
readonly primaryBodyText: string;
|
|
3818
|
+
readonly primaryHeadingText: string | undefined;
|
|
3819
|
+
readonly inverseBodyText: string;
|
|
3820
|
+
readonly inverseHeadingText: string;
|
|
3821
|
+
readonly primaryBrand: string;
|
|
3822
|
+
readonly secondaryBrand: string;
|
|
3823
|
+
readonly warning: string;
|
|
3824
|
+
readonly danger: string;
|
|
3825
|
+
readonly success: string;
|
|
3826
|
+
readonly background: string;
|
|
3827
|
+
readonly accent: string;
|
|
3820
3828
|
};
|
|
3821
3829
|
};
|
|
3822
3830
|
card: {
|
|
@@ -4124,6 +4132,7 @@ export declare type UpsaleSheetProps = {
|
|
|
4124
4132
|
width?: string;
|
|
4125
4133
|
inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
|
|
4126
4134
|
outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
|
|
4135
|
+
children?: ReactNode;
|
|
4127
4136
|
};
|
|
4128
4137
|
|
|
4129
4138
|
export declare const useColorSwatch: () => {
|
|
@@ -4502,26 +4511,26 @@ export declare const useTheme: () => {
|
|
|
4502
4511
|
};
|
|
4503
4512
|
};
|
|
4504
4513
|
icons: {
|
|
4505
|
-
sizes: {
|
|
4506
|
-
xSmall: number;
|
|
4507
|
-
small: number;
|
|
4508
|
-
medium: number;
|
|
4509
|
-
large: number;
|
|
4510
|
-
xLarge: number;
|
|
4514
|
+
readonly sizes: {
|
|
4515
|
+
readonly xSmall: number;
|
|
4516
|
+
readonly small: number;
|
|
4517
|
+
readonly medium: number;
|
|
4518
|
+
readonly large: number;
|
|
4519
|
+
readonly xLarge: number;
|
|
4511
4520
|
};
|
|
4512
|
-
colors: {
|
|
4513
|
-
default: string | undefined;
|
|
4514
|
-
primaryBodyText: string;
|
|
4515
|
-
primaryHeadingText: string | undefined;
|
|
4516
|
-
inverseBodyText: string;
|
|
4517
|
-
inverseHeadingText: string;
|
|
4518
|
-
primaryBrand: string;
|
|
4519
|
-
secondaryBrand: string;
|
|
4520
|
-
warning: string;
|
|
4521
|
-
danger: string;
|
|
4522
|
-
success: string;
|
|
4523
|
-
background: string;
|
|
4524
|
-
accent: string;
|
|
4521
|
+
readonly colors: {
|
|
4522
|
+
readonly default: string | undefined;
|
|
4523
|
+
readonly primaryBodyText: string;
|
|
4524
|
+
readonly primaryHeadingText: string | undefined;
|
|
4525
|
+
readonly inverseBodyText: string;
|
|
4526
|
+
readonly inverseHeadingText: string;
|
|
4527
|
+
readonly primaryBrand: string;
|
|
4528
|
+
readonly secondaryBrand: string;
|
|
4529
|
+
readonly warning: string;
|
|
4530
|
+
readonly danger: string;
|
|
4531
|
+
readonly success: string;
|
|
4532
|
+
readonly background: string;
|
|
4533
|
+
readonly accent: string;
|
|
4525
4534
|
};
|
|
4526
4535
|
};
|
|
4527
4536
|
card: {
|