diff --git a/.changeset/afraid-pugs-kiss.md b/.changeset/afraid-pugs-kiss.md new file mode 100644 index 00000000000..dbfe3c05183 --- /dev/null +++ b/.changeset/afraid-pugs-kiss.md @@ -0,0 +1,8 @@ +--- +"@aws-amplify/ui-react": major +--- + +BREAKING: +* Removing stylistic data-attributes from React primitives +* Update SwitchField classnames to be BEM +* Removing remnants of "countryCode" diff --git a/.changeset/bogus-cats-shred.md b/.changeset/bogus-cats-shred.md new file mode 100644 index 00000000000..42e909852ca --- /dev/null +++ b/.changeset/bogus-cats-shred.md @@ -0,0 +1,46 @@ +--- +"@aws-amplify/ui-react": major +"@aws-amplify/ui": major +--- + +breaking: refactoring Tabs component to remove Radix dependency and allow more composability and customization. + +```diff +- import { Tabs, TabItem } from '@aws-amplify/ui-react' ++ import { Tabs } from '@aws-amplify/ui-react' + +- +- +- Tab 1 Content +- + ++ ++ ++ Tab 1 ++ ++ ++ Tab 1 Content ++ ++ +``` + + +You can also use the Tabs in a uncomposed way too: + +```jsx + +``` + +Some notable differences: +* Instead of providing a `defaultIndex` or `currentIndex` you provide a `defaultValue` or `value`. Each Tabs.Item and Tabs.Panel should have a `value` that matches with the corresponding element. +* `onChange` becomes `onValueChange` +* You should supply a `defaultValue` or `value` or else there will be no default selected tab. Previously the Tabs component would default to the first tab. + +There are also more design tokens and better CSS classes for easier customization. diff --git a/.changeset/clever-mirrors-boil.md b/.changeset/clever-mirrors-boil.md new file mode 100644 index 00000000000..1b9eec82b7d --- /dev/null +++ b/.changeset/clever-mirrors-boil.md @@ -0,0 +1,7 @@ +--- +"@aws-amplify/ui-react-native": minor +"@aws-amplify/ui-react": minor +"@aws-amplify/ui": minor +--- + +feat: allow themes to have arbitrary tokens diff --git a/.changeset/cool-mangos-dress.md b/.changeset/cool-mangos-dress.md new file mode 100644 index 00000000000..4e7ee47538a --- /dev/null +++ b/.changeset/cool-mangos-dress.md @@ -0,0 +1,7 @@ +--- +"@aws-amplify/ui-react-storage": patch +--- + +fix(react-storage): StorageImage now fires onStorageGetError when an object is not found + +StorageImage now has a prop called `validateObjectExistence` which is default to `true`. This checks if there is a file at the given path before adding it as the `src` on an image. diff --git a/.changeset/hip-apples-happen.md b/.changeset/hip-apples-happen.md new file mode 100644 index 00000000000..d482144a2fa --- /dev/null +++ b/.changeset/hip-apples-happen.md @@ -0,0 +1,20 @@ +--- +"@aws-amplify/ui-react": major +"@aws-amplify/ui": major +--- + +breaking: updating classnames for better BEM syntax + +* `amplify-loader__percentage-text` -> `amplify-loader__label` +* `amplify-menu-content-wrapper` -> `amplify-menu__wrapper` +* `amplify-menu-trigger` -> `amplify-menu__trigger` +* `amplify-menu-content` -> `amplify-menu__content` +* `amplify-menu-content__item` -> `amplify-menu__content__item` +* `amplify-pagination__item-button` -> `amplify-pagination__item` +* `amplify-pagination__item-current` -> `amplify-pagination__item--current` +* `amplify-pagination__item-ellipsis` -> `amplify-pagination__item--ellipsis` +* `amplify-rating-icon-container` -> `amplify-rating__item` +* `amplify-rating-icon` -> `amplify-rating__icon` +* `amplify-rating-icon-filled` -> `amplify-rating__icon--filled` +* `amplify-rating-icon-empty` -> `amplify-rating__icon--empty` +* `amplify-select__icon-wrapper` -> `amplify-select__icon` diff --git a/.changeset/itchy-ads-bake.md b/.changeset/itchy-ads-bake.md new file mode 100644 index 00000000000..6d9c21a6fdc --- /dev/null +++ b/.changeset/itchy-ads-bake.md @@ -0,0 +1,31 @@ +--- +"@aws-amplify/ui": major +"@aws-amplify/ui-react": major +--- + +breaking: renaming Expander to Accordion and removing Radix dependency. The Accordion component is now built with `
` and `` elements to handle showing/hiding content. + +```jsx + + + + Click me first! + + + + Now when you click the second item, this item will automatically collapse. + + + + + Then click me! + + + + Notice how only one item can be open at a time for the single Accordion type. + + + +``` + +The Accordion can be controlled or uncontrolled (with a default value) diff --git a/.changeset/mighty-gifts-crash.md b/.changeset/mighty-gifts-crash.md new file mode 100644 index 00000000000..937e5ecd9bc --- /dev/null +++ b/.changeset/mighty-gifts-crash.md @@ -0,0 +1,35 @@ +--- +"@aws-amplify/ui": major +"@aws-amplify/ui-react": major +--- + +breaking(theme): removing brand namespace from the theme tokens + +```diff +- tokens.colors.brand.primary[10] ++ tokens.colors.primary[10] +``` + + +```diff +const theme = createTheme({ + tokens: { + colors: { +- brand: { + primary: { + //... + } +- } + } + } +}) +``` + +We also added the ability to easily set the entire range of primary and secondary colors at the theme level + +```ts +const theme = createTheme({ + primaryColor: 'red', + secondaryColor: 'green' +}); +``` diff --git a/.changeset/plenty-apples-end.md b/.changeset/plenty-apples-end.md new file mode 100644 index 00000000000..82c650b4ef3 --- /dev/null +++ b/.changeset/plenty-apples-end.md @@ -0,0 +1,12 @@ +--- +"@aws-amplify/ui-react": patch +--- + +refactor(ui): update RadioGroupField to use Fieldset + +Update to `RadioGroupField` component props: + - `legend` replaces `label` + - `legendHidden` replaces `labelHidden` + +Example usage: +``` ``` diff --git a/.changeset/slow-ants-attend.md b/.changeset/slow-ants-attend.md new file mode 100644 index 00000000000..c3949326df4 --- /dev/null +++ b/.changeset/slow-ants-attend.md @@ -0,0 +1,23 @@ +--- +"@aws-amplify/ui-react": minor +"@aws-amplify/ui": minor +--- + +feat: add CSS layers support and CSS file splitting. The default style import '@aws-amplify/ui-react/styles.css' remains unchanged so these features are opt-in. +We are now exposing each different component CSS file if you want fine-grained control over what CSS is loaded. Additionally, we will have a CSS reset and a base CSS file. +If you only wanted the button CSS you could do this: + +```javascript +import '@aws-amplify/ui-react/styles/reset.css' +import '@aws-amplify/ui-react/styles/base.css' +import '@aws-amplify/ui-react/styles/button.css' +``` + +You can also use the main 'styles.css' import with the new reset file too. + +To use CSS layers, replace '.css' with '.layer.css' for any CSS import. + +```diff +- import '@aws-amplify/ui-react/styles.css' ++ import '@aws-amplify/ui-react/styles.layer.css' +``` diff --git a/.github/actions/changed-packages/action.yml b/.github/actions/changed-packages/action.yml index e43e3761cb1..03b3f9122f4 100644 --- a/.github/actions/changed-packages/action.yml +++ b/.github/actions/changed-packages/action.yml @@ -32,7 +32,9 @@ runs: # check if any of the modified files belongs to the specified input packages if echo "$changed_files" | grep -Eq "^($package_names)/"; then - echo "has-changed-packages=true" >> $GITHUB_OUTPUT + # @todo-migration re-enable + # echo "has-changed-packages=true" >> $GITHUB_OUTPUT + echo "has-changed-packages=false" >> $GITHUB_OUTPUT else echo "has-changed-packages=false" >> $GITHUB_OUTPUT fi diff --git a/.github/dependency-review/config.yml b/.github/dependency-review/config.yml index 2820a4e0768..4555add810b 100644 --- a/.github/dependency-review/config.yml +++ b/.github/dependency-review/config.yml @@ -1,6 +1,7 @@ allow-licenses: - '0BSD' - 'Apache-2.0' + - 'Apache-2.0 AND MIT' - 'BlueOak-1.0.0' - 'BSL-1.0' - 'BSD-1-Clause' @@ -17,6 +18,7 @@ allow-licenses: - 'ISC' - 'JSON' - 'MIT' + - 'MIT AND Zlib' - 'MPL-2.0' - 'NTP' - 'OFL-1.0' diff --git a/.github/workflows/build-and-runtime-test.yml b/.github/workflows/build-and-runtime-test.yml index fd26e099022..51776126e02 100644 --- a/.github/workflows/build-and-runtime-test.yml +++ b/.github/workflows/build-and-runtime-test.yml @@ -45,10 +45,10 @@ jobs: uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f with: persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/build-system-test-react-native.yml b/.github/workflows/build-system-test-react-native.yml index 602bea3c0f9..e4de6bc57cf 100644 --- a/.github/workflows/build-system-test-react-native.yml +++ b/.github/workflows/build-system-test-react-native.yml @@ -67,12 +67,12 @@ jobs: key: ${{ runner.os }}-nodemodules-${{ inputs.commit }} env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3 - - name: Install Java 11 + - name: Install Java 17 if: ${{ matrix.platform == 'android' }} uses: actions/setup-java@de1bb2b0c5634f0fc4438d7aa9944e68f9bf86cc # 3.6.0 with: distribution: 'corretto' # Amazon Corretto Build of OpenJDK - java-version: '11' + java-version: '17' - name: Install iOS simulator if: ${{ matrix.platform == 'ios' }} diff --git a/.github/workflows/build-system-test.yml b/.github/workflows/build-system-test.yml index d2fea938c50..3db631f3cc7 100644 --- a/.github/workflows/build-system-test.yml +++ b/.github/workflows/build-system-test.yml @@ -31,21 +31,21 @@ jobs: build-tool-version: latest pkg-manager: npm language: ts - node-version: 16 + node-version: 20 - framework: react framework-version: 16 build-tool: cra build-tool-version: latest pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: react framework-version: latest build-tool: cra build-tool-version: latest pkg-manager: npm language: js - node-version: 18 + node-version: 20 - framework: react framework-version: latest build-tool: cra @@ -53,21 +53,21 @@ jobs: pkg-manager: yarn pkg-manager-version: 1 language: ts - node-version: 18 + node-version: 20 - framework: react - framework-version: 17 + framework-version: 18 build-tool: next - build-tool-version: 11 + build-tool-version: 12 pkg-manager: npm language: ts - node-version: 16 + node-version: 20 - framework: react framework-version: latest build-tool: vite build-tool-version: 2 pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: angular framework-version: latest @@ -75,14 +75,14 @@ jobs: build-tool-version: 16 pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: angular framework-version: 14 build-tool: angular-cli build-tool-version: 14 pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: vue framework-version: 3 # here use "3" instead of "latest" because .vuerc(preset) doesn't accept "latest" as "vueVersion" @@ -90,28 +90,28 @@ jobs: build-tool-version: latest pkg-manager: yarn # vue-cli defualt pkg-manager is yarn. It can't be customized in the preset.json. language: ts - node-version: 18 + node-version: 20 - framework: vue framework-version: latest build-tool: vite build-tool-version: latest pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: vue framework-version: latest build-tool: vite build-tool-version: 2 pkg-manager: npm language: ts - node-version: 18 + node-version: 20 - framework: vue framework-version: latest build-tool: nuxt build-tool-version: latest pkg-manager: npm language: ts - node-version: 18 + node-version: 20 env: MEGA_APP_NAME: ${{ matrix.framework }}-${{ matrix.framework-version }}-${{ matrix.build-tool }}-${{ matrix.build-tool-version }}-${{ matrix.language }} diff --git a/.github/workflows/publish-hotfix.yml b/.github/workflows/publish-hotfix.yml index ad59e9d2f37..6b10f2465a0 100644 --- a/.github/workflows/publish-hotfix.yml +++ b/.github/workflows/publish-hotfix.yml @@ -45,10 +45,10 @@ jobs: steps: - name: Checkout repo uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -94,10 +94,10 @@ jobs: with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/publish-latest.yml b/.github/workflows/publish-latest.yml index 609baf4f341..a665a183303 100644 --- a/.github/workflows/publish-latest.yml +++ b/.github/workflows/publish-latest.yml @@ -44,10 +44,10 @@ jobs: steps: - name: Checkout repo uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -93,10 +93,10 @@ jobs: with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/publish-next.yml b/.github/workflows/publish-next.yml index 11a7fc3a553..9b4d46bf13c 100644 --- a/.github/workflows/publish-next.yml +++ b/.github/workflows/publish-next.yml @@ -73,10 +73,10 @@ jobs: with: persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -174,10 +174,10 @@ jobs: steps: - name: Checkout repo uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/reusable-e2e.yml b/.github/workflows/reusable-e2e.yml index 95f932af153..8d682bf995e 100644 --- a/.github/workflows/reusable-e2e.yml +++ b/.github/workflows/reusable-e2e.yml @@ -96,10 +96,10 @@ jobs: env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -332,7 +332,7 @@ jobs: fetch-depth: 2 persist-credentials: false - - name: Determine if there were changes to react-native packages + - name: Determine if there were changes to react-native dependency packages if: ${{ inputs.skip-changed-packages-check == 'false' }} id: has-rn-changed-packages uses: ./.github/actions/changed-packages @@ -340,7 +340,9 @@ jobs: commit: ${{ inputs.commit }} packages: | packages/react-native + packages/react-native-auth packages/react-core + packages/react-core-auth packages/react-core-notifications packages/ui packages/e2e @@ -348,7 +350,7 @@ jobs: e2e-ios: needs: check-changed-packages if: ${{ inputs.skip-changed-packages-check == 'true' || needs.check-changed-packages.outputs.has-changed-packages == 'true' }} - runs-on: macos-12 + runs-on: macos-13 environment: ci env: NODE_ENV: test @@ -360,10 +362,10 @@ jobs: repository: ${{ inputs.repository }} persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -468,7 +470,7 @@ jobs: e2e-android: needs: check-changed-packages if: ${{ inputs.skip-changed-packages-check == 'true' || needs.check-changed-packages.outputs.has-changed-packages == 'true' }} - runs-on: macos-12 + runs-on: macos-13 environment: ci env: NODE_ENV: test @@ -491,10 +493,10 @@ jobs: distribution: 'corretto' # Amazon Corretto Build of OpenJDK java-version: '11' - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -618,10 +620,10 @@ jobs: repository: ${{ inputs.repository }} persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/reusable-setup-cache.yml b/.github/workflows/reusable-setup-cache.yml index 41add261b9b..fc770fabce2 100644 --- a/.github/workflows/reusable-setup-cache.yml +++ b/.github/workflows/reusable-setup-cache.yml @@ -22,10 +22,10 @@ jobs: ref: ${{ inputs.commit }} repository: ${{ inputs.repository }} persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/reusable-tagged-publish.yml b/.github/workflows/reusable-tagged-publish.yml index 87882fdb246..1f96770390c 100644 --- a/.github/workflows/reusable-tagged-publish.yml +++ b/.github/workflows/reusable-tagged-publish.yml @@ -23,10 +23,10 @@ jobs: run: exit 1 - name: Checkout repo uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.github/workflows/reusable-unit.yml b/.github/workflows/reusable-unit.yml index 19a5bb9dfba..f8028e4524b 100644 --- a/.github/workflows/reusable-unit.yml +++ b/.github/workflows/reusable-unit.yml @@ -21,17 +21,20 @@ jobs: matrix: # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ package: - - ui - angular - - vue - react - - react-native + - react-auth - react-core + - react-core-auth - react-core-notifications - - react-notifications - react-geo - - react-storage - react-liveness + - react-native + - react-native-auth + - react-notifications + - react-storage + - ui + - vue steps: - name: Checkout Amplify UI @@ -41,10 +44,10 @@ jobs: repository: ${{ inputs.repository }} persist-credentials: false - - name: Setup Node.js 16 + - name: Setup Node.js 20 uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 @@ -82,46 +85,73 @@ jobs: - name: Build react-core package if: | matrix.package == 'react' || + matrix.package == 'react-auth' || + matrix.package == 'react-core-auth' || matrix.package == 'react-core-notifications' || - matrix.package == 'react-native' || - matrix.package == 'react-storage' || + matrix.package == 'react-geo' || matrix.package == 'react-liveness' || - matrix.package == 'react-notifications' + matrix.package == 'react-native' || + matrix.package == 'react-native-auth' || + matrix.package == 'react-notifications' || + matrix.package == 'react-storage' run: yarn react-core build - name: Build react-core-notifications package if: | matrix.package == 'react-native' || + matrix.package == 'react-native-auth' || matrix.package == 'react-notifications' run: yarn react-core-notifications build + - name: Build react-core-auth package + if: | + matrix.package == 'react-auth' || + matrix.package == 'react-native-auth' + run: yarn react-core-auth build + - name: Build react package if: | + matrix.package == 'react-auth' || + matrix.package == 'react-geo' || + matrix.package == 'react-liveness' || matrix.package == 'react-notifications' || - matrix.package == 'react-storage' || - matrix.package == 'react-liveness' + matrix.package == 'react-storage' run: yarn react build + - name: Build react-native package + if: | + matrix.package == 'react-native-auth' + run: yarn react-native build + - name: Build ${{ matrix.package }} package if: ${{ matrix.package != 'ui' }} run: yarn ${{ matrix.package }} build - - name: Check ${{ matrix.package }} bundle size - if: ${{ matrix.package == 'react' }} - run: yarn react size + - name: Run ${{ matrix.package }} package unit tests + run: yarn ${{ matrix.package }} test + + - name: Lint ${{ matrix.package }} package + run: yarn ${{ matrix.package }} lint + + - name: Validate ${{ matrix.package }} package esm modules + if: | + matrix.package != 'angular' && + matrix.package != 'react-native' && + matrix.package != 'react-native-auth' + run: yarn ${{ matrix.package }} check:esm - name: Check ${{ matrix.package }} bundle size - if: ${{ matrix.package == 'react-liveness' }} - run: yarn react-liveness size + if: | + matrix.package == 'react' || + matrix.package == 'react-auth' || + matrix.package == 'react-geo' || + matrix.package == 'react-liveness' || + matrix.package == 'react-notifications' || + matrix.package == 'react-storage' + run: yarn ${{ matrix.package }} size - name: Cache ${{ matrix.package }}/dist uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 with: path: ./packages/${{ matrix.package }}/dist key: ${{ runner.os }}-${{ matrix.package }}-${{ inputs.commit }} - - - name: Lint packages - run: yarn ${{ matrix.package }} lint - - - name: Run ${{ matrix.package }} CI tests - run: yarn ${{ matrix.package }} test:ci diff --git a/.github/workflows/version-packages.yml b/.github/workflows/version-packages.yml index df279290587..292ac2e2a57 100644 --- a/.github/workflows/version-packages.yml +++ b/.github/workflows/version-packages.yml @@ -26,11 +26,11 @@ jobs: - name: Check if repo has unconsumed changesets id: has-changesets uses: ./.github/actions/has-changesets - - name: Setup Node.js 16 + - name: Setup Node.js 20 if: ${{ steps.has-changesets.outputs.has-changesets == 'true' }} uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c with: - node-version: 16 + node-version: 20 cache: 'yarn' env: SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2 diff --git a/.gitignore b/.gitignore index d3bb1526e78..46a80d50075 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules aws-exports.js aws-exports.ts +amplifyconfiguration.json # We have mock exports in the following locations !examples/angular/src/pages/ui/components/*/*/aws-exports.js diff --git a/.nvmrc b/.nvmrc index b6a7d89c68e..209e3ef4b62 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 diff --git a/amplify.yml b/amplify.yml index 767df89caf9..f442b7f2366 100644 --- a/amplify.yml +++ b/amplify.yml @@ -6,8 +6,8 @@ applications: preBuild: commands: - rm -rf node_modules - - nvm install 16.13 # NodeJS 16.13+ is the latest version that Amplify Hosting supports - - nvm use 16 + - nvm install 18.13 # hosting supports node 18.13 natively + - nvm use 18.13 - node -v - export FLUTTER_HOME=${HOME}/sdks/flutter # pin to flutter v3.10.6 @@ -19,8 +19,8 @@ applications: - (cd .. && yarn install && yarn build) build: commands: - - nvm install 16.13 - - nvm use 16 + - nvm install 18.13 # hosting supports node 18.13 natively + - nvm use 18.13 - node -v - yarn flutter:build - yarn build diff --git a/build-system-tests/scripts/mega-app-install.sh b/build-system-tests/scripts/mega-app-install.sh index 0fe633e54e0..35606c8acfe 100755 --- a/build-system-tests/scripts/mega-app-install.sh +++ b/build-system-tests/scripts/mega-app-install.sh @@ -136,8 +136,8 @@ else fi if [[ "$FRAMEWORK" == "react-native" ]]; then - echo "npm install @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill" - npm install @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill + echo "npm install @aws-amplify/ui-react-native @aws-amplify/react-native aws-amplify react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill" + npm install @aws-amplify/ui-react-native @aws-amplify/react-native aws-amplify react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill if [[ "$BUILD_TOOL" == "expo" ]]; then echo "npx expo install --fix" npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio diff --git a/build-system-tests/templates/components/react-native/cli/App.tsx b/build-system-tests/templates/components/react-native/cli/App.tsx index fa76109b7b0..6142710083f 100644 --- a/build-system-tests/templates/components/react-native/cli/App.tsx +++ b/build-system-tests/templates/components/react-native/cli/App.tsx @@ -3,6 +3,8 @@ import { Button, Text } from 'react-native'; import 'react-native-get-random-values'; import 'react-native-url-polyfill/auto'; +import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging'; + import { Amplify } from 'aws-amplify'; import { Authenticator, @@ -12,7 +14,9 @@ import { } from '@aws-amplify/ui-react-native'; import awsExports from './aws-exports'; + Amplify.configure(awsExports); +initializeInAppMessaging(); function SignOutButton() { const { signOut } = useAuthenticator(); diff --git a/build-system-tests/templates/components/react/cra/App.js b/build-system-tests/templates/components/react/cra/App.js index 1c1211146f0..a7884834057 100644 --- a/build-system-tests/templates/components/react/cra/App.js +++ b/build-system-tests/templates/components/react/cra/App.js @@ -1,11 +1,10 @@ import React, { useEffect } from 'react'; -import { Amplify, Notifications } from 'aws-amplify'; +import { Amplify } from 'aws-amplify'; import { - AccountSettings, - Authenticator, - FileUploader, - Text, -} from '@aws-amplify/ui-react'; + initializeInAppMessaging, + syncMessages, +} from 'aws-amplify/in-app-messaging'; +import { AccountSettings, Authenticator, Text } from '@aws-amplify/ui-react'; import { StorageManager } from '@aws-amplify/ui-react-storage'; import { InAppMessageDisplay, @@ -17,12 +16,12 @@ import '@aws-amplify/ui-react-geo/styles.css'; import awsconfig from './aws-exports'; Amplify.configure(awsconfig); -const { InAppMessaging } = Notifications; +initializeInAppMessaging(); export default function Home() { useEffect(() => { // sync remote in-app messages - InAppMessaging.syncMessages(); + syncMessages(); }, []); return ( @@ -31,7 +30,6 @@ export default function Home() { In-App Messaging Example - {({ signOut, user = { username: '' } }) => (
@@ -44,7 +42,7 @@ export default function Home() { {}} /> diff --git a/build-system-tests/templates/components/react/next/App.js b/build-system-tests/templates/components/react/next/App.js index eef527c4ecc..74f90fcd58f 100644 --- a/build-system-tests/templates/components/react/next/App.js +++ b/build-system-tests/templates/components/react/next/App.js @@ -1,11 +1,10 @@ import React, { useEffect } from 'react'; -import { Amplify, Notifications } from 'aws-amplify'; +import { Amplify } from 'aws-amplify'; import { - AccountSettings, - Authenticator, - FileUploader, - Text, -} from '@aws-amplify/ui-react'; + initializeInAppMessaging, + syncMessages, +} from 'aws-amplify/in-app-messaging'; +import { AccountSettings, Authenticator, Text } from '@aws-amplify/ui-react'; import { StorageManager } from '@aws-amplify/ui-react-storage'; import { InAppMessageDisplay, @@ -17,12 +16,12 @@ import '@aws-amplify/ui-react-geo/styles.css'; import awsconfig from '@/data/aws-exports'; Amplify.configure(awsconfig); -const { InAppMessaging } = Notifications; +initializeInAppMessaging(); export default function Home() { useEffect(() => { // sync remote in-app messages - InAppMessaging.syncMessages(); + syncMessages(); }, []); return ( @@ -31,7 +30,6 @@ export default function Home() { In-App Messaging Example - {({ signOut, user = { username: '' } }) => (
@@ -44,7 +42,7 @@ export default function Home() { {}} /> diff --git a/build-system-tests/templates/components/react/vite/App.tsx b/build-system-tests/templates/components/react/vite/App.tsx index eb6e241d770..6ec3038c32f 100644 --- a/build-system-tests/templates/components/react/vite/App.tsx +++ b/build-system-tests/templates/components/react/vite/App.tsx @@ -1,11 +1,10 @@ import { useEffect } from 'react'; -import { Amplify, Notifications } from 'aws-amplify'; +import { Amplify } from 'aws-amplify'; import { - AccountSettings, - Authenticator, - FileUploader, - Text, -} from '@aws-amplify/ui-react'; + initializeInAppMessaging, + syncMessages, +} from 'aws-amplify/in-app-messaging'; +import { AccountSettings, Authenticator, Text } from '@aws-amplify/ui-react'; import { StorageManager } from '@aws-amplify/ui-react-storage'; import { InAppMessageDisplay, @@ -17,12 +16,12 @@ import '@aws-amplify/ui-react-geo/styles.css'; import awsconfig from './aws-exports'; Amplify.configure(awsconfig); -const { InAppMessaging } = Notifications; +initializeInAppMessaging(); export default function Home() { useEffect(() => { // sync remote in-app messages - InAppMessaging.syncMessages(); + syncMessages(); }, []); return ( @@ -31,7 +30,6 @@ export default function Home() { In-App Messaging Example - {({ signOut, user = { username: '' } }) => (
@@ -44,7 +42,7 @@ export default function Home() { {}} /> diff --git a/canary/apps/react/cra-ts/src/App.tsx b/canary/apps/react/cra-ts/src/App.tsx index f1b3a1f2595..576bfd34cad 100644 --- a/canary/apps/react/cra-ts/src/App.tsx +++ b/canary/apps/react/cra-ts/src/App.tsx @@ -1,5 +1,5 @@ import { - AmplifyProvider, + ThemeProvider, Button, Card, Heading, @@ -14,13 +14,13 @@ Amplify.configure(aws_exports); function App() { const { signOut } = useAuthenticator(); return ( - + Amplify Sample App - + ); } diff --git a/canary/apps/react/cra/src/App.js b/canary/apps/react/cra/src/App.js index f1b3a1f2595..576bfd34cad 100644 --- a/canary/apps/react/cra/src/App.js +++ b/canary/apps/react/cra/src/App.js @@ -1,5 +1,5 @@ import { - AmplifyProvider, + ThemeProvider, Button, Card, Heading, @@ -14,13 +14,13 @@ Amplify.configure(aws_exports); function App() { const { signOut } = useAuthenticator(); return ( - + Amplify Sample App - + ); } diff --git a/canary/apps/react/next/pages/index.js b/canary/apps/react/next/pages/index.js index 9eb6e038b6b..9fd554c089f 100644 --- a/canary/apps/react/next/pages/index.js +++ b/canary/apps/react/next/pages/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { - AmplifyProvider, + ThemeProvider, Button, Card, Heading, @@ -16,7 +16,7 @@ Amplify.configure(aws_exports); function App() { const { signOut } = useAuthenticator(); return ( - + Amplify Sample App @@ -27,7 +27,7 @@ function App() { region="us-east-1" handleGetLivenessDetection={async () => {}} /> - + ); } diff --git a/canary/apps/vue/vuecli/package.json b/canary/apps/vue/vuecli/package.json index df43daff183..1f8c98812e6 100644 --- a/canary/apps/vue/vuecli/package.json +++ b/canary/apps/vue/vuecli/package.json @@ -15,13 +15,12 @@ "vue": "^3.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~4.5.0", - "@vue/cli-plugin-eslint": "~4.5.0", - "@vue/cli-service": "~4.5.0", - "@vue/compiler-sfc": "^3.0.0", - "babel-eslint": "^10.1.0", - "eslint": "^6.7.2", - "eslint-plugin-vue": "^7.0.0", + "@vue/cli-plugin-babel": "^5.0.8", + "@vue/cli-plugin-eslint": "^5.0.8", + "@vue/cli-service": "^5.0.8", + "@vue/compiler-sfc": "^3.3.6", + "eslint": "^8.52.0", + "eslint-plugin-vue": "^9.17.0", "serve": "^13.0.2" }, "eslintConfig": { diff --git a/canary/e2e/features/signin/hub-events.feature b/canary/e2e/features/signin/hub-events.feature new file mode 100644 index 00000000000..8c49fc44ad4 --- /dev/null +++ b/canary/e2e/features/signin/hub-events.feature @@ -0,0 +1,29 @@ + +Feature: Hub Events + Authenticator listens to external Auth Hub events from 'aws-amplify'. For + example, Authenticator will automatically sign out the user if it gets a + "signOut" hub event. + + Background: + Given I'm running the example "/ui/components/authenticator/hub-events" + + # @todo-migration maybe keep this + # @angular @react @vue + Scenario: Unsuccessful token refresh logs out the user + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + Then I see "Sign out" + When I dispatch "tokenRefresh_failure" event + Then I see "Sign in" + + # @todo-migration maybe keep this + # @angular @react @vue + Scenario: Successful token refresh calls currentAuthenticatedUser + When I type my "email" with status "CONFIRMED" + Then I type my password + Then I click the "Sign in" button + Then I see "Sign out" + Given I spy "Auth.currentAuthenticatedUser" method + When I dispatch "tokenRefresh" event + Then "Auth.currentAuthenticatedUser" method is called diff --git a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap index c1f28f203ce..88c0df7f854 100644 --- a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap +++ b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap @@ -3,6020 +3,5768 @@ exports[`CSS Variables Table 1`] = ` "[ { - \\"variable\\": \\"--amplify-border-widths-large\\", - \\"value\\": \\"3px\\" + "variable": "--amplify-border-widths-large", + "value": "3px" }, { - \\"variable\\": \\"--amplify-border-widths-medium\\", - \\"value\\": \\"2px\\" + "variable": "--amplify-border-widths-medium", + "value": "2px" }, { - \\"variable\\": \\"--amplify-border-widths-small\\", - \\"value\\": \\"1px\\" + "variable": "--amplify-border-widths-small", + "value": "1px" }, { - \\"variable\\": \\"--amplify-colors-background-disabled\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-colors-background-disabled", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-colors-background-error\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-colors-background-error", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-colors-background-info\\", - \\"value\\": \\"var(--amplify-colors-blue-10)\\" + "variable": "--amplify-colors-background-info", + "value": "var(--amplify-colors-blue-10)" }, { - \\"variable\\": \\"--amplify-colors-background-primary\\", - \\"value\\": \\"var(--amplify-colors-white)\\" + "variable": "--amplify-colors-background-primary", + "value": "var(--amplify-colors-white)" }, { - \\"variable\\": \\"--amplify-colors-background-quaternary\\", - \\"value\\": \\"var(--amplify-colors-neutral-60)\\" + "variable": "--amplify-colors-background-quaternary", + "value": "var(--amplify-colors-neutral-60)" }, { - \\"variable\\": \\"--amplify-colors-background-secondary\\", - \\"value\\": \\"var(--amplify-colors-neutral-10)\\" + "variable": "--amplify-colors-background-secondary", + "value": "var(--amplify-colors-neutral-10)" }, { - \\"variable\\": \\"--amplify-colors-background-success\\", - \\"value\\": \\"var(--amplify-colors-green-10)\\" + "variable": "--amplify-colors-background-success", + "value": "var(--amplify-colors-green-10)" }, { - \\"variable\\": \\"--amplify-colors-background-tertiary\\", - \\"value\\": \\"var(--amplify-colors-neutral-20)\\" + "variable": "--amplify-colors-background-tertiary", + "value": "var(--amplify-colors-neutral-20)" }, { - \\"variable\\": \\"--amplify-colors-background-warning\\", - \\"value\\": \\"var(--amplify-colors-orange-10)\\" + "variable": "--amplify-colors-background-warning", + "value": "var(--amplify-colors-orange-10)" }, { - \\"variable\\": \\"--amplify-colors-black\\", - \\"value\\": \\"hsl(0, 0%, 0%)\\" + "variable": "--amplify-colors-black", + "value": "hsl(0, 0%, 0%)" }, { - \\"variable\\": \\"--amplify-colors-blue-10\\", - \\"value\\": \\"hsl(220, 95%, 95%)\\" + "variable": "--amplify-colors-blue-10", + "value": "hsl(220, 95%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-blue-100\\", - \\"value\\": \\"hsl(220, 100%, 15%)\\" + "variable": "--amplify-colors-blue-100", + "value": "hsl(220, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-blue-20\\", - \\"value\\": \\"hsl(220, 85%, 85%)\\" + "variable": "--amplify-colors-blue-20", + "value": "hsl(220, 85%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-blue-40\\", - \\"value\\": \\"hsl(220, 70%, 70%)\\" + "variable": "--amplify-colors-blue-40", + "value": "hsl(220, 70%, 70%)" }, { - \\"variable\\": \\"--amplify-colors-blue-60\\", - \\"value\\": \\"hsl(220, 50%, 50%)\\" + "variable": "--amplify-colors-blue-60", + "value": "hsl(220, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-blue-80\\", - \\"value\\": \\"hsl(220, 95%, 30%)\\" + "variable": "--amplify-colors-blue-80", + "value": "hsl(220, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-blue-90\\", - \\"value\\": \\"hsl(220, 100%, 20%)\\" + "variable": "--amplify-colors-blue-90", + "value": "hsl(220, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-border-disabled\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-colors-border-disabled", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-colors-border-error\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-colors-border-error", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-colors-border-focus\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-colors-border-focus", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-colors-border-info\\", - \\"value\\": \\"var(--amplify-colors-blue-80)\\" + "variable": "--amplify-colors-border-info", + "value": "var(--amplify-colors-blue-80)" }, { - \\"variable\\": \\"--amplify-colors-border-pressed\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-colors-border-pressed", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-colors-border-primary\\", - \\"value\\": \\"var(--amplify-colors-neutral-60)\\" + "variable": "--amplify-colors-border-primary", + "value": "var(--amplify-colors-neutral-60)" }, { - \\"variable\\": \\"--amplify-colors-border-secondary\\", - \\"value\\": \\"var(--amplify-colors-neutral-40)\\" + "variable": "--amplify-colors-border-secondary", + "value": "var(--amplify-colors-neutral-40)" }, { - \\"variable\\": \\"--amplify-colors-border-success\\", - \\"value\\": \\"var(--amplify-colors-green-80)\\" + "variable": "--amplify-colors-border-success", + "value": "var(--amplify-colors-green-80)" }, { - \\"variable\\": \\"--amplify-colors-border-tertiary\\", - \\"value\\": \\"var(--amplify-colors-neutral-20)\\" + "variable": "--amplify-colors-border-tertiary", + "value": "var(--amplify-colors-neutral-20)" }, { - \\"variable\\": \\"--amplify-colors-border-warning\\", - \\"value\\": \\"var(--amplify-colors-orange-80)\\" + "variable": "--amplify-colors-border-warning", + "value": "var(--amplify-colors-orange-80)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-10\\", - \\"value\\": \\"var(--amplify-colors-teal-10)\\" + "variable": "--amplify-colors-font-active", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-100\\", - \\"value\\": \\"var(--amplify-colors-teal-100)\\" + "variable": "--amplify-colors-font-disabled", + "value": "var(--amplify-colors-neutral-60)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-20\\", - \\"value\\": \\"var(--amplify-colors-teal-20)\\" + "variable": "--amplify-colors-font-error", + "value": "var(--amplify-colors-red-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-40\\", - \\"value\\": \\"var(--amplify-colors-teal-40)\\" + "variable": "--amplify-colors-font-focus", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-60\\", - \\"value\\": \\"var(--amplify-colors-teal-60)\\" + "variable": "--amplify-colors-font-hover", + "value": "var(--amplify-colors-primary-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-80\\", - \\"value\\": \\"var(--amplify-colors-teal-80)\\" + "variable": "--amplify-colors-font-info", + "value": "var(--amplify-colors-blue-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-primary-90\\", - \\"value\\": \\"var(--amplify-colors-teal-90)\\" + "variable": "--amplify-colors-font-interactive", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-10\\", - \\"value\\": \\"var(--amplify-colors-purple-10)\\" + "variable": "--amplify-colors-font-inverse", + "value": "var(--amplify-colors-white)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-100\\", - \\"value\\": \\"var(--amplify-colors-purple-100)\\" + "variable": "--amplify-colors-font-primary", + "value": "var(--amplify-colors-neutral-100)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-20\\", - \\"value\\": \\"var(--amplify-colors-purple-20)\\" + "variable": "--amplify-colors-font-secondary", + "value": "var(--amplify-colors-neutral-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-40\\", - \\"value\\": \\"var(--amplify-colors-purple-40)\\" + "variable": "--amplify-colors-font-success", + "value": "var(--amplify-colors-green-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-60\\", - \\"value\\": \\"var(--amplify-colors-purple-60)\\" + "variable": "--amplify-colors-font-tertiary", + "value": "var(--amplify-colors-neutral-80)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-80\\", - \\"value\\": \\"var(--amplify-colors-purple-80)\\" + "variable": "--amplify-colors-font-warning", + "value": "var(--amplify-colors-orange-90)" }, { - \\"variable\\": \\"--amplify-colors-brand-secondary-90\\", - \\"value\\": \\"var(--amplify-colors-purple-90)\\" + "variable": "--amplify-colors-green-10", + "value": "hsl(130, 60%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-font-active\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-colors-green-100", + "value": "hsl(130, 22%, 23%)" }, { - \\"variable\\": \\"--amplify-colors-font-disabled\\", - \\"value\\": \\"var(--amplify-colors-neutral-60)\\" + "variable": "--amplify-colors-green-20", + "value": "hsl(130, 60%, 90%)" }, { - \\"variable\\": \\"--amplify-colors-font-error\\", - \\"value\\": \\"var(--amplify-colors-red-90)\\" + "variable": "--amplify-colors-green-40", + "value": "hsl(130, 44%, 63%)" }, { - \\"variable\\": \\"--amplify-colors-font-focus\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-colors-green-60", + "value": "hsl(130, 43%, 46%)" }, { - \\"variable\\": \\"--amplify-colors-font-hover\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-90)\\" + "variable": "--amplify-colors-green-80", + "value": "hsl(130, 33%, 37%)" }, { - \\"variable\\": \\"--amplify-colors-font-info\\", - \\"value\\": \\"var(--amplify-colors-blue-90)\\" + "variable": "--amplify-colors-green-90", + "value": "hsl(130, 27%, 29%)" }, { - \\"variable\\": \\"--amplify-colors-font-interactive\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-colors-neutral-10", + "value": "hsl(210, 5%, 98%)" }, { - \\"variable\\": \\"--amplify-colors-font-inverse\\", - \\"value\\": \\"var(--amplify-colors-white)\\" + "variable": "--amplify-colors-neutral-100", + "value": "hsl(210, 50%, 10%)" }, { - \\"variable\\": \\"--amplify-colors-font-primary\\", - \\"value\\": \\"var(--amplify-colors-neutral-100)\\" + "variable": "--amplify-colors-neutral-20", + "value": "hsl(210, 5%, 94%)" }, { - \\"variable\\": \\"--amplify-colors-font-secondary\\", - \\"value\\": \\"var(--amplify-colors-neutral-90)\\" + "variable": "--amplify-colors-neutral-40", + "value": "hsl(210, 5%, 87%)" }, { - \\"variable\\": \\"--amplify-colors-font-success\\", - \\"value\\": \\"var(--amplify-colors-green-90)\\" + "variable": "--amplify-colors-neutral-60", + "value": "hsl(210, 10%, 58%)" }, { - \\"variable\\": \\"--amplify-colors-font-tertiary\\", - \\"value\\": \\"var(--amplify-colors-neutral-80)\\" + "variable": "--amplify-colors-neutral-80", + "value": "hsl(210, 10%, 40%)" }, { - \\"variable\\": \\"--amplify-colors-font-warning\\", - \\"value\\": \\"var(--amplify-colors-orange-90)\\" + "variable": "--amplify-colors-neutral-90", + "value": "hsl(210, 25%, 25%)" }, { - \\"variable\\": \\"--amplify-colors-green-10\\", - \\"value\\": \\"hsl(130, 60%, 95%)\\" + "variable": "--amplify-colors-orange-10", + "value": "hsl(30, 75%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-green-100\\", - \\"value\\": \\"hsl(130, 22%, 23%)\\" + "variable": "--amplify-colors-orange-100", + "value": "hsl(30, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-green-20\\", - \\"value\\": \\"hsl(130, 60%, 90%)\\" + "variable": "--amplify-colors-orange-20", + "value": "hsl(30, 75%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-green-40\\", - \\"value\\": \\"hsl(130, 44%, 63%)\\" + "variable": "--amplify-colors-orange-40", + "value": "hsl(30, 75%, 75%)" }, { - \\"variable\\": \\"--amplify-colors-green-60\\", - \\"value\\": \\"hsl(130, 43%, 46%)\\" + "variable": "--amplify-colors-orange-60", + "value": "hsl(30, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-green-80\\", - \\"value\\": \\"hsl(130, 33%, 37%)\\" + "variable": "--amplify-colors-orange-80", + "value": "hsl(30, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-green-90\\", - \\"value\\": \\"hsl(130, 27%, 29%)\\" + "variable": "--amplify-colors-orange-90", + "value": "hsl(30, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-neutral-10\\", - \\"value\\": \\"hsl(210, 5%, 98%)\\" + "variable": "--amplify-colors-overlay-10", + "value": "hsla(0, 0%, 0%, 0.1)" }, { - \\"variable\\": \\"--amplify-colors-neutral-100\\", - \\"value\\": \\"hsl(210, 50%, 10%)\\" + "variable": "--amplify-colors-overlay-20", + "value": "hsla(0, 0%, 0%, 0.2)" }, { - \\"variable\\": \\"--amplify-colors-neutral-20\\", - \\"value\\": \\"hsl(210, 5%, 94%)\\" + "variable": "--amplify-colors-overlay-30", + "value": "hsla(0, 0%, 0%, 0.3)" }, { - \\"variable\\": \\"--amplify-colors-neutral-40\\", - \\"value\\": \\"hsl(210, 5%, 87%)\\" + "variable": "--amplify-colors-overlay-40", + "value": "hsla(0, 0%, 0%, 0.4)" }, { - \\"variable\\": \\"--amplify-colors-neutral-60\\", - \\"value\\": \\"hsl(210, 10%, 58%)\\" + "variable": "--amplify-colors-overlay-5", + "value": "hsla(0, 0%, 0%, 0.05)" }, { - \\"variable\\": \\"--amplify-colors-neutral-80\\", - \\"value\\": \\"hsl(210, 10%, 40%)\\" + "variable": "--amplify-colors-overlay-50", + "value": "hsla(0, 0%, 0%, 0.5)" }, { - \\"variable\\": \\"--amplify-colors-neutral-90\\", - \\"value\\": \\"hsl(210, 25%, 25%)\\" + "variable": "--amplify-colors-overlay-60", + "value": "hsla(0, 0%, 0%, 0.6)" }, { - \\"variable\\": \\"--amplify-colors-orange-10\\", - \\"value\\": \\"hsl(30, 75%, 95%)\\" + "variable": "--amplify-colors-overlay-70", + "value": "hsla(0, 0%, 0%, 0.7)" }, { - \\"variable\\": \\"--amplify-colors-orange-100\\", - \\"value\\": \\"hsl(30, 100%, 15%)\\" + "variable": "--amplify-colors-overlay-80", + "value": "hsla(0, 0%, 0%, 0.8)" }, { - \\"variable\\": \\"--amplify-colors-orange-20\\", - \\"value\\": \\"hsl(30, 75%, 85%)\\" + "variable": "--amplify-colors-overlay-90", + "value": "hsla(0, 0%, 0%, 0.9)" }, { - \\"variable\\": \\"--amplify-colors-orange-40\\", - \\"value\\": \\"hsl(30, 75%, 75%)\\" + "variable": "--amplify-colors-pink-10", + "value": "hsl(340, 95%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-orange-60\\", - \\"value\\": \\"hsl(30, 50%, 50%)\\" + "variable": "--amplify-colors-pink-100", + "value": "hsl(340, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-orange-80\\", - \\"value\\": \\"hsl(30, 95%, 30%)\\" + "variable": "--amplify-colors-pink-20", + "value": "hsl(340, 90%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-orange-90\\", - \\"value\\": \\"hsl(30, 100%, 20%)\\" + "variable": "--amplify-colors-pink-40", + "value": "hsl(340, 70%, 70%)" }, { - \\"variable\\": \\"--amplify-colors-overlay-10\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.1)\\" + "variable": "--amplify-colors-pink-60", + "value": "hsl(340, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-overlay-20\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.2)\\" + "variable": "--amplify-colors-pink-80", + "value": "hsl(340, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-overlay-30\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.3)\\" + "variable": "--amplify-colors-pink-90", + "value": "hsl(340, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-overlay-40\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.4)\\" + "variable": "--amplify-colors-primary-10", + "value": "var(--amplify-colors-teal-10)" }, { - \\"variable\\": \\"--amplify-colors-overlay-5\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.05)\\" + "variable": "--amplify-colors-primary-100", + "value": "var(--amplify-colors-teal-100)" }, { - \\"variable\\": \\"--amplify-colors-overlay-50\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.5)\\" + "variable": "--amplify-colors-primary-20", + "value": "var(--amplify-colors-teal-20)" }, { - \\"variable\\": \\"--amplify-colors-overlay-60\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.6)\\" + "variable": "--amplify-colors-primary-40", + "value": "var(--amplify-colors-teal-40)" }, { - \\"variable\\": \\"--amplify-colors-overlay-70\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.7)\\" + "variable": "--amplify-colors-primary-60", + "value": "var(--amplify-colors-teal-60)" }, { - \\"variable\\": \\"--amplify-colors-overlay-80\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.8)\\" + "variable": "--amplify-colors-primary-80", + "value": "var(--amplify-colors-teal-80)" }, { - \\"variable\\": \\"--amplify-colors-overlay-90\\", - \\"value\\": \\"hsla(0, 0%, 0%, 0.9)\\" + "variable": "--amplify-colors-primary-90", + "value": "var(--amplify-colors-teal-90)" }, { - \\"variable\\": \\"--amplify-colors-pink-10\\", - \\"value\\": \\"hsl(340, 95%, 95%)\\" + "variable": "--amplify-colors-purple-10", + "value": "hsl(300, 95%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-pink-100\\", - \\"value\\": \\"hsl(340, 100%, 15%)\\" + "variable": "--amplify-colors-purple-100", + "value": "hsl(300, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-pink-20\\", - \\"value\\": \\"hsl(340, 90%, 85%)\\" + "variable": "--amplify-colors-purple-20", + "value": "hsl(300, 85%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-pink-40\\", - \\"value\\": \\"hsl(340, 70%, 70%)\\" + "variable": "--amplify-colors-purple-40", + "value": "hsl(300, 70%, 70%)" }, { - \\"variable\\": \\"--amplify-colors-pink-60\\", - \\"value\\": \\"hsl(340, 50%, 50%)\\" + "variable": "--amplify-colors-purple-60", + "value": "hsl(300, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-pink-80\\", - \\"value\\": \\"hsl(340, 95%, 30%)\\" + "variable": "--amplify-colors-purple-80", + "value": "hsl(300, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-pink-90\\", - \\"value\\": \\"hsl(340, 100%, 20%)\\" + "variable": "--amplify-colors-purple-90", + "value": "hsl(300, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-purple-10\\", - \\"value\\": \\"hsl(300, 95%, 95%)\\" + "variable": "--amplify-colors-red-10", + "value": "hsl(0, 75%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-purple-100\\", - \\"value\\": \\"hsl(300, 100%, 15%)\\" + "variable": "--amplify-colors-red-100", + "value": "hsl(0, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-purple-20\\", - \\"value\\": \\"hsl(300, 85%, 85%)\\" + "variable": "--amplify-colors-red-20", + "value": "hsl(0, 75%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-purple-40\\", - \\"value\\": \\"hsl(300, 70%, 70%)\\" + "variable": "--amplify-colors-red-40", + "value": "hsl(0, 75%, 75%)" }, { - \\"variable\\": \\"--amplify-colors-purple-60\\", - \\"value\\": \\"hsl(300, 50%, 50%)\\" + "variable": "--amplify-colors-red-60", + "value": "hsl(0, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-purple-80\\", - \\"value\\": \\"hsl(300, 95%, 30%)\\" + "variable": "--amplify-colors-red-80", + "value": "hsl(0, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-purple-90\\", - \\"value\\": \\"hsl(300, 100%, 20%)\\" + "variable": "--amplify-colors-red-90", + "value": "hsl(0, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-red-10\\", - \\"value\\": \\"hsl(0, 75%, 95%)\\" + "variable": "--amplify-colors-secondary-10", + "value": "var(--amplify-colors-purple-10)" }, { - \\"variable\\": \\"--amplify-colors-red-100\\", - \\"value\\": \\"hsl(0, 100%, 15%)\\" + "variable": "--amplify-colors-secondary-100", + "value": "var(--amplify-colors-purple-100)" }, { - \\"variable\\": \\"--amplify-colors-red-20\\", - \\"value\\": \\"hsl(0, 75%, 85%)\\" + "variable": "--amplify-colors-secondary-20", + "value": "var(--amplify-colors-purple-20)" }, { - \\"variable\\": \\"--amplify-colors-red-40\\", - \\"value\\": \\"hsl(0, 75%, 75%)\\" + "variable": "--amplify-colors-secondary-40", + "value": "var(--amplify-colors-purple-40)" }, { - \\"variable\\": \\"--amplify-colors-red-60\\", - \\"value\\": \\"hsl(0, 50%, 50%)\\" + "variable": "--amplify-colors-secondary-60", + "value": "var(--amplify-colors-purple-60)" }, { - \\"variable\\": \\"--amplify-colors-red-80\\", - \\"value\\": \\"hsl(0, 95%, 30%)\\" + "variable": "--amplify-colors-secondary-80", + "value": "var(--amplify-colors-purple-80)" }, { - \\"variable\\": \\"--amplify-colors-red-90\\", - \\"value\\": \\"hsl(0, 100%, 20%)\\" + "variable": "--amplify-colors-secondary-90", + "value": "var(--amplify-colors-purple-90)" }, { - \\"variable\\": \\"--amplify-colors-shadow-primary\\", - \\"value\\": \\"hsla(210, 50%, 10%, 0.25)\\" + "variable": "--amplify-colors-shadow-primary", + "value": "hsla(210, 50%, 10%, 0.25)" }, { - \\"variable\\": \\"--amplify-colors-shadow-secondary\\", - \\"value\\": \\"hsla(210, 50%, 10%, 0.15)\\" + "variable": "--amplify-colors-shadow-secondary", + "value": "hsla(210, 50%, 10%, 0.15)" }, { - \\"variable\\": \\"--amplify-colors-shadow-tertiary\\", - \\"value\\": \\"hsla(210, 50%, 10%, 0.05)\\" + "variable": "--amplify-colors-shadow-tertiary", + "value": "hsla(210, 50%, 10%, 0.05)" }, { - \\"variable\\": \\"--amplify-colors-teal-10\\", - \\"value\\": \\"hsl(190, 75%, 95%)\\" + "variable": "--amplify-colors-teal-10", + "value": "hsl(190, 75%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-teal-100\\", - \\"value\\": \\"hsl(190, 100%, 15%)\\" + "variable": "--amplify-colors-teal-100", + "value": "hsl(190, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-teal-20\\", - \\"value\\": \\"hsl(190, 75%, 85%)\\" + "variable": "--amplify-colors-teal-20", + "value": "hsl(190, 75%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-teal-40\\", - \\"value\\": \\"hsl(190, 70%, 70%)\\" + "variable": "--amplify-colors-teal-40", + "value": "hsl(190, 70%, 70%)" }, { - \\"variable\\": \\"--amplify-colors-teal-60\\", - \\"value\\": \\"hsl(190, 50%, 50%)\\" + "variable": "--amplify-colors-teal-60", + "value": "hsl(190, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-teal-80\\", - \\"value\\": \\"hsl(190, 95%, 30%)\\" + "variable": "--amplify-colors-teal-80", + "value": "hsl(190, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-teal-90\\", - \\"value\\": \\"hsl(190, 100%, 20%)\\" + "variable": "--amplify-colors-teal-90", + "value": "hsl(190, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-colors-transparent\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-colors-transparent", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-colors-white\\", - \\"value\\": \\"hsl(0, 0%, 100%)\\" + "variable": "--amplify-colors-white", + "value": "hsl(0, 0%, 100%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-10\\", - \\"value\\": \\"hsl(60, 75%, 95%)\\" + "variable": "--amplify-colors-yellow-10", + "value": "hsl(60, 75%, 95%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-100\\", - \\"value\\": \\"hsl(60, 100%, 15%)\\" + "variable": "--amplify-colors-yellow-100", + "value": "hsl(60, 100%, 15%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-20\\", - \\"value\\": \\"hsl(60, 75%, 85%)\\" + "variable": "--amplify-colors-yellow-20", + "value": "hsl(60, 75%, 85%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-40\\", - \\"value\\": \\"hsl(60, 75%, 75%)\\" + "variable": "--amplify-colors-yellow-40", + "value": "hsl(60, 75%, 75%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-60\\", - \\"value\\": \\"hsl(60, 50%, 50%)\\" + "variable": "--amplify-colors-yellow-60", + "value": "hsl(60, 50%, 50%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-80\\", - \\"value\\": \\"hsl(60, 95%, 30%)\\" + "variable": "--amplify-colors-yellow-80", + "value": "hsl(60, 95%, 30%)" }, { - \\"variable\\": \\"--amplify-colors-yellow-90\\", - \\"value\\": \\"hsl(60, 100%, 20%)\\" + "variable": "--amplify-colors-yellow-90", + "value": "hsl(60, 100%, 20%)" }, { - \\"variable\\": \\"--amplify-components-alert-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-accordion-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-alert-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-accordion-item-border-color", + "value": "var(--amplify-colors-border-secondary)" }, { - \\"variable\\": \\"--amplify-components-alert-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-accordion-item-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-alert-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-error)\\" + "variable": "--amplify-components-accordion-item-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-alert-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-accordion-item-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-alert-heading-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-accordion-item-content-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-alert-heading-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-accordion-item-content-padding-block-end", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-alert-icon-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xl)\\" + "variable": "--amplify-components-accordion-item-content-padding-block-start", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-alert-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-info)\\" + "variable": "--amplify-components-accordion-item-content-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-alert-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-accordion-item-icon-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-alert-justify-content\\", - \\"value\\": \\"space-between\\" + "variable": "--amplify-components-accordion-item-icon-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-alert-padding-block\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-accordion-item-icon-transition-timing-function", + "value": "cubic-bezier(0.87, 0, 0.13, 1)" }, { - \\"variable\\": \\"--amplify-components-alert-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-accordion-item-trigger-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-alert-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-success)\\" + "variable": "--amplify-components-accordion-item-trigger-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-alert-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-accordion-item-trigger-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-alert-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-warning)\\" + "variable": "--amplify-components-accordion-item-trigger-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-alert-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-components-accordion-item-trigger-focus-box-shadow", + "value": "0 0 0 2px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-authenticator-container-width-max\\", - \\"value\\": \\"30rem\\" + "variable": "--amplify-components-accordion-item-trigger-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-authenticator-footer-padding-bottom\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-accordion-item-trigger-hover-background-color", + "value": "var(--amplify-colors-overlay-5)" }, { - \\"variable\\": \\"--amplify-components-authenticator-form-padding\\", - \\"value\\": \\"var(--amplify-space-xl)\\" + "variable": "--amplify-components-accordion-item-trigger-hover-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-authenticator-max-width\\", - \\"value\\": \\"60rem\\" + "variable": "--amplify-components-accordion-item-trigger-justify-content", + "value": "space-between" }, { - \\"variable\\": \\"--amplify-components-authenticator-modal-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-50)\\" + "variable": "--amplify-components-accordion-item-trigger-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-authenticator-modal-height\\", - \\"value\\": \\"var(--amplify-space-relative-full)\\" + "variable": "--amplify-components-accordion-item-trigger-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-authenticator-modal-left\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-alert-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-authenticator-modal-top\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-alert-background-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-authenticator-modal-width\\", - \\"value\\": \\"var(--amplify-space-relative-full)\\" + "variable": "--amplify-components-alert-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-authenticator-or-container-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-80)\\" + "variable": "--amplify-components-alert-error-background-color", + "value": "var(--amplify-colors-background-error)" }, { - \\"variable\\": \\"--amplify-components-authenticator-or-container-or-line-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-alert-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-authenticator-router-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-alert-heading-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-authenticator-router-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-alert-heading-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-authenticator-router-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-alert-icon-size", + "value": "var(--amplify-font-sizes-xl)" }, { - \\"variable\\": \\"--amplify-components-authenticator-router-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-alert-info-background-color", + "value": "var(--amplify-colors-background-info)" }, { - \\"variable\\": \\"--amplify-components-authenticator-router-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-medium)\\" + "variable": "--amplify-components-alert-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-authenticator-state-inactive-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-alert-justify-content", + "value": "space-between" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-alert-padding-block", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-alert-padding-inline", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-alert-success-background-color", + "value": "var(--amplify-colors-background-success)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-alert-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-alert-warning-background-color", + "value": "var(--amplify-colors-background-warning)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-empty-display\\", - \\"value\\": \\"flex\\" + "variable": "--amplify-components-alert-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-loading-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-authenticator-container-width-max", + "value": "30rem" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-loading-display\\", - \\"value\\": \\"flex\\" + "variable": "--amplify-components-authenticator-footer-padding-bottom", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-loading-gap\\", - \\"value\\": \\"var(--amplify-space-xxxs)\\" + "variable": "--amplify-components-authenticator-form-padding", + "value": "var(--amplify-space-xl)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-margin-block-start\\", - \\"value\\": \\"var(--amplify-space-xxxs)\\" + "variable": "--amplify-components-authenticator-max-width", + "value": "60rem" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-authenticator-modal-background-color", + "value": "var(--amplify-colors-overlay-50)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-active-color\\", - \\"value\\": \\"var(--amplify-colors-white)\\" + "variable": "--amplify-components-authenticator-modal-height", + "value": "var(--amplify-space-relative-full)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-authenticator-modal-left", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-color\\", - \\"value\\": \\"currentcolor\\" + "variable": "--amplify-components-authenticator-modal-top", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-cursor\\", - \\"value\\": \\"pointer\\" + "variable": "--amplify-components-authenticator-modal-width", + "value": "var(--amplify-space-relative-full)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-transition-duration\\", - \\"value\\": \\"var(--amplify-time-short)\\" + "variable": "--amplify-components-authenticator-or-container-color", + "value": "var(--amplify-colors-neutral-80)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-transition-property\\", - \\"value\\": \\"background-color, color\\" + "variable": "--amplify-components-authenticator-or-container-or-line-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-option-transition-timing-function\\", - \\"value\\": \\"ease\\" + "variable": "--amplify-components-authenticator-router-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-options-display\\", - \\"value\\": \\"flex\\" + "variable": "--amplify-components-authenticator-router-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-options-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-authenticator-router-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-options-max-height\\", - \\"value\\": \\"300px\\" + "variable": "--amplify-components-authenticator-router-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-space-shared-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-authenticator-router-box-shadow", + "value": "var(--amplify-shadows-medium)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-space-shared-padding-inline\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-authenticator-state-inactive-background-color", + "value": "var(--amplify-colors-background-secondary)" }, { - \\"variable\\": \\"--amplify-components-autocomplete-menu-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-autocomplete-menu-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-badge-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-autocomplete-menu-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-badge-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xl)\\" + "variable": "--amplify-components-autocomplete-menu-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-badge-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-autocomplete-menu-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-badge-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-error)\\" + "variable": "--amplify-components-autocomplete-menu-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-badge-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-autocomplete-menu-empty-display", + "value": "flex" }, { - \\"variable\\": \\"--amplify-components-badge-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-autocomplete-menu-loading-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-badge-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-semibold)\\" + "variable": "--amplify-components-autocomplete-menu-loading-display", + "value": "flex" }, { - \\"variable\\": \\"--amplify-components-badge-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-info)\\" + "variable": "--amplify-components-autocomplete-menu-loading-gap", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-badge-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-autocomplete-menu-margin-block-start", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-badge-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-autocomplete-menu-option-active-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-badge-large-padding-horizontal\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-autocomplete-menu-option-active-color", + "value": "var(--amplify-colors-white)" }, { - \\"variable\\": \\"--amplify-components-badge-large-padding-vertical\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-autocomplete-menu-option-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-badge-line-height\\", - \\"value\\": \\"1\\" + "variable": "--amplify-components-autocomplete-menu-option-color", + "value": "currentcolor" }, { - \\"variable\\": \\"--amplify-components-badge-padding-horizontal\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-autocomplete-menu-option-cursor", + "value": "pointer" }, { - \\"variable\\": \\"--amplify-components-badge-padding-vertical\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-autocomplete-menu-option-transition-duration", + "value": "var(--amplify-time-short)" }, { - \\"variable\\": \\"--amplify-components-badge-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xs)\\" + "variable": "--amplify-components-autocomplete-menu-option-transition-property", + "value": "background-color, color" }, { - \\"variable\\": \\"--amplify-components-badge-small-padding-horizontal\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-autocomplete-menu-option-transition-timing-function", + "value": "ease" }, { - \\"variable\\": \\"--amplify-components-badge-small-padding-vertical\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-autocomplete-menu-options-display", + "value": "flex" }, { - \\"variable\\": \\"--amplify-components-badge-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-success)\\" + "variable": "--amplify-components-autocomplete-menu-options-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-badge-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-autocomplete-menu-options-max-height", + "value": "300px" }, { - \\"variable\\": \\"--amplify-components-badge-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-autocomplete-menu-space-shared-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-badge-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-warning)\\" + "variable": "--amplify-components-autocomplete-menu-space-shared-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-badge-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-components-autocomplete-menu-width", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-badge-background-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-flex-direction\\", - \\"value\\": \\"row\\" + "variable": "--amplify-components-badge-border-radius", + "value": "var(--amplify-radii-xl)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-flex-wrap\\", - \\"value\\": \\"wrap\\" + "variable": "--amplify-components-badge-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-gap\\", - \\"value\\": \\"0\\" + "variable": "--amplify-components-badge-error-background-color", + "value": "var(--amplify-colors-background-error)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-item-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-badge-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-item-color\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-item-flex-direction\\", - \\"value\\": \\"row\\" + "variable": "--amplify-components-badge-font-weight", + "value": "var(--amplify-font-weights-semibold)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-item-font-size\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-info-background-color", + "value": "var(--amplify-colors-background-info)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-item-line-height\\", - \\"value\\": \\"1\\" + "variable": "--amplify-components-badge-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-color\\", - \\"value\\": \\"var(--amplify-components-link-color)\\" + "variable": "--amplify-components-badge-large-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-current-color\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-large-padding-horizontal", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-current-font-size\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-large-padding-vertical", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-current-font-weight\\", - \\"value\\": \\"normal\\" + "variable": "--amplify-components-badge-line-height", + "value": "1" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-current-text-decoration\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-badge-padding-horizontal", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-font-size\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-padding-vertical", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-font-weight\\", - \\"value\\": \\"normal\\" + "variable": "--amplify-components-badge-small-font-size", + "value": "var(--amplify-font-sizes-xs)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-padding-block\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-badge-small-padding-horizontal", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-padding-inline\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-badge-small-padding-vertical", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-link-text-decoration\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-badge-success-background-color", + "value": "var(--amplify-colors-background-success)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-separator-color\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-separator-font-size\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-badge-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-breadcrumbs-separator-padding-inline\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-badge-warning-background-color", + "value": "var(--amplify-colors-background-warning)" }, { - \\"variable\\": \\"--amplify-components-button-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-20)\\" + "variable": "--amplify-components-badge-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-button-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-components-breadcrumbs-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-button-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-active)\\" + "variable": "--amplify-components-breadcrumbs-flex-direction", + "value": "row" }, { - \\"variable\\": \\"--amplify-components-button-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-breadcrumbs-flex-wrap", + "value": "wrap" }, { - \\"variable\\": \\"--amplify-components-button-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-components-breadcrumbs-gap", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-button-border-radius\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-radius)\\" + "variable": "--amplify-components-breadcrumbs-item-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-button-border-style\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-style)\\" + "variable": "--amplify-components-breadcrumbs-item-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-border-width\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-width)\\" + "variable": "--amplify-components-breadcrumbs-item-flex-direction", + "value": "row" }, { - \\"variable\\": \\"--amplify-components-button-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-breadcrumbs-item-font-size", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-breadcrumbs-item-line-height", + "value": "1" }, { - \\"variable\\": \\"--amplify-components-button-destructive-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-breadcrumbs-link-color", + "value": "var(--amplify-components-link-color)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-breadcrumbs-link-current-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-60)\\" + "variable": "--amplify-components-breadcrumbs-link-current-font-size", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-breadcrumbs-link-current-font-weight", + "value": "normal" }, { - \\"variable\\": \\"--amplify-components-button-destructive-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-breadcrumbs-link-current-text-decoration", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-button-destructive-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-breadcrumbs-link-font-size", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-breadcrumbs-link-font-weight", + "value": "normal" }, { - \\"variable\\": \\"--amplify-components-button-destructive-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-breadcrumbs-link-padding-block", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-disabled-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-breadcrumbs-link-padding-inline", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-breadcrumbs-link-text-decoration", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-button-destructive-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-breadcrumbs-separator-color", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-breadcrumbs-separator-font-size", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-button-destructive-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-error-focus-box-shadow)\\" + "variable": "--amplify-components-breadcrumbs-separator-padding-inline", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-active-background-color", + "value": "var(--amplify-colors-primary-20)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-button-active-border-color", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-active-color", + "value": "var(--amplify-colors-font-active)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-destructive-loading-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-button-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-loading-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-border-radius", + "value": "var(--amplify-components-fieldcontrol-border-radius)" }, { - \\"variable\\": \\"--amplify-components-button-destructive-loading-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-border-style", + "value": "var(--amplify-components-fieldcontrol-border-style)" }, { - \\"variable\\": \\"--amplify-components-button-disabled-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-border-width", + "value": "var(--amplify-components-fieldcontrol-border-width)" }, { - \\"variable\\": \\"--amplify-components-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-button-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-button-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-destructive-active-background-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-button-destructive-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-button-destructive-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-box-shadow)\\" + "variable": "--amplify-components-button-destructive-background-color", + "value": "var(--amplify-colors-red-60)" }, { - \\"variable\\": \\"--amplify-components-button-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-focus)\\" + "variable": "--amplify-components-button-destructive-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-components-button-destructive-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-button-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-button-destructive-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-button-destructive-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-60)\\" + "variable": "--amplify-components-button-destructive-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-focus)\\" + "variable": "--amplify-components-button-destructive-disabled-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-large-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-large-font-size)\\" + "variable": "--amplify-components-button-destructive-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-large-padding-block-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-large-padding-block-end)\\" + "variable": "--amplify-components-button-destructive-focus-background-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-button-large-padding-block-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-large-padding-block-start)\\" + "variable": "--amplify-components-button-destructive-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-large-padding-inline-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-large-padding-inline-end)\\" + "variable": "--amplify-components-button-destructive-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-error-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-button-large-padding-inline-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-large-padding-inline-start)\\" + "variable": "--amplify-components-button-destructive-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-line-height\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-line-height)\\" + "variable": "--amplify-components-button-destructive-hover-background-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-button-link-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-20)\\" + "variable": "--amplify-components-button-destructive-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-destructive-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-link-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-active)\\" + "variable": "--amplify-components-button-destructive-loading-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-link-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-destructive-loading-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-destructive-loading-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-link-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-button-disabled-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-color\\", - \\"value\\": \\"var(--amplify-colors-font-interactive)\\" + "variable": "--amplify-components-button-disabled-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-button-link-disabled-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-link-disabled-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-focus-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-20)\\" + "variable": "--amplify-components-button-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-focus-color", + "value": "var(--amplify-colors-font-focus)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-active-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-hover-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-hover-border-color", + "value": "var(--amplify-colors-primary-60)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-hover-color", + "value": "var(--amplify-colors-font-focus)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-large-font-size", + "value": "var(--amplify-components-fieldcontrol-large-font-size)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-large-padding-block-end", + "value": "var(--amplify-components-fieldcontrol-large-padding-block-end)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-focus-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-large-padding-block-start", + "value": "var(--amplify-components-fieldcontrol-large-padding-block-start)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-large-padding-inline-end", + "value": "var(--amplify-components-fieldcontrol-large-padding-inline-end)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-large-padding-inline-start", + "value": "var(--amplify-components-fieldcontrol-large-padding-inline-start)" }, { - \\"variable\\": \\"--amplify-components-button-link-error-hover-color\\", - \\"value\\": \\"var(--amplify-colors-red-90)\\" + "variable": "--amplify-components-button-line-height", + "value": "var(--amplify-components-fieldcontrol-line-height)" }, { - \\"variable\\": \\"--amplify-components-button-link-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-button-link-active-background-color", + "value": "var(--amplify-colors-primary-20)" }, { - \\"variable\\": \\"--amplify-components-button-link-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-box-shadow)\\" + "variable": "--amplify-components-button-link-active-color", + "value": "var(--amplify-colors-font-active)" }, { - \\"variable\\": \\"--amplify-components-button-link-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-focus)\\" + "variable": "--amplify-components-button-link-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-button-link-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-button-link-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-hover)\\" + "variable": "--amplify-components-button-link-color", + "value": "var(--amplify-colors-font-interactive)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-20)\\" + "variable": "--amplify-components-button-link-disabled-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-disabled-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-active-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-link-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-active-background-color", + "value": "var(--amplify-colors-red-20)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-link-error-active-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-10)\\" + "variable": "--amplify-components-button-link-error-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-link-error-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-focus-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-link-error-focus-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-10)\\" + "variable": "--amplify-components-button-link-error-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-info-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-info-hover-color\\", - \\"value\\": \\"var(--amplify-colors-blue-90)\\" + "variable": "--amplify-components-button-link-error-focus-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-loading-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-hover-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-loading-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-error-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-loading-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-link-error-hover-color", + "value": "var(--amplify-colors-red-90)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-components-button-link-focus-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-active-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-link-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-focus-color", + "value": "var(--amplify-colors-font-focus)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-hover-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-100)\\" + "variable": "--amplify-components-button-link-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-5)\\" + "variable": "--amplify-components-button-link-hover-color", + "value": "var(--amplify-colors-font-hover)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-info-active-background-color", + "value": "var(--amplify-colors-blue-20)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-link-info-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-focus-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-link-info-active-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-5)\\" + "variable": "--amplify-components-button-link-info-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-info-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-overlay-hover-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-80)\\" + "variable": "--amplify-components-button-link-info-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-20)\\" + "variable": "--amplify-components-button-link-info-focus-background-color", + "value": "var(--amplify-colors-blue-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-info-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-success-active-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-link-info-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-info-focus-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-info-hover-background-color", + "value": "var(--amplify-colors-blue-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-link-info-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-success-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-10)\\" + "variable": "--amplify-components-button-link-info-hover-color", + "value": "var(--amplify-colors-blue-90)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-loading-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-success-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-link-loading-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-success-focus-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-link-loading-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-10)\\" + "variable": "--amplify-components-button-link-overlay-active-background-color", + "value": "var(--amplify-colors-overlay-10)" }, { - \\"variable\\": \\"--amplify-components-button-link-success-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-overlay-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-success-hover-color\\", - \\"value\\": \\"var(--amplify-colors-green-90)\\" + "variable": "--amplify-components-button-link-overlay-active-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-20)\\" + "variable": "--amplify-components-button-link-overlay-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-overlay-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-active-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-link-overlay-color", + "value": "var(--amplify-colors-neutral-100)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-overlay-focus-background-color", + "value": "var(--amplify-colors-overlay-5)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-overlay-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-link-overlay-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-10)\\" + "variable": "--amplify-components-button-link-overlay-focus-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-overlay-hover-background-color", + "value": "var(--amplify-colors-overlay-5)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-link-overlay-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-focus-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-link-overlay-hover-color", + "value": "var(--amplify-colors-overlay-80)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-10)\\" + "variable": "--amplify-components-button-link-success-active-background-color", + "value": "var(--amplify-colors-green-20)" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-success-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-link-warning-hover-color\\", - \\"value\\": \\"var(--amplify-colors-orange-90)\\" + "variable": "--amplify-components-button-link-success-active-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-loader-wrapper-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-button-link-success-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-loader-wrapper-gap\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-button-link-success-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-loading-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-success-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-loading-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-button-link-success-focus-background-color", + "value": "var(--amplify-colors-green-10)" }, { - \\"variable\\": \\"--amplify-components-button-loading-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-link-success-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-menu-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-90)\\" + "variable": "--amplify-components-button-link-success-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-menu-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-link-success-focus-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-menu-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-success-hover-background-color", + "value": "var(--amplify-colors-green-10)" }, { - \\"variable\\": \\"--amplify-components-button-menu-border-width\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-button-link-success-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-menu-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-link-success-hover-color", + "value": "var(--amplify-colors-green-90)" }, { - \\"variable\\": \\"--amplify-components-button-menu-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-button-link-warning-active-background-color", + "value": "var(--amplify-colors-orange-20)" }, { - \\"variable\\": \\"--amplify-components-button-menu-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-link-warning-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-menu-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-button-link-warning-active-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-menu-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-link-warning-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-menu-justify-content\\", - \\"value\\": \\"start\\" + "variable": "--amplify-components-button-link-warning-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-20)\\" + "variable": "--amplify-components-button-link-warning-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-link-warning-focus-background-color", + "value": "var(--amplify-colors-orange-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-active-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-link-warning-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-link-warning-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-60)\\" + "variable": "--amplify-components-button-link-warning-focus-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-link-warning-hover-background-color", + "value": "var(--amplify-colors-orange-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-link-warning-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-link-warning-hover-color", + "value": "var(--amplify-colors-orange-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-loader-wrapper-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-focus-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-loader-wrapper-gap", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-loading-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-60)\\" + "variable": "--amplify-components-button-loading-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-error-hover-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-loading-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-20)\\" + "variable": "--amplify-components-button-menu-active-background-color", + "value": "var(--amplify-colors-primary-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-active-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-menu-border-width", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-border-color\\", - \\"value\\": \\"var(--amplify-colors-blue-60)\\" + "variable": "--amplify-components-button-menu-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-focus-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-10)\\" + "variable": "--amplify-components-button-menu-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-hover-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-focus-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-menu-justify-content", + "value": "start" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-10)\\" + "variable": "--amplify-components-button-outlined-error-active-background-color", + "value": "var(--amplify-colors-red-20)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-blue-60)\\" + "variable": "--amplify-components-button-outlined-error-active-border-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-info-hover-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-outlined-error-active-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-components-button-outlined-error-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-outlined-error-border-color", + "value": "var(--amplify-colors-red-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-active-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-100)\\" + "variable": "--amplify-components-button-outlined-error-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-error-focus-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-border-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-60)\\" + "variable": "--amplify-components-button-outlined-error-focus-border-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-button-outlined-error-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-5)\\" + "variable": "--amplify-components-button-outlined-error-focus-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-outlined-error-hover-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-outlined-error-hover-border-color", + "value": "var(--amplify-colors-red-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-focus-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-90)\\" + "variable": "--amplify-components-button-outlined-error-hover-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-5)\\" + "variable": "--amplify-components-button-outlined-info-active-background-color", + "value": "var(--amplify-colors-blue-20)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-60)\\" + "variable": "--amplify-components-button-outlined-info-active-border-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-overlay-hover-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-90)\\" + "variable": "--amplify-components-button-outlined-info-active-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-20)\\" + "variable": "--amplify-components-button-outlined-info-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-border-color", + "value": "var(--amplify-colors-blue-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-active-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-info-focus-background-color", + "value": "var(--amplify-colors-blue-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-border-color\\", - \\"value\\": \\"var(--amplify-colors-green-60)\\" + "variable": "--amplify-components-button-outlined-info-focus-border-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-10)\\" + "variable": "--amplify-components-button-outlined-info-focus-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-hover-background-color", + "value": "var(--amplify-colors-blue-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-hover-border-color", + "value": "var(--amplify-colors-blue-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-focus-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-info-hover-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-10)\\" + "variable": "--amplify-components-button-outlined-overlay-active-background-color", + "value": "var(--amplify-colors-overlay-10)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-green-60)\\" + "variable": "--amplify-components-button-outlined-overlay-active-border-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-success-hover-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-outlined-overlay-active-color", + "value": "var(--amplify-colors-neutral-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-20)\\" + "variable": "--amplify-components-button-outlined-overlay-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-border-color", + "value": "var(--amplify-colors-overlay-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-active-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-overlay-focus-background-color", + "value": "var(--amplify-colors-overlay-5)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-border-color\\", - \\"value\\": \\"var(--amplify-colors-orange-60)\\" + "variable": "--amplify-components-button-outlined-overlay-focus-border-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-10)\\" + "variable": "--amplify-components-button-outlined-overlay-focus-color", + "value": "var(--amplify-colors-neutral-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-hover-background-color", + "value": "var(--amplify-colors-overlay-5)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-hover-border-color", + "value": "var(--amplify-colors-overlay-60)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-focus-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-overlay-hover-color", + "value": "var(--amplify-colors-neutral-90)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-10)\\" + "variable": "--amplify-components-button-outlined-success-active-background-color", + "value": "var(--amplify-colors-green-20)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-orange-60)\\" + "variable": "--amplify-components-button-outlined-success-active-border-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-outlined-warning-hover-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-outlined-success-active-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-padding-block-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-padding-block-end)\\" + "variable": "--amplify-components-button-outlined-success-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-padding-block-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-padding-block-start)\\" + "variable": "--amplify-components-button-outlined-success-border-color", + "value": "var(--amplify-colors-green-60)" }, { - \\"variable\\": \\"--amplify-components-button-padding-inline-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-padding-inline-end)\\" + "variable": "--amplify-components-button-outlined-success-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-padding-inline-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-padding-inline-start)\\" + "variable": "--amplify-components-button-outlined-success-focus-background-color", + "value": "var(--amplify-colors-green-10)" }, { - \\"variable\\": \\"--amplify-components-button-primary-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-100)\\" + "variable": "--amplify-components-button-outlined-success-focus-border-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-success-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-outlined-success-focus-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-button-outlined-success-hover-background-color", + "value": "var(--amplify-colors-green-10)" }, { - \\"variable\\": \\"--amplify-components-button-primary-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-success-hover-border-color", + "value": "var(--amplify-colors-green-60)" }, { - \\"variable\\": \\"--amplify-components-button-primary-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-button-outlined-success-hover-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-button-outlined-warning-active-background-color", + "value": "var(--amplify-colors-orange-20)" }, { - \\"variable\\": \\"--amplify-components-button-primary-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-outlined-warning-active-border-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-button-outlined-warning-active-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-disabled-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-warning-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-outlined-warning-border-color", + "value": "var(--amplify-colors-orange-60)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-outlined-warning-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-warning-focus-background-color", + "value": "var(--amplify-colors-orange-10)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-outlined-warning-focus-border-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-button-outlined-warning-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-warning-focus-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-outlined-warning-hover-background-color", + "value": "var(--amplify-colors-orange-10)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-90)\\" + "variable": "--amplify-components-button-outlined-warning-hover-border-color", + "value": "var(--amplify-colors-orange-60)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-outlined-warning-hover-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-padding-block-end", + "value": "var(--amplify-components-fieldcontrol-padding-block-end)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-padding-block-start", + "value": "var(--amplify-components-fieldcontrol-padding-block-start)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-90)\\" + "variable": "--amplify-components-button-padding-inline-end", + "value": "var(--amplify-components-fieldcontrol-padding-inline-end)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-padding-inline-start", + "value": "var(--amplify-components-fieldcontrol-padding-inline-start)" }, { - \\"variable\\": \\"--amplify-components-button-primary-error-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-active-background-color", + "value": "var(--amplify-colors-primary-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-90)\\" + "variable": "--amplify-components-button-primary-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-box-shadow)\\" + "variable": "--amplify-components-button-primary-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-button-primary-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-90)\\" + "variable": "--amplify-components-button-primary-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-button-primary-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-button-primary-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-primary-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-disabled-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-80)\\" + "variable": "--amplify-components-button-primary-error-active-background-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-error-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-error-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-90)\\" + "variable": "--amplify-components-button-primary-error-background-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-error-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-blue-100)\\" + "variable": "--amplify-components-button-primary-error-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-error-focus-background-color", + "value": "var(--amplify-colors-red-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-blue-90)\\" + "variable": "--amplify-components-button-primary-error-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-error-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-info-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-error-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-loading-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-button-primary-error-hover-background-color", + "value": "var(--amplify-colors-red-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-loading-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-error-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-loading-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-primary-error-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-primary-focus-background-color", + "value": "var(--amplify-colors-primary-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-70)\\" + "variable": "--amplify-components-button-primary-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-hover-background-color", + "value": "var(--amplify-colors-primary-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-primary-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-info-active-background-color", + "value": "var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-primary-info-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-info-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-components-button-primary-info-background-color", + "value": "var(--amplify-colors-blue-80)" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-info-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-overlay-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-info-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-primary-info-focus-background-color", + "value": "var(--amplify-colors-blue-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-info-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-info-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-blue-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-80)\\" + "variable": "--amplify-components-button-primary-info-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-info-hover-background-color", + "value": "var(--amplify-colors-blue-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-info-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-90)\\" + "variable": "--amplify-components-button-primary-info-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-loading-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-green-100)\\" + "variable": "--amplify-components-button-primary-loading-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-loading-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-green-90)\\" + "variable": "--amplify-components-button-primary-overlay-active-background-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-overlay-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-success-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-overlay-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-primary-overlay-background-color", + "value": "var(--amplify-colors-overlay-70)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-active-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-overlay-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-overlay-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-80)\\" + "variable": "--amplify-components-button-primary-overlay-focus-background-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-overlay-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-overlay-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-90)\\" + "variable": "--amplify-components-button-primary-overlay-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-focus-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-overlay-hover-background-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-orange-100)\\" + "variable": "--amplify-components-button-primary-overlay-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-overlay-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-orange-90)\\" + "variable": "--amplify-components-button-primary-success-active-background-color", + "value": "var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-hover-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-success-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-primary-warning-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-button-primary-success-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-small-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-small-font-size)\\" + "variable": "--amplify-components-button-primary-success-background-color", + "value": "var(--amplify-colors-green-80)" }, { - \\"variable\\": \\"--amplify-components-button-small-padding-block-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-small-padding-block-end)\\" + "variable": "--amplify-components-button-primary-success-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-small-padding-block-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-small-padding-block-start)\\" + "variable": "--amplify-components-button-primary-success-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-small-padding-inline-end\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-small-padding-inline-end)\\" + "variable": "--amplify-components-button-primary-success-focus-background-color", + "value": "var(--amplify-colors-green-90)" }, { - \\"variable\\": \\"--amplify-components-button-small-padding-inline-start\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-small-padding-inline-start)\\" + "variable": "--amplify-components-button-primary-success-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-transition-duration\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-transition-duration)\\" + "variable": "--amplify-components-button-primary-success-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-green-100)" }, { - \\"variable\\": \\"--amplify-components-button-warning-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-20)\\" + "variable": "--amplify-components-button-primary-success-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-primary-success-hover-background-color", + "value": "var(--amplify-colors-green-90)" }, { - \\"variable\\": \\"--amplify-components-button-warning-active-color\\", - \\"value\\": \\"var(--amplify-colors-red-100)\\" + "variable": "--amplify-components-button-primary-success-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-warning-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-success-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-60)\\" + "variable": "--amplify-components-button-primary-warning-active-background-color", + "value": "var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-warning-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-button-primary-warning-active-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-warning-color\\", - \\"value\\": \\"var(--amplify-colors-red-60)\\" + "variable": "--amplify-components-button-primary-warning-active-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-disabled-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-primary-warning-background-color", + "value": "var(--amplify-colors-orange-80)" }, { - \\"variable\\": \\"--amplify-components-button-warning-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-button-primary-warning-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-warning-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-primary-warning-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-primary-warning-focus-background-color", + "value": "var(--amplify-colors-orange-90)" }, { - \\"variable\\": \\"--amplify-components-button-warning-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-button-primary-warning-focus-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-warning-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-error-focus-box-shadow)\\" + "variable": "--amplify-components-button-primary-warning-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-orange-100)" }, { - \\"variable\\": \\"--amplify-components-button-warning-focus-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-button-primary-warning-focus-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-red-10)\\" + "variable": "--amplify-components-button-primary-warning-hover-background-color", + "value": "var(--amplify-colors-orange-90)" }, { - \\"variable\\": \\"--amplify-components-button-warning-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-red-80)\\" + "variable": "--amplify-components-button-primary-warning-hover-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-button-warning-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-button-primary-warning-hover-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-button-warning-loading-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-small-font-size", + "value": "var(--amplify-components-fieldcontrol-small-font-size)" }, { - \\"variable\\": \\"--amplify-components-button-warning-loading-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-button-small-padding-block-end", + "value": "var(--amplify-components-fieldcontrol-small-padding-block-end)" }, { - \\"variable\\": \\"--amplify-components-button-warning-loading-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-button-small-padding-block-start", + "value": "var(--amplify-components-fieldcontrol-small-padding-block-start)" }, { - \\"variable\\": \\"--amplify-components-card-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-button-small-padding-inline-end", + "value": "var(--amplify-components-fieldcontrol-small-padding-inline-end)" }, { - \\"variable\\": \\"--amplify-components-card-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-small-padding-inline-start", + "value": "var(--amplify-components-fieldcontrol-small-padding-inline-start)" }, { - \\"variable\\": \\"--amplify-components-card-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xs)\\" + "variable": "--amplify-components-button-transition-duration", + "value": "var(--amplify-components-fieldcontrol-transition-duration)" }, { - \\"variable\\": \\"--amplify-components-card-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-button-warning-active-background-color", + "value": "var(--amplify-colors-red-20)" }, { - \\"variable\\": \\"--amplify-components-card-border-width\\", - \\"value\\": \\"0\\" + "variable": "--amplify-components-button-warning-active-border-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-card-box-shadow\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-button-warning-active-color", + "value": "var(--amplify-colors-red-100)" }, { - \\"variable\\": \\"--amplify-components-card-elevated-background-color\\", - \\"value\\": \\"var(--amplify-components-card-background-color)\\" + "variable": "--amplify-components-button-warning-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-card-elevated-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-button-warning-border-color", + "value": "var(--amplify-colors-red-60)" }, { - \\"variable\\": \\"--amplify-components-card-elevated-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xs)\\" + "variable": "--amplify-components-button-warning-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-card-elevated-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-button-warning-color", + "value": "var(--amplify-colors-red-60)" }, { - \\"variable\\": \\"--amplify-components-card-elevated-border-width\\", - \\"value\\": \\"0\\" + "variable": "--amplify-components-button-warning-disabled-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-card-elevated-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-medium)\\" + "variable": "--amplify-components-button-warning-disabled-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-background-color\\", - \\"value\\": \\"var(--amplify-components-card-background-color)\\" + "variable": "--amplify-components-button-warning-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-button-warning-focus-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xs)\\" + "variable": "--amplify-components-button-warning-focus-border-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-button-warning-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-error-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-button-warning-focus-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-card-outlined-box-shadow\\", - \\"value\\": \\"var(--amplify-components-card-box-shadow)\\" + "variable": "--amplify-components-button-warning-hover-background-color", + "value": "var(--amplify-colors-red-10)" }, { - \\"variable\\": \\"--amplify-components-card-padding\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-button-warning-hover-border-color", + "value": "var(--amplify-colors-red-80)" }, { - \\"variable\\": \\"--amplify-components-checkbox-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-button-warning-hover-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-button-warning-loading-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-button-warning-loading-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-border-radius\\", - \\"value\\": \\"20%\\" + "variable": "--amplify-components-button-warning-loading-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-card-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-card-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-height\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-card-border-radius", + "value": "var(--amplify-radii-xs)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-before-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-card-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-card-border-width", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-disabled)\\" + "variable": "--amplify-components-card-box-shadow", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-error-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-card-elevated-background-color", + "value": "var(--amplify-components-card-background-color)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-error-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-card-elevated-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-error-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 2px var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-card-elevated-border-radius", + "value": "var(--amplify-radii-xs)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-card-elevated-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 2px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-card-elevated-border-width", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-outline-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-card-elevated-box-shadow", + "value": "var(--amplify-shadows-medium)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-outline-offset\\", - \\"value\\": \\"var(--amplify-outline-offsets-medium)\\" + "variable": "--amplify-components-card-outlined-background-color", + "value": "var(--amplify-components-card-background-color)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-outline-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-card-outlined-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-focus-outline-width\\", - \\"value\\": \\"var(--amplify-outline-widths-medium)\\" + "variable": "--amplify-components-card-outlined-border-radius", + "value": "var(--amplify-radii-xs)" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-justify-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-card-outlined-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-checkbox-button-position\\", - \\"value\\": \\"relative\\" + "variable": "--amplify-components-card-outlined-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-checkbox-cursor\\", - \\"value\\": \\"pointer\\" + "variable": "--amplify-components-card-outlined-box-shadow", + "value": "var(--amplify-components-card-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-checkbox-disabled-cursor\\", - \\"value\\": \\"not-allowed\\" + "variable": "--amplify-components-card-padding", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-checkbox-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-border-radius\\", - \\"value\\": \\"20%\\" + "variable": "--amplify-components-checkbox-button-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-checked-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-checkbox-button-before-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-checked-opacity\\", - \\"value\\": \\"var(--amplify-opacities-100)\\" + "variable": "--amplify-components-checkbox-button-before-border-radius", + "value": "20%" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-checked-transform\\", - \\"value\\": \\"scale(1)\\" + "variable": "--amplify-components-checkbox-button-before-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-indeterminate-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-checkbox-button-before-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-indeterminate-opacity\\", - \\"value\\": \\"var(--amplify-opacities-100)\\" + "variable": "--amplify-components-checkbox-button-before-height", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-indeterminate-transform\\", - \\"value\\": \\"scale(1)\\" + "variable": "--amplify-components-checkbox-button-before-width", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-opacity\\", - \\"value\\": \\"var(--amplify-opacities-0)\\" + "variable": "--amplify-components-checkbox-button-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-transform\\", - \\"value\\": \\"scale(0)\\" + "variable": "--amplify-components-checkbox-button-disabled-border-color", + "value": "var(--amplify-colors-border-disabled)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-transition-duration\\", - \\"value\\": \\"var(--amplify-time-short)\\" + "variable": "--amplify-components-checkbox-button-error-border-color", + "value": "var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-transition-property\\", - \\"value\\": \\"all\\" + "variable": "--amplify-components-checkbox-button-error-focus-border-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-checkbox-icon-transition-timing-function\\", - \\"value\\": \\"ease-in-out\\" + "variable": "--amplify-components-checkbox-button-error-focus-box-shadow", + "value": "0px 0px 0px 2px var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-checkbox-label-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-checkbox-button-focus-border-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-checkboxfield-align-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-checkbox-button-focus-box-shadow", + "value": "0px 0px 0px 2px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-checkboxfield-align-items\\", - \\"value\\": \\"flex-start\\" + "variable": "--amplify-components-checkbox-button-focus-outline-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-checkboxfield-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-checkbox-button-focus-outline-offset", + "value": "var(--amplify-outline-offsets-medium)" }, { - \\"variable\\": \\"--amplify-components-checkboxfield-justify-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-checkbox-button-focus-outline-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-button-color\\", - \\"value\\": \\"var(--amplify-components-pagination-button-color)\\" + "variable": "--amplify-components-checkbox-button-focus-outline-width", + "value": "var(--amplify-outline-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-button-disabled-color\\", - \\"value\\": \\"var(--amplify-components-pagination-button-disabled-color)\\" + "variable": "--amplify-components-checkbox-button-justify-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-components-pagination-button-hover-background-color)\\" + "variable": "--amplify-components-checkbox-button-position", + "value": "relative" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-button-hover-color\\", - \\"value\\": \\"var(--amplify-components-pagination-button-hover-color)\\" + "variable": "--amplify-components-checkbox-cursor", + "value": "pointer" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-current-background-color\\", - \\"value\\": \\"var(--amplify-components-pagination-current-background-color)\\" + "variable": "--amplify-components-checkbox-disabled-cursor", + "value": "not-allowed" }, { - \\"variable\\": \\"--amplify-components-collection-pagination-current-color\\", - \\"value\\": \\"var(--amplify-components-pagination-current-color)\\" + "variable": "--amplify-components-checkbox-icon-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-active-background-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-active-background-color)\\" + "variable": "--amplify-components-checkbox-icon-border-radius", + "value": "20%" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-active-border-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-active-border-color)\\" + "variable": "--amplify-components-checkbox-icon-checked-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-active-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-active-color)\\" + "variable": "--amplify-components-checkbox-icon-checked-opacity", + "value": "var(--amplify-opacities-100)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-color)\\" + "variable": "--amplify-components-checkbox-icon-checked-transform", + "value": "scale(1)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-disabled-background-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-disabled-background-color)\\" + "variable": "--amplify-components-checkbox-icon-indeterminate-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-disabled-border-color)\\" + "variable": "--amplify-components-checkbox-icon-indeterminate-opacity", + "value": "var(--amplify-opacities-100)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-disabled-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-disabled-color)\\" + "variable": "--amplify-components-checkbox-icon-indeterminate-transform", + "value": "scale(1)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-focus-background-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-focus-background-color)\\" + "variable": "--amplify-components-checkbox-icon-opacity", + "value": "var(--amplify-opacities-0)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-focus-border-color)\\" + "variable": "--amplify-components-checkbox-icon-transform", + "value": "scale(0)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-focus-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-focus-color)\\" + "variable": "--amplify-components-checkbox-icon-transition-duration", + "value": "var(--amplify-time-short)" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-hover-background-color)\\" + "variable": "--amplify-components-checkbox-icon-transition-property", + "value": "all" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-hover-border-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-hover-border-color)\\" + "variable": "--amplify-components-checkbox-icon-transition-timing-function", + "value": "ease-in-out" }, { - \\"variable\\": \\"--amplify-components-collection-search-button-hover-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-button-hover-color)\\" + "variable": "--amplify-components-checkbox-label-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-collection-search-input-color\\", - \\"value\\": \\"var(--amplify-components-searchfield-color)\\" + "variable": "--amplify-components-checkboxfield-align-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-copy-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xs)\\" + "variable": "--amplify-components-checkboxfield-align-items", + "value": "flex-start" }, { - \\"variable\\": \\"--amplify-components-copy-gap\\", - \\"value\\": \\"var(--amplify-space-relative-medium)\\" + "variable": "--amplify-components-checkboxfield-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-copy-svg-path-fill\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-checkboxfield-justify-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-copy-tool-tip-bottom\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-collection-pagination-button-color", + "value": "var(--amplify-components-pagination-button-color)" }, { - \\"variable\\": \\"--amplify-components-copy-tool-tip-color\\", - \\"value\\": \\"var(--amplify-colors-teal-100)\\" + "variable": "--amplify-components-collection-pagination-button-disabled-color", + "value": "var(--amplify-components-pagination-button-disabled-color)" }, { - \\"variable\\": \\"--amplify-components-copy-tool-tip-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxs)\\" + "variable": "--amplify-components-collection-pagination-button-hover-background-color", + "value": "var(--amplify-components-pagination-button-hover-background-color)" }, { - \\"variable\\": \\"--amplify-components-countrycodeselect-height\\", - \\"value\\": \\"var(--amplify-space-relative-full)\\" + "variable": "--amplify-components-collection-pagination-button-hover-color", + "value": "var(--amplify-components-pagination-button-hover-color)" }, { - \\"variable\\": \\"--amplify-components-divider-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-collection-pagination-current-background-color", + "value": "var(--amplify-components-pagination-current-background-color)" }, { - \\"variable\\": \\"--amplify-components-divider-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-collection-pagination-current-color", + "value": "var(--amplify-components-pagination-current-color)" }, { - \\"variable\\": \\"--amplify-components-divider-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-collection-search-button-active-background-color", + "value": "var(--amplify-components-searchfield-button-active-background-color)" }, { - \\"variable\\": \\"--amplify-components-divider-label-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-collection-search-button-active-border-color", + "value": "var(--amplify-components-searchfield-button-active-border-color)" }, { - \\"variable\\": \\"--amplify-components-divider-label-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-collection-search-button-active-color", + "value": "var(--amplify-components-searchfield-button-active-color)" }, { - \\"variable\\": \\"--amplify-components-divider-label-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-collection-search-button-color", + "value": "var(--amplify-components-searchfield-button-color)" }, { - \\"variable\\": \\"--amplify-components-divider-label-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-collection-search-button-disabled-background-color", + "value": "var(--amplify-components-searchfield-button-disabled-background-color)" }, { - \\"variable\\": \\"--amplify-components-divider-large-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-large)\\" + "variable": "--amplify-components-collection-search-button-disabled-border-color", + "value": "var(--amplify-components-searchfield-button-disabled-border-color)" }, { - \\"variable\\": \\"--amplify-components-divider-opacity\\", - \\"value\\": \\"var(--amplify-opacities-60)\\" + "variable": "--amplify-components-collection-search-button-disabled-color", + "value": "var(--amplify-components-searchfield-button-disabled-color)" }, { - \\"variable\\": \\"--amplify-components-divider-small-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-collection-search-button-focus-background-color", + "value": "var(--amplify-components-searchfield-button-focus-background-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-success)\\" + "variable": "--amplify-components-collection-search-button-focus-border-color", + "value": "var(--amplify-components-searchfield-button-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-success)\\" + "variable": "--amplify-components-collection-search-button-focus-color", + "value": "var(--amplify-components-searchfield-button-focus-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-border-radius\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\" + "variable": "--amplify-components-collection-search-button-hover-background-color", + "value": "var(--amplify-components-searchfield-button-hover-background-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-border-style\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-style)\\" + "variable": "--amplify-components-collection-search-button-hover-border-color", + "value": "var(--amplify-components-searchfield-button-hover-border-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-border-width\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-width)\\" + "variable": "--amplify-components-collection-search-button-hover-color", + "value": "var(--amplify-components-searchfield-button-hover-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-accepted-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-collection-search-input-color", + "value": "var(--amplify-components-searchfield-color)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-copy-font-size", + "value": "var(--amplify-font-sizes-xs)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-pressed)\\" + "variable": "--amplify-components-copy-gap", + "value": "var(--amplify-space-relative-medium)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-border-radius\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\" + "variable": "--amplify-components-copy-svg-path-fill", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-border-style\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-style)\\" + "variable": "--amplify-components-copy-tool-tip-bottom", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-border-width\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-width)\\" + "variable": "--amplify-components-copy-tool-tip-color", + "value": "var(--amplify-colors-teal-100)" }, { - \\"variable\\": \\"--amplify-components-dropzone-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-copy-tool-tip-font-size", + "value": "var(--amplify-font-sizes-xxs)" }, { - \\"variable\\": \\"--amplify-components-dropzone-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-countrycodeselect-height", + "value": "var(--amplify-space-relative-full)" }, { - \\"variable\\": \\"--amplify-components-dropzone-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-divider-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-dropzone-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-divider-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-dropzone-border-style\\", - \\"value\\": \\"dashed\\" + "variable": "--amplify-components-divider-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-dropzone-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-divider-label-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-dropzone-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-divider-label-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-divider-label-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-disabled)\\" + "variable": "--amplify-components-divider-label-padding-inline", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-border-radius\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\" + "variable": "--amplify-components-divider-large-border-width", + "value": "var(--amplify-border-widths-large)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-border-style\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-style)\\" + "variable": "--amplify-components-divider-opacity", + "value": "var(--amplify-opacities-60)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-border-width\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-width)\\" + "variable": "--amplify-components-divider-small-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-dropzone-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-dropzone-accepted-background-color", + "value": "var(--amplify-colors-background-success)" }, { - \\"variable\\": \\"--amplify-components-dropzone-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-dropzone-accepted-border-color", + "value": "var(--amplify-colors-border-success)" }, { - \\"variable\\": \\"--amplify-components-dropzone-padding-block\\", - \\"value\\": \\"var(--amplify-space-xl)\\" + "variable": "--amplify-components-dropzone-accepted-border-radius", + "value": "var(--amplify-components-dropzone-border-radius)" }, { - \\"variable\\": \\"--amplify-components-dropzone-padding-inline\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-dropzone-accepted-border-style", + "value": "var(--amplify-components-dropzone-border-style)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-error)\\" + "variable": "--amplify-components-dropzone-accepted-border-width", + "value": "var(--amplify-components-dropzone-border-width)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-pressed)\\" + "variable": "--amplify-components-dropzone-accepted-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-border-radius\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-radius)\\" + "variable": "--amplify-components-dropzone-active-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-border-style\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-style)\\" + "variable": "--amplify-components-dropzone-active-border-color", + "value": "var(--amplify-colors-border-pressed)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-border-width\\", - \\"value\\": \\"var(--amplify-components-dropzone-border-width)\\" + "variable": "--amplify-components-dropzone-active-border-radius", + "value": "var(--amplify-components-dropzone-border-radius)" }, { - \\"variable\\": \\"--amplify-components-dropzone-rejected-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-dropzone-active-border-style", + "value": "var(--amplify-components-dropzone-border-style)" }, { - \\"variable\\": \\"--amplify-components-dropzone-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-dropzone-active-border-width", + "value": "var(--amplify-components-dropzone-border-width)" }, { - \\"variable\\": \\"--amplify-components-expander-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-dropzone-active-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-expander-border-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-expander-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-large)\\" + "variable": "--amplify-components-dropzone-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-expander-content-closed-animation-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-dropzone-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-expander-content-closed-animation-timing-function\\", - \\"value\\": \\"cubic-bezier(0.87, 0, 0.13, 1)\\" + "variable": "--amplify-components-dropzone-border-style", + "value": "dashed" }, { - \\"variable\\": \\"--amplify-components-expander-content-open-animation-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-dropzone-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-expander-content-open-animation-timing-function\\", - \\"value\\": \\"cubic-bezier(0.87, 0, 0.13, 1)\\" + "variable": "--amplify-components-dropzone-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-expander-content-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-dropzone-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-expander-content-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-dropzone-disabled-border-color", + "value": "var(--amplify-colors-border-disabled)" }, { - \\"variable\\": \\"--amplify-components-expander-content-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-secondary)\\" + "variable": "--amplify-components-dropzone-disabled-border-radius", + "value": "var(--amplify-components-dropzone-border-radius)" }, { - \\"variable\\": \\"--amplify-components-expander-content-text-padding-block-end\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-dropzone-disabled-border-style", + "value": "var(--amplify-components-dropzone-border-style)" }, { - \\"variable\\": \\"--amplify-components-expander-content-text-padding-block-start\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-dropzone-disabled-border-width", + "value": "var(--amplify-components-dropzone-border-width)" }, { - \\"variable\\": \\"--amplify-components-expander-display\\", - \\"value\\": \\"block\\" + "variable": "--amplify-components-dropzone-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-expander-header-box-shadow\\", - \\"value\\": \\"0 1px 0 var(--amplify-colors-overlay-20)\\" + "variable": "--amplify-components-dropzone-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-expander-icon-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-dropzone-padding-block", + "value": "var(--amplify-space-xl)" }, { - \\"variable\\": \\"--amplify-components-expander-icon-transition-timing-function\\", - \\"value\\": \\"cubic-bezier(0.87, 0, 0.13, 1)\\" + "variable": "--amplify-components-dropzone-padding-inline", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-bottom-left-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-background-color", + "value": "var(--amplify-colors-background-error)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-bottom-right-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-border-color", + "value": "var(--amplify-colors-border-pressed)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-end-end-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-border-radius", + "value": "var(--amplify-components-dropzone-border-radius)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-end-start-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-border-style", + "value": "var(--amplify-components-dropzone-border-style)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-start-end-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-border-width", + "value": "var(--amplify-components-dropzone-border-width)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-start-start-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-rejected-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-top-left-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-dropzone-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-expander-item-border-top-right-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-field-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-expander-item-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-small)\\" + "variable": "--amplify-components-field-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-expander-item-focus-box-shadow\\", - \\"value\\": \\"0 0 0 2px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-field-gap", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-expander-item-margin-top\\", - \\"value\\": \\"1px\\" + "variable": "--amplify-components-field-label-color", + "value": "var(--amplify-colors-font-secondary)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-field-large-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-components-field-large-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-justify-content\\", - \\"value\\": \\"space-between\\" + "variable": "--amplify-components-field-small-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-min-height\\", - \\"value\\": \\"3rem\\" + "variable": "--amplify-components-field-small-gap", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-fieldcontrol-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-expander-trigger-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-fieldcontrol-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-expander-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-fieldcontrol-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-field-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-fieldcontrol-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-field-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-fieldcontrol-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-field-gap\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-fieldcontrol-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-field-label-color\\", - \\"value\\": \\"var(--amplify-colors-font-secondary)\\" + "variable": "--amplify-components-fieldcontrol-disabled-border-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-field-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-fieldcontrol-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-field-large-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-fieldcontrol-disabled-cursor", + "value": "not-allowed" }, { - \\"variable\\": \\"--amplify-components-field-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-fieldcontrol-error-border-color", + "value": "var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-field-small-gap\\", - \\"value\\": \\"var(--amplify-space-xxxs)\\" + "variable": "--amplify-components-fieldcontrol-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-fieldcontrol-error-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-fieldcontrol-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-fieldcontrol-focus-box-shadow", + "value": "0px 0px 0px 1px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-fieldcontrol-font-size", + "value": "var(--amplify-components-field-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-fieldcontrol-large-font-size", + "value": "var(--amplify-components-field-large-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-fieldcontrol-large-padding-block-end", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-fieldcontrol-large-padding-block-start", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-fieldcontrol-large-padding-inline-end", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-disabled-cursor\\", - \\"value\\": \\"not-allowed\\" + "variable": "--amplify-components-fieldcontrol-large-padding-inline-start", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-error-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-fieldcontrol-line-height", + "value": "var(--amplify-line-heights-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-fieldcontrol-outline-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-error-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-fieldcontrol-outline-offset", + "value": "var(--amplify-outline-offsets-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-fieldcontrol-outline-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-focus-box-shadow\\", - \\"value\\": \\"0px 0px 0px 1px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-fieldcontrol-outline-width", + "value": "var(--amplify-outline-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-font-size\\", - \\"value\\": \\"var(--amplify-components-field-font-size)\\" + "variable": "--amplify-components-fieldcontrol-padding-block-end", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-large-font-size\\", - \\"value\\": \\"var(--amplify-components-field-large-font-size)\\" + "variable": "--amplify-components-fieldcontrol-padding-block-start", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-large-padding-block-end\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-fieldcontrol-padding-inline-end", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-large-padding-block-start\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-fieldcontrol-padding-inline-start", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-large-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-fieldcontrol-quiet-border-block-start", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-large-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-fieldcontrol-quiet-border-inline-end", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-line-height\\", - \\"value\\": \\"var(--amplify-line-heights-medium)\\" + "variable": "--amplify-components-fieldcontrol-quiet-border-inline-start", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-outline-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-fieldcontrol-quiet-border-radius", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-outline-offset\\", - \\"value\\": \\"var(--amplify-outline-offsets-medium)\\" + "variable": "--amplify-components-fieldcontrol-quiet-border-style", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-outline-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-fieldcontrol-quiet-error-border-block-end-color", + "value": "var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-outline-width\\", - \\"value\\": \\"var(--amplify-outline-widths-medium)\\" + "variable": "--amplify-components-fieldcontrol-quiet-error-focus-box-shadow", + "value": "0px 1px 0px var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-padding-block-end\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-fieldcontrol-quiet-focus-border-block-end-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-padding-block-start\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-fieldcontrol-quiet-focus-box-shadow", + "value": "0px 1px 0px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-fieldcontrol-small-font-size", + "value": "var(--amplify-components-field-small-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-fieldcontrol-small-padding-block-end", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-border-block-start\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-fieldcontrol-small-padding-block-start", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-border-inline-end\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-fieldcontrol-small-padding-inline-end", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-border-inline-start\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-fieldcontrol-small-padding-inline-start", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-border-radius\\", - \\"value\\": \\"0\\" + "variable": "--amplify-components-fieldcontrol-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-border-style\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-fieldgroup-gap", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-error-border-block-end-color\\", - \\"value\\": \\"var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-fieldgroup-outer-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-error-focus-box-shadow\\", - \\"value\\": \\"0px 1px 0px var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-fieldgroup-vertical-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-focus-border-block-end-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-fieldmessages-description-color", + "value": "var(--amplify-colors-font-secondary)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-quiet-focus-box-shadow\\", - \\"value\\": \\"0px 1px 0px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-fieldmessages-description-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-small-font-size\\", - \\"value\\": \\"var(--amplify-components-field-small-font-size)\\" + "variable": "--amplify-components-fieldmessages-description-font-style", + "value": "italic" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-small-padding-block-end\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-fieldmessages-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-small-padding-block-start\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-fieldmessages-error-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-small-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-fieldset-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-small-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-fieldset-border-radius", + "value": "var(--amplify-radii-xs)" }, { - \\"variable\\": \\"--amplify-components-fieldcontrol-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-fieldset-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-fieldgroup-gap\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-fieldset-gap", + "value": "var(--amplify-components-field-gap)" }, { - \\"variable\\": \\"--amplify-components-fieldgroup-outer-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-fieldset-large-gap", + "value": "var(--amplify-components-field-large-gap)" }, { - \\"variable\\": \\"--amplify-components-fieldgroup-vertical-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-fieldset-legend-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-fieldmessages-description-color\\", - \\"value\\": \\"var(--amplify-colors-font-secondary)\\" + "variable": "--amplify-components-fieldset-legend-font-size", + "value": "var(--amplify-components-field-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldmessages-description-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-fieldset-legend-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-fieldmessages-description-font-style\\", - \\"value\\": \\"italic\\" + "variable": "--amplify-components-fieldset-legend-large-font-size", + "value": "var(--amplify-components-field-large-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldmessages-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-fieldset-legend-line-height", + "value": "var(--amplify-line-heights-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldmessages-error-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-fieldset-legend-small-font-size", + "value": "var(--amplify-components-field-small-font-size)" }, { - \\"variable\\": \\"--amplify-components-fieldset-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-fieldset-outlined-border-color", + "value": "var(--amplify-colors-neutral-40)" }, { - \\"variable\\": \\"--amplify-components-fieldset-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xs)\\" + "variable": "--amplify-components-fieldset-outlined-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-fieldset-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-fieldset-outlined-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-fieldset-gap\\", - \\"value\\": \\"var(--amplify-components-field-gap)\\" + "variable": "--amplify-components-fieldset-outlined-large-padding", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-fieldset-large-gap\\", - \\"value\\": \\"var(--amplify-components-field-large-gap)\\" + "variable": "--amplify-components-fieldset-outlined-padding", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-fieldset-outlined-small-padding", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-font-size\\", - \\"value\\": \\"var(--amplify-components-field-font-size)\\" + "variable": "--amplify-components-fieldset-small-gap", + "value": "var(--amplify-components-field-small-gap)" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-flex-align-content", + "value": "normal" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-large-font-size\\", - \\"value\\": \\"var(--amplify-components-field-large-font-size)\\" + "variable": "--amplify-components-flex-align-items", + "value": "stretch" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-line-height\\", - \\"value\\": \\"var(--amplify-line-heights-medium)\\" + "variable": "--amplify-components-flex-flex-wrap", + "value": "nowrap" }, { - \\"variable\\": \\"--amplify-components-fieldset-legend-small-font-size\\", - \\"value\\": \\"var(--amplify-components-field-small-font-size)\\" + "variable": "--amplify-components-flex-gap", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-border-color\\", - \\"value\\": \\"var(--amplify-colors-neutral-40)\\" + "variable": "--amplify-components-flex-justify-content", + "value": "normal" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-heading-1-font-size", + "value": "var(--amplify-font-sizes-xxxxl)" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-heading-1-font-weight", + "value": "var(--amplify-font-weights-light)" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-large-padding\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-heading-2-font-size", + "value": "var(--amplify-font-sizes-xxxl)" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-padding\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-heading-2-font-weight", + "value": "var(--amplify-font-weights-normal)" }, { - \\"variable\\": \\"--amplify-components-fieldset-outlined-small-padding\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-heading-3-font-size", + "value": "var(--amplify-font-sizes-xxl)" }, { - \\"variable\\": \\"--amplify-components-fieldset-small-gap\\", - \\"value\\": \\"var(--amplify-components-field-small-gap)\\" + "variable": "--amplify-components-heading-3-font-weight", + "value": "var(--amplify-font-weights-medium)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-heading-4-font-size", + "value": "var(--amplify-font-sizes-xl)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-pressed)\\" + "variable": "--amplify-components-heading-4-font-weight", + "value": "var(--amplify-font-weights-semibold)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-active-border-radius\\", - \\"value\\": \\"var(--amplify-components-fileuploader-dropzone-border-radius)\\" + "variable": "--amplify-components-heading-5-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-active-border-style\\", - \\"value\\": \\"var(--amplify-components-fileuploader-dropzone-border-style)\\" + "variable": "--amplify-components-heading-5-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-active-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-heading-6-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-heading-6-font-weight", + "value": "var(--amplify-font-weights-extrabold)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-heading-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-heading-line-height", + "value": "var(--amplify-line-heights-small)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-border-style\\", - \\"value\\": \\"dashed\\" + "variable": "--amplify-components-highlightmatch-highlighted-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-icon-height", + "value": "1em" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-icon-line-height", + "value": "1" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-icon-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-image-height", + "value": "auto" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-icon-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxl)\\" + "variable": "--amplify-components-image-max-width", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-padding-block\\", - \\"value\\": \\"var(--amplify-space-xl)\\" + "variable": "--amplify-components-image-object-fit", + "value": "initial" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-padding-inline\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-image-object-position", + "value": "initial" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-inappmessaging-banner-height", + "value": "150px " }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-inappmessaging-banner-width", + "value": "400px " }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-text-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-inappmessaging-button-background-color", + "value": "#e8e8e8" }, { - \\"variable\\": \\"--amplify-components-fileuploader-dropzone-text-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-inappmessaging-button-border-radius", + "value": "5px" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-align-items\\", - \\"value\\": \\"baseline\\" + "variable": "--amplify-components-inappmessaging-button-color", + "value": "black" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-inappmessaging-dialog-height", + "value": "50vh" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-inappmessaging-dialog-min-height", + "value": "400px" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-inappmessaging-dialog-min-width", + "value": "400px" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-inappmessaging-dialog-width", + "value": "30vw" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-inappmessaging-header-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-inappmessaging-header-font-weight", + "value": "var(--amplify-font-weights-extrabold)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-image-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-input-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-image-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-input-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-image-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-input-focus-border-color", + "value": "var(--amplify-components-fieldcontrol-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-image-height\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-input-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-image-width\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-link-active-color", + "value": "var(--amplify-colors-font-active)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-name-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-link-color", + "value": "var(--amplify-colors-font-interactive)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-name-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-link-focus-color", + "value": "var(--amplify-colors-font-focus)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-name-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-link-hover-color", + "value": "var(--amplify-colors-font-hover)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-link-visited-color", + "value": "var(--amplify-colors-font-interactive)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-padding-inline\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-liveness-camera-module-background-color", + "value": "var(--amplify-colors-black)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-size-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-loader-animation-duration", + "value": "1s" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-size-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-loader-font-size", + "value": "var(--amplify-font-sizes-xs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-file-size-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-normal)\\" + "variable": "--amplify-components-loader-height", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-loader-stroke-empty\\", - \\"value\\": \\"var(--amplify-colors-border-secondary)\\" + "variable": "--amplify-components-loader-large-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-loader-stroke-filled\\", - \\"value\\": \\"var(--amplify-components-loader-stroke-filled)\\" + "variable": "--amplify-components-loader-large-height", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-loader-stroke-linecap\\", - \\"value\\": \\"round\\" + "variable": "--amplify-components-loader-large-width", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-loader-stroke-width\\", - \\"value\\": \\"var(--amplify-border-widths-large)\\" + "variable": "--amplify-components-loader-linear-animation-duration", + "value": "1s" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-loader-linear-font-size", + "value": "var(--amplify-font-sizes-xxs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-body-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-loader-linear-large-font-size", + "value": "var(--amplify-font-sizes-xs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-body-padding-block\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-loader-linear-large-stroke-width", + "value": "var(--amplify-font-sizes-xs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-body-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-loader-linear-min-width", + "value": "5rem" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-loader-linear-small-font-size", + "value": "var(--amplify-font-sizes-xxxs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-loader-linear-small-stroke-width", + "value": "var(--amplify-font-sizes-xxxs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-loader-linear-stroke-empty", + "value": "var(--amplify-colors-neutral-20)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-loader-linear-stroke-filled", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-secondary)\\" + "variable": "--amplify-components-loader-linear-stroke-linecap", + "value": "round" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-loader-linear-stroke-width", + "value": "var(--amplify-font-sizes-xxs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-loader-linear-width", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-justify-content\\", - \\"value\\": \\"space-between\\" + "variable": "--amplify-components-loader-small-font-size", + "value": "var(--amplify-font-sizes-xxs)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-padding-block\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-loader-small-height", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-footer-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-loader-small-width", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-max-height\\", - \\"value\\": \\"40rem\\" + "variable": "--amplify-components-loader-stroke-empty", + "value": "var(--amplify-colors-neutral-20)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-max-width\\", - \\"value\\": \\"auto\\" + "variable": "--amplify-components-loader-stroke-filled", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-padding-block\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-loader-stroke-linecap", + "value": "round" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-padding-inline\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-loader-text-fill", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-loader-width", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-text-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-menu-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-fileuploader-previewer-text-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-menu-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-flex-align-content\\", - \\"value\\": \\"normal\\" + "variable": "--amplify-components-menu-border-radius", + "value": "var(--amplify-radii-medium)" }, { - \\"variable\\": \\"--amplify-components-flex-align-items\\", - \\"value\\": \\"stretch\\" + "variable": "--amplify-components-menu-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-flex-flex-wrap\\", - \\"value\\": \\"nowrap\\" + "variable": "--amplify-components-menu-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-flex-gap\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-menu-box-shadow", + "value": "var(--amplify-shadows-large)" }, { - \\"variable\\": \\"--amplify-components-flex-justify-content\\", - \\"value\\": \\"normal\\" + "variable": "--amplify-components-menu-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-heading-1-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxxl)\\" + "variable": "--amplify-components-menu-gap", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-heading-1-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-light)\\" + "variable": "--amplify-components-menu-item-min-height", + "value": "2.5rem" }, { - \\"variable\\": \\"--amplify-components-heading-2-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxl)\\" + "variable": "--amplify-components-menu-item-padding-inline-end", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-heading-2-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-normal)\\" + "variable": "--amplify-components-menu-item-padding-inline-start", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-heading-3-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxl)\\" + "variable": "--amplify-components-menu-large-height", + "value": "var(--amplify-font-sizes-xxxl)" }, { - \\"variable\\": \\"--amplify-components-heading-3-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-medium)\\" + "variable": "--amplify-components-menu-large-width", + "value": "var(--amplify-font-sizes-xxxl)" }, { - \\"variable\\": \\"--amplify-components-heading-4-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xl)\\" + "variable": "--amplify-components-menu-max-width", + "value": "30rem" }, { - \\"variable\\": \\"--amplify-components-heading-4-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-semibold)\\" + "variable": "--amplify-components-menu-min-width", + "value": "14rem" }, { - \\"variable\\": \\"--amplify-components-heading-5-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-menu-small-height", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-heading-5-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-menu-small-width", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-heading-6-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-message-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-heading-6-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-extrabold)\\" + "variable": "--amplify-components-message-background-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-heading-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-message-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-heading-line-height\\", - \\"value\\": \\"var(--amplify-line-heights-small)\\" + "variable": "--amplify-components-message-border-radius", + "value": "var(--amplify-radii-xs)" }, { - \\"variable\\": \\"--amplify-components-highlightmatch-highlighted-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-message-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-icon-height\\", - \\"value\\": \\"1em\\" + "variable": "--amplify-components-message-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-icon-line-height\\", - \\"value\\": \\"1\\" + "variable": "--amplify-components-message-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-image-height\\", - \\"value\\": \\"auto\\" + "variable": "--amplify-components-message-dismiss-gap", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-image-max-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-message-filled-background-color", + "value": "var(--amplify-colors-background-secondary)" }, { - \\"variable\\": \\"--amplify-components-image-object-fit\\", - \\"value\\": \\"initial\\" + "variable": "--amplify-components-message-filled-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-image-object-position\\", - \\"value\\": \\"initial\\" + "variable": "--amplify-components-message-filled-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-banner-height\\", - \\"value\\": \\"150px \\" + "variable": "--amplify-components-message-filled-error-background-color", + "value": "var(--amplify-colors-background-error)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-banner-width\\", - \\"value\\": \\"400px \\" + "variable": "--amplify-components-message-filled-error-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-button-background-color\\", - \\"value\\": \\"#e8e8e8\\" + "variable": "--amplify-components-message-filled-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-button-border-radius\\", - \\"value\\": \\"5px\\" + "variable": "--amplify-components-message-filled-info-background-color", + "value": "var(--amplify-colors-background-info)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-button-color\\", - \\"value\\": \\"black\\" + "variable": "--amplify-components-message-filled-info-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-dialog-height\\", - \\"value\\": \\"50vh\\" + "variable": "--amplify-components-message-filled-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-dialog-min-height\\", - \\"value\\": \\"400px\\" + "variable": "--amplify-components-message-filled-success-background-color", + "value": "var(--amplify-colors-background-success)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-dialog-min-width\\", - \\"value\\": \\"400px\\" + "variable": "--amplify-components-message-filled-success-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-dialog-width\\", - \\"value\\": \\"30vw\\" + "variable": "--amplify-components-message-filled-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-header-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-message-filled-warning-background-color", + "value": "var(--amplify-colors-background-warning)" }, { - \\"variable\\": \\"--amplify-components-inappmessaging-header-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-extrabold)\\" + "variable": "--amplify-components-message-filled-warning-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-input-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-components-message-filled-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-input-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-message-heading-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-input-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-border-color)\\" + "variable": "--amplify-components-message-heading-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-input-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-components-message-icon-size", + "value": "var(--amplify-font-sizes-xl)" }, { - \\"variable\\": \\"--amplify-components-link-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-active)\\" + "variable": "--amplify-components-message-justify-content", + "value": "flex-start" }, { - \\"variable\\": \\"--amplify-components-link-color\\", - \\"value\\": \\"var(--amplify-colors-font-interactive)\\" + "variable": "--amplify-components-message-line-height", + "value": "var(--amplify-line-heights-small)" }, { - \\"variable\\": \\"--amplify-components-link-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-focus)\\" + "variable": "--amplify-components-message-outlined-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-link-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-hover)\\" + "variable": "--amplify-components-message-outlined-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-link-visited-color\\", - \\"value\\": \\"var(--amplify-colors-font-interactive)\\" + "variable": "--amplify-components-message-outlined-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-liveness-camera-module-background-color\\", - \\"value\\": \\"var(--amplify-colors-black)\\" + "variable": "--amplify-components-message-outlined-error-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-animation-duration\\", - \\"value\\": \\"1s\\" + "variable": "--amplify-components-message-outlined-error-border-color", + "value": "var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-loader-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xs)\\" + "variable": "--amplify-components-message-outlined-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-loader-height\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-message-outlined-info-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-message-outlined-info-border-color", + "value": "var(--amplify-colors-border-info)" }, { - \\"variable\\": \\"--amplify-components-loader-large-height\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-message-outlined-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-loader-large-width\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-message-outlined-success-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-animation-duration\\", - \\"value\\": \\"1s\\" + "variable": "--amplify-components-message-outlined-success-border-color", + "value": "var(--amplify-colors-border-success)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxs)\\" + "variable": "--amplify-components-message-outlined-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xs)\\" + "variable": "--amplify-components-message-outlined-warning-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-large-stroke-width\\", - \\"value\\": \\"var(--amplify-font-sizes-xs)\\" + "variable": "--amplify-components-message-outlined-warning-border-color", + "value": "var(--amplify-colors-border-warning)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-min-width\\", - \\"value\\": \\"5rem\\" + "variable": "--amplify-components-message-outlined-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxs)\\" + "variable": "--amplify-components-message-padding-block", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-small-stroke-width\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxs)\\" + "variable": "--amplify-components-message-padding-inline", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-stroke-empty\\", - \\"value\\": \\"var(--amplify-colors-neutral-20)\\" + "variable": "--amplify-components-message-plain-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-stroke-filled\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-message-plain-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-loader-linear-stroke-linecap\\", - \\"value\\": \\"round\\" + "variable": "--amplify-components-message-plain-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-stroke-width\\", - \\"value\\": \\"var(--amplify-font-sizes-xxs)\\" + "variable": "--amplify-components-message-plain-error-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-linear-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-message-plain-error-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-loader-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxs)\\" + "variable": "--amplify-components-message-plain-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-loader-small-height\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-message-plain-info-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-small-width\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-message-plain-info-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-loader-stroke-empty\\", - \\"value\\": \\"var(--amplify-colors-neutral-20)\\" + "variable": "--amplify-components-message-plain-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-loader-stroke-filled\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-message-plain-success-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-loader-stroke-linecap\\", - \\"value\\": \\"round\\" + "variable": "--amplify-components-message-plain-success-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-loader-text-fill\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-message-plain-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-loader-width\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-message-plain-warning-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-menu-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-message-plain-warning-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-menu-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-message-plain-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-menu-border-radius\\", - \\"value\\": \\"var(--amplify-radii-medium)\\" + "variable": "--amplify-components-pagination-button-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-menu-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-pagination-button-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-menu-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-pagination-button-hover-background-color", + "value": "var(--amplify-colors-overlay-10)" }, { - \\"variable\\": \\"--amplify-components-menu-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-large)\\" + "variable": "--amplify-components-pagination-button-hover-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-menu-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-pagination-button-padding-inline-end", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-menu-gap\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-pagination-button-padding-inline-start", + "value": "var(--amplify-space-xxs)" }, { - \\"variable\\": \\"--amplify-components-menu-item-min-height\\", - \\"value\\": \\"2.5rem\\" + "variable": "--amplify-components-pagination-button-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-menu-item-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-pagination-button-transition-property", + "value": "background-color" }, { - \\"variable\\": \\"--amplify-components-menu-item-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-pagination-current-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-menu-large-height\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxl)\\" + "variable": "--amplify-components-pagination-current-background-color", + "value": "var(--amplify-colors-overlay-40)" }, { - \\"variable\\": \\"--amplify-components-menu-large-width\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxl)\\" + "variable": "--amplify-components-pagination-current-color", + "value": "var(--amplify-colors-font-inverse)" }, { - \\"variable\\": \\"--amplify-components-menu-max-width\\", - \\"value\\": \\"30rem\\" + "variable": "--amplify-components-pagination-current-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-menu-min-width\\", - \\"value\\": \\"14rem\\" + "variable": "--amplify-components-pagination-current-justify-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-menu-small-height\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-pagination-ellipsis-align-items", + "value": "baseline" }, { - \\"variable\\": \\"--amplify-components-menu-small-width\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-pagination-ellipsis-justify-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-message-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-pagination-ellipsis-padding-inline-end", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-message-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-pagination-ellipsis-padding-inline-start", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-message-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-pagination-item-container-margin-left", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-message-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xs)\\" + "variable": "--amplify-components-pagination-item-container-margin-right", + "value": "var(--amplify-space-xxxs)" }, { - \\"variable\\": \\"--amplify-components-message-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-pagination-item-shared-border-radius", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-message-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-pagination-item-shared-height", + "value": "var(--amplify-font-sizes-xxl)" }, { - \\"variable\\": \\"--amplify-components-message-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-pagination-item-shared-min-width", + "value": "var(--amplify-font-sizes-xxl)" }, { - \\"variable\\": \\"--amplify-components-message-dismiss-gap\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-passwordfield-button-active-background-color", + "value": "var(--amplify-components-button-active-background-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-passwordfield-button-active-border-color", + "value": "var(--amplify-components-button-active-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-passwordfield-button-active-color", + "value": "var(--amplify-components-button-active-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-passwordfield-button-color", + "value": "var(--amplify-components-button-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-error)\\" + "variable": "--amplify-components-passwordfield-button-disabled-background-color", + "value": "var(--amplify-components-button-disabled-background-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-error-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-passwordfield-button-disabled-border-color", + "value": "var(--amplify-components-button-disabled-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-passwordfield-button-disabled-color", + "value": "var(--amplify-components-button-disabled-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-info)\\" + "variable": "--amplify-components-passwordfield-button-focus-background-color", + "value": "var(--amplify-components-button-focus-background-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-info-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-passwordfield-button-focus-border-color", + "value": "var(--amplify-components-button-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-passwordfield-button-focus-color", + "value": "var(--amplify-components-button-focus-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-success)\\" + "variable": "--amplify-components-passwordfield-button-hover-background-color", + "value": "var(--amplify-components-button-hover-background-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-success-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-passwordfield-button-hover-border-color", + "value": "var(--amplify-components-button-hover-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-passwordfield-button-hover-color", + "value": "var(--amplify-components-button-hover-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-warning)\\" + "variable": "--amplify-components-passwordfield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-warning-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-phonenumberfield-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-filled-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-components-phonenumberfield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-message-heading-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-phonenumberfield-focus-border-color", + "value": "var(--amplify-components-fieldcontrol-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-message-heading-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-phonenumberfield-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-message-icon-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xl)\\" + "variable": "--amplify-components-placeholder-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-message-justify-content\\", - \\"value\\": \\"flex-start\\" + "variable": "--amplify-components-placeholder-default-height", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-message-line-height\\", - \\"value\\": \\"var(--amplify-line-heights-small)\\" + "variable": "--amplify-components-placeholder-end-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-placeholder-large-height", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-placeholder-small-height", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-placeholder-start-color", + "value": "var(--amplify-colors-background-secondary)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-placeholder-transition-duration", + "value": "var(--amplify-time-long)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-error-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-radio-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-message-outlined-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-radio-button-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-message-outlined-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-info-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-info)\\" + "variable": "--amplify-components-radio-button-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-radio-button-border-radius", + "value": "50%" }, { - \\"variable\\": \\"--amplify-components-message-outlined-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-message-outlined-success-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-success)\\" + "variable": "--amplify-components-radio-button-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-radio-button-box-sizing", + "value": "border-box" }, { - \\"variable\\": \\"--amplify-components-message-outlined-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-checked-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-warning-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-warning)\\" + "variable": "--amplify-components-radio-button-checked-disabled-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-message-outlined-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-components-radio-button-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-message-padding-block\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-radio-button-disabled-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-message-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-radio-button-disabled-border-color", + "value": "var(--amplify-colors-border-disabled)" }, { - \\"variable\\": \\"--amplify-components-message-plain-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-error-border-color", + "value": "var(--amplify-colors-border-error)" }, { - \\"variable\\": \\"--amplify-components-message-plain-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-radio-button-error-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-error-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-message-plain-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-radio-button-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-message-plain-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-message-plain-error-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-radio-button-height", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-message-plain-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-radio-button-justify-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-message-plain-info-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-large-height", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-message-plain-info-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-radio-button-large-width", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-message-plain-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-radio-button-outline-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-message-plain-success-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-outline-offset", + "value": "var(--amplify-outline-offsets-medium)" }, { - \\"variable\\": \\"--amplify-components-message-plain-success-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-radio-button-outline-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-message-plain-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-components-radio-button-outline-width", + "value": "var(--amplify-outline-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-message-plain-warning-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-radio-button-padding", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-message-plain-warning-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-radio-button-small-height", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-message-plain-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-components-radio-button-small-width", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-pagination-button-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-radio-button-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-pagination-button-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-radio-button-transition-property", + "value": "all" }, { - \\"variable\\": \\"--amplify-components-pagination-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-components-radio-button-width", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-pagination-button-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-radio-disabled-cursor", + "value": "not-allowed" }, { - \\"variable\\": \\"--amplify-components-pagination-button-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-radio-gap", + "value": "inherit" }, { - \\"variable\\": \\"--amplify-components-pagination-button-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-xxs)\\" + "variable": "--amplify-components-radio-justify-content", + "value": "flex-start" }, { - \\"variable\\": \\"--amplify-components-pagination-button-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-radio-label-color", + "value": "var(--amplify-components-text-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-button-transition-property\\", - \\"value\\": \\"background-color\\" + "variable": "--amplify-components-radio-label-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-pagination-current-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-radiogroup-legend-color", + "value": "var(--amplify-components-fieldset-legend-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-current-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-40)\\" + "variable": "--amplify-components-radiogroup-legend-font-weight", + "value": "var(--amplify-font-weights-normal)" }, { - \\"variable\\": \\"--amplify-components-pagination-current-color\\", - \\"value\\": \\"var(--amplify-colors-font-inverse)\\" + "variable": "--amplify-components-radiogroup-radio-background-color", + "value": "var(--amplify-components-radio-button-background-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-current-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-radiogroup-radio-border-color", + "value": "var(--amplify-components-radio-button-border-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-current-justify-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-radiogroup-radio-border-width", + "value": "var(--amplify-components-radio-button-border-width)" }, { - \\"variable\\": \\"--amplify-components-pagination-ellipsis-align-items\\", - \\"value\\": \\"baseline\\" + "variable": "--amplify-components-radiogroup-radio-checked-color", + "value": "var(--amplify-components-radio-button-checked-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-ellipsis-justify-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-radiogroup-radio-label-color", + "value": "var(--amplify-components-radio-label-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-ellipsis-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-rating-default-size", + "value": "var(--amplify-font-sizes-xl)" }, { - \\"variable\\": \\"--amplify-components-pagination-ellipsis-padding-inline-start\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-rating-empty-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-pagination-item-container-margin-left\\", - \\"value\\": \\"var(--amplify-space-xxxs)\\" + "variable": "--amplify-components-rating-filled-color", + "value": "var(--amplify-colors-secondary-80)" }, { - \\"variable\\": \\"--amplify-components-pagination-item-container-margin-right\\", - \\"value\\": \\"var(--amplify-space-xxxs)\\" + "variable": "--amplify-components-rating-large-size", + "value": "var(--amplify-font-sizes-xxxl)" }, { - \\"variable\\": \\"--amplify-components-pagination-item-shared-border-radius\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-rating-small-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-pagination-item-shared-height\\", - \\"value\\": \\"var(--amplify-font-sizes-xxl)\\" + "variable": "--amplify-components-searchfield-button-active-background-color", + "value": "var(--amplify-components-button-active-background-color)" }, { - \\"variable\\": \\"--amplify-components-pagination-item-shared-min-width\\", - \\"value\\": \\"var(--amplify-font-sizes-xxl)\\" + "variable": "--amplify-components-searchfield-button-active-border-color", + "value": "var(--amplify-components-button-active-border-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-active-background-color\\", - \\"value\\": \\"var(--amplify-components-button-active-background-color)\\" + "variable": "--amplify-components-searchfield-button-active-color", + "value": "var(--amplify-components-button-active-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-active-border-color\\", - \\"value\\": \\"var(--amplify-components-button-active-border-color)\\" + "variable": "--amplify-components-searchfield-button-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-active-color\\", - \\"value\\": \\"var(--amplify-components-button-active-color)\\" + "variable": "--amplify-components-searchfield-button-color", + "value": "var(--amplify-components-button-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-color\\", - \\"value\\": \\"var(--amplify-components-button-color)\\" + "variable": "--amplify-components-searchfield-button-disabled-background-color", + "value": "var(--amplify-components-button-disabled-background-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-disabled-background-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-background-color)\\" + "variable": "--amplify-components-searchfield-button-disabled-border-color", + "value": "var(--amplify-components-button-disabled-border-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-border-color)\\" + "variable": "--amplify-components-searchfield-button-disabled-color", + "value": "var(--amplify-components-button-disabled-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-disabled-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-color)\\" + "variable": "--amplify-components-searchfield-button-focus-background-color", + "value": "var(--amplify-components-button-focus-background-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-focus-background-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-background-color)\\" + "variable": "--amplify-components-searchfield-button-focus-border-color", + "value": "var(--amplify-components-button-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-border-color)\\" + "variable": "--amplify-components-searchfield-button-focus-color", + "value": "var(--amplify-components-button-focus-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-focus-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-color)\\" + "variable": "--amplify-components-searchfield-button-hover-background-color", + "value": "var(--amplify-components-button-hover-background-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-background-color)\\" + "variable": "--amplify-components-searchfield-button-hover-border-color", + "value": "var(--amplify-components-button-hover-border-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-hover-border-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-border-color)\\" + "variable": "--amplify-components-searchfield-button-hover-color", + "value": "var(--amplify-components-button-hover-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-button-hover-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-color)\\" + "variable": "--amplify-components-searchfield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-passwordfield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-select-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-phonenumberfield-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-components-select-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-phonenumberfield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-select-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-phonenumberfield-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-border-color)\\" + "variable": "--amplify-components-select-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-phonenumberfield-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-components-select-expanded-option-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-placeholder-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-select-expanded-option-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-placeholder-default-height\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-select-expanded-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-placeholder-end-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-select-expanded-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-placeholder-large-height\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-select-icon-wrapper-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-placeholder-small-height\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-select-icon-wrapper-large-right", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-placeholder-start-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-select-icon-wrapper-pointer-events", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-placeholder-transition-duration\\", - \\"value\\": \\"var(--amplify-time-long)\\" + "variable": "--amplify-components-select-icon-wrapper-position", + "value": "absolute" }, { - \\"variable\\": \\"--amplify-components-radio-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-select-icon-wrapper-right", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-radio-button-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-select-icon-wrapper-small-right", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-radio-button-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-select-icon-wrapper-top", + "value": "50%" }, { - \\"variable\\": \\"--amplify-components-radio-button-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-select-icon-wrapper-transform", + "value": "translateY(-50%)" }, { - \\"variable\\": \\"--amplify-components-radio-button-border-radius\\", - \\"value\\": \\"50%\\" + "variable": "--amplify-components-select-large-min-width", + "value": "7.5rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-select-large-padding-inline-end", + "value": "var(--amplify-space-xxl)" }, { - \\"variable\\": \\"--amplify-components-radio-button-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-select-min-width", + "value": "6.5rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-box-sizing\\", - \\"value\\": \\"border-box\\" + "variable": "--amplify-components-select-option-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-radio-button-checked-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-select-option-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-radio-button-checked-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-select-option-disabled-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-radio-button-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-select-option-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-radio-button-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-select-padding-inline-end", + "value": "var(--amplify-space-xxl)" }, { - \\"variable\\": \\"--amplify-components-radio-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-disabled)\\" + "variable": "--amplify-components-select-small-min-width", + "value": "5.5rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-error-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-error)\\" + "variable": "--amplify-components-select-small-padding-inline-end", + "value": "var(--amplify-space-xl)" }, { - \\"variable\\": \\"--amplify-components-radio-button-error-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-error-focus-box-shadow)\\" + "variable": "--amplify-components-select-white-space", + "value": "nowrap" }, { - \\"variable\\": \\"--amplify-components-radio-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-select-wrapper-cursor", + "value": "pointer" }, { - \\"variable\\": \\"--amplify-components-radio-button-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-box-shadow)\\" + "variable": "--amplify-components-select-wrapper-display", + "value": "block" }, { - \\"variable\\": \\"--amplify-components-radio-button-height\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-select-wrapper-flex", + "value": "1" }, { - \\"variable\\": \\"--amplify-components-radio-button-justify-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-select-wrapper-position", + "value": "relative" }, { - \\"variable\\": \\"--amplify-components-radio-button-large-height\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-selectfield-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-radio-button-large-width\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-selectfield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-radio-button-outline-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-selectfield-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-radio-button-outline-offset\\", - \\"value\\": \\"var(--amplify-outline-offsets-medium)\\" + "variable": "--amplify-components-selectfield-focus-border-color", + "value": "var(--amplify-components-fieldcontrol-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-radio-button-outline-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-selectfield-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-radio-button-outline-width\\", - \\"value\\": \\"var(--amplify-outline-widths-medium)\\" + "variable": "--amplify-components-selectfield-label-color", + "value": "var(--amplify-components-field-label-color)" }, { - \\"variable\\": \\"--amplify-components-radio-button-padding\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-sliderfield-large-thumb-height", + "value": "1.5rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-small-height\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-sliderfield-large-thumb-width", + "value": "1.5rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-small-width\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-sliderfield-large-track-height", + "value": "0.625rem" }, { - \\"variable\\": \\"--amplify-components-radio-button-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-sliderfield-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-radio-button-transition-property\\", - \\"value\\": \\"all\\" + "variable": "--amplify-components-sliderfield-range-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-radio-button-width\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-sliderfield-range-border-radius", + "value": "9999px" }, { - \\"variable\\": \\"--amplify-components-radio-disabled-cursor\\", - \\"value\\": \\"not-allowed\\" + "variable": "--amplify-components-sliderfield-range-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-radio-gap\\", - \\"value\\": \\"inherit\\" + "variable": "--amplify-components-sliderfield-small-thumb-height", + "value": "1rem" }, { - \\"variable\\": \\"--amplify-components-radio-justify-content\\", - \\"value\\": \\"flex-start\\" + "variable": "--amplify-components-sliderfield-small-thumb-width", + "value": "1rem" }, { - \\"variable\\": \\"--amplify-components-radio-label-color\\", - \\"value\\": \\"var(--amplify-components-text-color)\\" + "variable": "--amplify-components-sliderfield-small-track-height", + "value": "0.25rem" }, { - \\"variable\\": \\"--amplify-components-radio-label-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-sliderfield-thumb-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-radiogroup-label-color\\", - \\"value\\": \\"var(--amplify-components-field-label-color)\\" + "variable": "--amplify-components-sliderfield-thumb-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-radiogroup-radio-background-color\\", - \\"value\\": \\"var(--amplify-components-radio-button-background-color)\\" + "variable": "--amplify-components-sliderfield-thumb-border-radius", + "value": "50%" }, { - \\"variable\\": \\"--amplify-components-radiogroup-radio-border-color\\", - \\"value\\": \\"var(--amplify-components-radio-button-border-color)\\" + "variable": "--amplify-components-sliderfield-thumb-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-radiogroup-radio-border-width\\", - \\"value\\": \\"var(--amplify-components-radio-button-border-width)\\" + "variable": "--amplify-components-sliderfield-thumb-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-radiogroup-radio-checked-color\\", - \\"value\\": \\"var(--amplify-components-radio-button-checked-color)\\" + "variable": "--amplify-components-sliderfield-thumb-box-shadow", + "value": "var(--amplify-shadows-small)" }, { - \\"variable\\": \\"--amplify-components-radiogroup-radio-label-color\\", - \\"value\\": \\"var(--amplify-components-radio-label-color)\\" + "variable": "--amplify-components-sliderfield-thumb-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-rating-default-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xl)\\" + "variable": "--amplify-components-sliderfield-thumb-disabled-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-rating-empty-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-sliderfield-thumb-disabled-box-shadow", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-rating-filled-color\\", - \\"value\\": \\"var(--amplify-colors-brand-secondary-80)\\" + "variable": "--amplify-components-sliderfield-thumb-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-rating-large-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxxl)\\" + "variable": "--amplify-components-sliderfield-thumb-focus-box-shadow", + "value": "0 0 0 2px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-rating-small-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-sliderfield-thumb-height", + "value": "1.25rem" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-active-background-color\\", - \\"value\\": \\"var(--amplify-components-button-active-background-color)\\" + "variable": "--amplify-components-sliderfield-thumb-hover-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-active-border-color\\", - \\"value\\": \\"var(--amplify-components-button-active-border-color)\\" + "variable": "--amplify-components-sliderfield-thumb-hover-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-active-color\\", - \\"value\\": \\"var(--amplify-components-button-active-color)\\" + "variable": "--amplify-components-sliderfield-thumb-width", + "value": "1.25rem" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-sliderfield-track-background-color", + "value": "var(--amplify-colors-background-quaternary)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-color\\", - \\"value\\": \\"var(--amplify-components-button-color)\\" + "variable": "--amplify-components-sliderfield-track-border-radius", + "value": "9999px" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-disabled-background-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-background-color)\\" + "variable": "--amplify-components-sliderfield-track-height", + "value": "0.375rem" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-disabled-border-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-border-color)\\" + "variable": "--amplify-components-sliderfield-track-min-width", + "value": "10rem" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-disabled-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-color)\\" + "variable": "--amplify-components-stepperfield-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-focus-background-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-background-color)\\" + "variable": "--amplify-components-stepperfield-button-active-background-color", + "value": "var(--amplify-components-button-active-background-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-border-color)\\" + "variable": "--amplify-components-stepperfield-button-active-color", + "value": "var(--amplify-components-button-active-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-focus-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-color)\\" + "variable": "--amplify-components-stepperfield-button-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-background-color)\\" + "variable": "--amplify-components-stepperfield-button-color", + "value": "var(--amplify-components-button-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-hover-border-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-border-color)\\" + "variable": "--amplify-components-stepperfield-button-disabled-background-color", + "value": "var(--amplify-components-fieldcontrol-disabled-background-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-button-hover-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-color)\\" + "variable": "--amplify-components-stepperfield-button-disabled-color", + "value": "var(--amplify-components-button-disabled-color)" }, { - \\"variable\\": \\"--amplify-components-searchfield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-stepperfield-button-focus-background-color", + "value": "var(--amplify-components-button-focus-background-color)" }, { - \\"variable\\": \\"--amplify-components-select-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-stepperfield-button-focus-color", + "value": "var(--amplify-components-button-focus-color)" }, { - \\"variable\\": \\"--amplify-components-select-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-stepperfield-button-hover-background-color", + "value": "var(--amplify-components-button-hover-background-color)" }, { - \\"variable\\": \\"--amplify-components-select-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-stepperfield-button-hover-color", + "value": "var(--amplify-components-button-hover-color)" }, { - \\"variable\\": \\"--amplify-components-select-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-stepperfield-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-select-expanded-option-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-stepperfield-input-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-select-expanded-option-padding-inline\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-stepperfield-input-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-select-expanded-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-stepperfield-input-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-select-expanded-padding-inline\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-storagemanager-dropzone-active-background-color", + "value": "var(--amplify-colors-primary-10)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-storagemanager-dropzone-active-border-color", + "value": "var(--amplify-colors-border-pressed)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-large-right\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-storagemanager-dropzone-active-border-radius", + "value": "var(--amplify-components-storagemanager-dropzone-border-radius)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-pointer-events\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-storagemanager-dropzone-active-border-style", + "value": "var(--amplify-components-storagemanager-dropzone-border-style)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-position\\", - \\"value\\": \\"absolute\\" + "variable": "--amplify-components-storagemanager-dropzone-active-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-right\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-storagemanager-dropzone-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-small-right\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-storagemanager-dropzone-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-top\\", - \\"value\\": \\"50%\\" + "variable": "--amplify-components-storagemanager-dropzone-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-select-icon-wrapper-transform\\", - \\"value\\": \\"translateY(-50%)\\" + "variable": "--amplify-components-storagemanager-dropzone-border-style", + "value": "dashed" }, { - \\"variable\\": \\"--amplify-components-select-large-min-width\\", - \\"value\\": \\"7.5rem\\" + "variable": "--amplify-components-storagemanager-dropzone-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-select-large-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-storagemanager-dropzone-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-select-min-width\\", - \\"value\\": \\"6.5rem\\" + "variable": "--amplify-components-storagemanager-dropzone-icon-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-select-option-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-storagemanager-dropzone-icon-font-size", + "value": "var(--amplify-font-sizes-xxl)" }, { - \\"variable\\": \\"--amplify-components-select-option-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-storagemanager-dropzone-padding-block", + "value": "var(--amplify-space-xl)" }, { - \\"variable\\": \\"--amplify-components-select-option-disabled-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-storagemanager-dropzone-padding-inline", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-select-option-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-storagemanager-dropzone-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-select-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-storagemanager-dropzone-text-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-select-small-min-width\\", - \\"value\\": \\"5.5rem\\" + "variable": "--amplify-components-storagemanager-dropzone-text-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-select-small-padding-inline-end\\", - \\"value\\": \\"var(--amplify-space-xl)\\" + "variable": "--amplify-components-storagemanager-dropzone-text-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-select-white-space\\", - \\"value\\": \\"nowrap\\" + "variable": "--amplify-components-storagemanager-file-align-items", + "value": "baseline" }, { - \\"variable\\": \\"--amplify-components-select-wrapper-cursor\\", - \\"value\\": \\"pointer\\" + "variable": "--amplify-components-storagemanager-file-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-select-wrapper-display\\", - \\"value\\": \\"block\\" + "variable": "--amplify-components-storagemanager-file-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-select-wrapper-flex\\", - \\"value\\": \\"1\\" + "variable": "--amplify-components-storagemanager-file-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-select-wrapper-position\\", - \\"value\\": \\"relative\\" + "variable": "--amplify-components-storagemanager-file-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-selectfield-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-components-storagemanager-file-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-selectfield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-storagemanager-file-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-selectfield-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-storagemanager-file-image-background-color", + "value": "var(--amplify-colors-background-secondary)" }, { - \\"variable\\": \\"--amplify-components-selectfield-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-border-color)\\" + "variable": "--amplify-components-storagemanager-file-image-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-selectfield-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-components-storagemanager-file-image-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-selectfield-label-color\\", - \\"value\\": \\"var(--amplify-components-field-label-color)\\" + "variable": "--amplify-components-storagemanager-file-image-height", + "value": "var(--amplify-space-xxl)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-large-thumb-height\\", - \\"value\\": \\"1.5rem\\" + "variable": "--amplify-components-storagemanager-file-image-width", + "value": "var(--amplify-space-xxl)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-large-thumb-width\\", - \\"value\\": \\"1.5rem\\" + "variable": "--amplify-components-storagemanager-file-name-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-large-track-height\\", - \\"value\\": \\"0.625rem\\" + "variable": "--amplify-components-storagemanager-file-name-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-storagemanager-file-name-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-range-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-storagemanager-file-padding-block", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-range-border-radius\\", - \\"value\\": \\"9999px\\" + "variable": "--amplify-components-storagemanager-file-padding-inline", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-range-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-storagemanager-file-size-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-small-thumb-height\\", - \\"value\\": \\"1rem\\" + "variable": "--amplify-components-storagemanager-file-size-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-small-thumb-width\\", - \\"value\\": \\"1rem\\" + "variable": "--amplify-components-storagemanager-file-size-font-weight", + "value": "var(--amplify-font-weights-normal)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-small-track-height\\", - \\"value\\": \\"0.25rem\\" + "variable": "--amplify-components-storagemanager-filelist-flex-direction", + "value": "column" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-storagemanager-filelist-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-storagemanager-loader-stroke-empty", + "value": "var(--amplify-colors-border-secondary)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-border-radius\\", - \\"value\\": \\"50%\\" + "variable": "--amplify-components-storagemanager-loader-stroke-filled", + "value": "var(--amplify-components-loader-stroke-filled)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-storagemanager-loader-stroke-linecap", + "value": "round" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-storagemanager-loader-stroke-width", + "value": "var(--amplify-border-widths-large)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-box-shadow\\", - \\"value\\": \\"var(--amplify-shadows-small)\\" + "variable": "--amplify-components-storagemanager-previewer-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-components-storagemanager-previewer-body-gap", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-disabled-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-storagemanager-previewer-body-padding-block", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-disabled-box-shadow\\", - \\"value\\": \\"none\\" + "variable": "--amplify-components-storagemanager-previewer-body-padding-inline", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-storagemanager-previewer-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-focus-box-shadow\\", - \\"value\\": \\"0 0 0 2px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-storagemanager-previewer-border-radius", + "value": "var(--amplify-radii-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-height\\", - \\"value\\": \\"1.25rem\\" + "variable": "--amplify-components-storagemanager-previewer-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-storagemanager-previewer-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-storagemanager-previewer-footer-justify-content", + "value": "flex-end" }, { - \\"variable\\": \\"--amplify-components-sliderfield-thumb-width\\", - \\"value\\": \\"1.25rem\\" + "variable": "--amplify-components-storagemanager-previewer-max-height", + "value": "40rem" }, { - \\"variable\\": \\"--amplify-components-sliderfield-track-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-quaternary)\\" + "variable": "--amplify-components-storagemanager-previewer-max-width", + "value": "auto" }, { - \\"variable\\": \\"--amplify-components-sliderfield-track-border-radius\\", - \\"value\\": \\"9999px\\" + "variable": "--amplify-components-storagemanager-previewer-padding-block", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-track-height\\", - \\"value\\": \\"0.375rem\\" + "variable": "--amplify-components-storagemanager-previewer-padding-inline", + "value": "var(--amplify-space-zero)" }, { - \\"variable\\": \\"--amplify-components-sliderfield-track-min-width\\", - \\"value\\": \\"10rem\\" + "variable": "--amplify-components-storagemanager-previewer-text-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-components-storagemanager-previewer-text-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-active-background-color\\", - \\"value\\": \\"var(--amplify-components-button-active-background-color)\\" + "variable": "--amplify-components-storagemanager-previewer-text-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-active-color\\", - \\"value\\": \\"var(--amplify-components-button-active-color)\\" + "variable": "--amplify-components-switchfield-disabled-opacity", + "value": "var(--amplify-opacities-60)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-components-switchfield-focused-shadow", + "value": "0px 0px 0px 2px var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-color\\", - \\"value\\": \\"var(--amplify-components-button-color)\\" + "variable": "--amplify-components-switchfield-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-disabled-background-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-disabled-background-color)\\" + "variable": "--amplify-components-switchfield-label-padding", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-disabled-color\\", - \\"value\\": \\"var(--amplify-components-button-disabled-color)\\" + "variable": "--amplify-components-switchfield-large-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-focus-background-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-background-color)\\" + "variable": "--amplify-components-switchfield-small-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-focus-color\\", - \\"value\\": \\"var(--amplify-components-button-focus-color)\\" + "variable": "--amplify-components-switchfield-thumb-background-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-hover-background-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-background-color)\\" + "variable": "--amplify-components-switchfield-thumb-border-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-stepperfield-button-hover-color\\", - \\"value\\": \\"var(--amplify-components-button-hover-color)\\" + "variable": "--amplify-components-switchfield-thumb-border-radius", + "value": "var(--amplify-radii-xxxl)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-switchfield-thumb-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-stepperfield-input-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-components-switchfield-thumb-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-input-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-components-switchfield-thumb-checked-transform", + "value": "var(--amplify-transforms-slide-x-medium)" }, { - \\"variable\\": \\"--amplify-components-stepperfield-input-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-switchfield-thumb-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-10)\\" + "variable": "--amplify-components-switchfield-thumb-width", + "value": "var(--amplify-space-relative-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-pressed)\\" + "variable": "--amplify-components-switchfield-track-background-color", + "value": "var(--amplify-colors-background-quaternary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-active-border-radius\\", - \\"value\\": \\"var(--amplify-components-fileuploader-dropzone-border-radius)\\" + "variable": "--amplify-components-switchfield-track-border-radius", + "value": "var(--amplify-radii-xxxl)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-active-border-style\\", - \\"value\\": \\"var(--amplify-components-fileuploader-dropzone-border-style)\\" + "variable": "--amplify-components-switchfield-track-checked-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-active-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-switchfield-track-error-background-color", + "value": "var(--amplify-colors-background-error)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-switchfield-track-height", + "value": "var(--amplify-space-relative-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-switchfield-track-padding", + "value": "var(--amplify-outline-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-switchfield-track-transition-duration", + "value": "var(--amplify-time-short)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-border-style\\", - \\"value\\": \\"dashed\\" + "variable": "--amplify-components-switchfield-track-width", + "value": "var(--amplify-space-relative-xl)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-table-body-display", + "value": "table-row-group" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-table-body-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-icon-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-table-border-collapse", + "value": "collapse" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-icon-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-xxl)\\" + "variable": "--amplify-components-table-caption-caption-side", + "value": "bottom" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-padding-block\\", - \\"value\\": \\"var(--amplify-space-xl)\\" + "variable": "--amplify-components-table-caption-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-padding-inline\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-table-caption-display", + "value": "table-caption" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-table-caption-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-table-caption-large-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-text-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-table-caption-small-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-dropzone-text-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-table-caption-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-align-items\\", - \\"value\\": \\"baseline\\" + "variable": "--amplify-components-table-caption-word-break", + "value": "break-all" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-table-data-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-table-data-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-table-data-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-table-data-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-table-data-display", + "value": "table-cell" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-table-data-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-image-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-table-data-font-weight", + "value": "var(--amplify-font-weights-normal)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-image-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-table-data-large-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-image-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-table-data-large-padding", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-image-height\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-table-data-padding", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-image-width\\", - \\"value\\": \\"var(--amplify-space-xxl)\\" + "variable": "--amplify-components-table-data-small-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-name-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-table-data-small-padding", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-name-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-table-data-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-name-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-table-display", + "value": "table" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-padding-block\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-table-foot-display", + "value": "table-footer-group" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-padding-inline\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-table-foot-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-size-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-components-table-head-display", + "value": "table-header-group" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-size-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-table-head-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-file-size-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-normal)\\" + "variable": "--amplify-components-table-header-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-filelist-flex-direction\\", - \\"value\\": \\"column\\" + "variable": "--amplify-components-table-header-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-storagemanager-filelist-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-table-header-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-loader-stroke-empty\\", - \\"value\\": \\"var(--amplify-colors-border-secondary)\\" + "variable": "--amplify-components-table-header-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-loader-stroke-filled\\", - \\"value\\": \\"var(--amplify-components-loader-stroke-filled)\\" + "variable": "--amplify-components-table-header-display", + "value": "table-cell" }, { - \\"variable\\": \\"--amplify-components-storagemanager-loader-stroke-linecap\\", - \\"value\\": \\"round\\" + "variable": "--amplify-components-table-header-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-loader-stroke-width\\", - \\"value\\": \\"var(--amplify-border-widths-large)\\" + "variable": "--amplify-components-table-header-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-table-header-large-font-size", + "value": "var(--amplify-font-sizes-large)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-body-gap\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-table-header-large-padding", + "value": "var(--amplify-space-large)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-body-padding-block\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-table-header-padding", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-body-padding-inline\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-table-header-small-font-size", + "value": "var(--amplify-font-sizes-small)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-components-table-header-small-padding", + "value": "var(--amplify-space-xs)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-border-radius\\", - \\"value\\": \\"var(--amplify-radii-small)\\" + "variable": "--amplify-components-table-header-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-table-row-display", + "value": "table-row" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-table-row-hover-background-color", + "value": "var(--amplify-colors-background-tertiary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-footer-justify-content\\", - \\"value\\": \\"flex-end\\" + "variable": "--amplify-components-table-row-striped-background-color", + "value": "var(--amplify-colors-background-secondary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-max-height\\", - \\"value\\": \\"40rem\\" + "variable": "--amplify-components-table-row-vertical-align", + "value": "middle" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-max-width\\", - \\"value\\": \\"auto\\" + "variable": "--amplify-components-table-width", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-padding-block\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-tabs-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-padding-inline\\", - \\"value\\": \\"var(--amplify-space-zero)\\" + "variable": "--amplify-components-tabs-border-color", + "value": "var(--amplify-colors-border-secondary)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-tabs-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-text-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-tabs-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-storagemanager-previewer-text-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-tabs-gap", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-switchfield-disabled-opacity\\", - \\"value\\": \\"var(--amplify-opacities-60)\\" + "variable": "--amplify-components-tabs-item-active-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-switchfield-focused-shadow\\", - \\"value\\": \\"0px 0px 0px 2px var(--amplify-colors-border-focus)\\" + "variable": "--amplify-components-tabs-item-active-border-color", + "value": "var(--amplify-colors-font-interactive)" }, { - \\"variable\\": \\"--amplify-components-switchfield-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-tabs-item-active-box-shadow", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-switchfield-label-padding\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-tabs-item-active-color", + "value": "var(--amplify-colors-font-interactive)" }, { - \\"variable\\": \\"--amplify-components-switchfield-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-tabs-item-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-switchfield-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-tabs-item-border-color", + "value": "var(--amplify-colors-border-secondary)" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-components-tabs-item-border-style", + "value": "solid" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-border-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-tabs-item-border-width", + "value": "var(--amplify-border-widths-medium)" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xxxl)\\" + "variable": "--amplify-components-tabs-item-color", + "value": "var(--amplify-colors-font-secondary)" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-tabs-item-disabled-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-tabs-item-disabled-border-color", + "value": "var(--amplify-colors-border-tertiary)" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-checked-transform\\", - \\"value\\": \\"var(--amplify-transforms-slide-x-medium)\\" + "variable": "--amplify-components-tabs-item-disabled-box-shadow", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-tabs-item-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-switchfield-thumb-width\\", - \\"value\\": \\"var(--amplify-space-relative-medium)\\" + "variable": "--amplify-components-tabs-item-focus-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-quaternary)\\" + "variable": "--amplify-components-tabs-item-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-border-radius\\", - \\"value\\": \\"var(--amplify-radii-xxxl)\\" + "variable": "--amplify-components-tabs-item-focus-box-shadow", + "value": "0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-checked-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-components-tabs-item-focus-color", + "value": "var(--amplify-colors-font-focus)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-error-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-error)\\" + "variable": "--amplify-components-tabs-item-font-size", + "value": "var(--amplify-font-sizes-medium)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-height\\", - \\"value\\": \\"var(--amplify-space-relative-medium)\\" + "variable": "--amplify-components-tabs-item-font-weight", + "value": "var(--amplify-font-weights-bold)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-padding\\", - \\"value\\": \\"var(--amplify-outline-widths-medium)\\" + "variable": "--amplify-components-tabs-item-hover-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-transition-duration\\", - \\"value\\": \\"var(--amplify-time-short)\\" + "variable": "--amplify-components-tabs-item-hover-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-switchfield-track-width\\", - \\"value\\": \\"var(--amplify-space-relative-xl)\\" + "variable": "--amplify-components-tabs-item-hover-box-shadow", + "value": "none" }, { - \\"variable\\": \\"--amplify-components-table-body-display\\", - \\"value\\": \\"table-row-group\\" + "variable": "--amplify-components-tabs-item-hover-color", + "value": "var(--amplify-colors-font-hover)" }, { - \\"variable\\": \\"--amplify-components-table-body-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-tabs-item-padding-horizontal", + "value": "var(--amplify-space-medium)" }, { - \\"variable\\": \\"--amplify-components-table-border-collapse\\", - \\"value\\": \\"collapse\\" + "variable": "--amplify-components-tabs-item-padding-vertical", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-table-caption-caption-side\\", - \\"value\\": \\"bottom\\" + "variable": "--amplify-components-tabs-item-text-align", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-table-caption-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-tabs-item-transition-duration", + "value": "var(--amplify-time-medium)" }, { - \\"variable\\": \\"--amplify-components-table-caption-display\\", - \\"value\\": \\"table-caption\\" + "variable": "--amplify-components-tabs-panel-background-color", + "value": "transparent" }, { - \\"variable\\": \\"--amplify-components-table-caption-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-tabs-panel-padding-block", + "value": "var(--amplify-space-small)" }, { - \\"variable\\": \\"--amplify-components-table-caption-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-tabs-panel-padding-inline", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-table-caption-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-text-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-table-caption-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-text-error-color", + "value": "var(--amplify-colors-font-error)" }, { - \\"variable\\": \\"--amplify-components-table-caption-word-break\\", - \\"value\\": \\"break-all\\" + "variable": "--amplify-components-text-info-color", + "value": "var(--amplify-colors-font-info)" }, { - \\"variable\\": \\"--amplify-components-table-data-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-text-primary-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-table-data-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-text-secondary-color", + "value": "var(--amplify-colors-font-secondary)" }, { - \\"variable\\": \\"--amplify-components-table-data-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-text-success-color", + "value": "var(--amplify-colors-font-success)" }, { - \\"variable\\": \\"--amplify-components-table-data-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-text-tertiary-color", + "value": "var(--amplify-colors-font-tertiary)" }, { - \\"variable\\": \\"--amplify-components-table-data-display\\", - \\"value\\": \\"table-cell\\" + "variable": "--amplify-components-text-warning-color", + "value": "var(--amplify-colors-font-warning)" }, { - \\"variable\\": \\"--amplify-components-table-data-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-textareafield-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-normal)\\" + "variable": "--amplify-components-textareafield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-textareafield-focus-border-color", + "value": "var(--amplify-components-fieldcontrol-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-large-padding\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-textfield-border-color", + "value": "var(--amplify-components-fieldcontrol-border-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-padding\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-textfield-color", + "value": "var(--amplify-components-fieldcontrol-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-textfield-focus-border-color", + "value": "var(--amplify-components-fieldcontrol-focus-border-color)" }, { - \\"variable\\": \\"--amplify-components-table-data-small-padding\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-textfield-font-size", + "value": "var(--amplify-components-fieldcontrol-font-size)" }, { - \\"variable\\": \\"--amplify-components-table-data-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-togglebutton-active-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-display\\", - \\"value\\": \\"table\\" + "variable": "--amplify-components-togglebutton-border-color", + "value": "var(--amplify-colors-border-primary)" }, { - \\"variable\\": \\"--amplify-components-table-foot-display\\", - \\"value\\": \\"table-footer-group\\" + "variable": "--amplify-components-togglebutton-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-table-foot-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-togglebutton-disabled-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-head-display\\", - \\"value\\": \\"table-header-group\\" + "variable": "--amplify-components-togglebutton-disabled-border-color", + "value": "var(--amplify-colors-border-disabled)" }, { - \\"variable\\": \\"--amplify-components-table-head-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-togglebutton-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-table-header-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-togglebutton-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-table-header-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-togglebutton-focus-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-table-header-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-components-togglebutton-hover-background-color", + "value": "var(--amplify-colors-overlay-10)" }, { - \\"variable\\": \\"--amplify-components-table-header-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-togglebutton-link-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-header-display\\", - \\"value\\": \\"table-cell\\" + "variable": "--amplify-components-togglebutton-link-color", + "value": "var(--amplify-colors-overlay-50)" }, { - \\"variable\\": \\"--amplify-components-table-header-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-togglebutton-link-disabled-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-header-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-togglebutton-link-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-table-header-large-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-large)\\" + "variable": "--amplify-components-togglebutton-link-focus-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-header-large-padding\\", - \\"value\\": \\"var(--amplify-space-large)\\" + "variable": "--amplify-components-togglebutton-link-focus-color", + "value": "var(--amplify-colors-overlay-50)" }, { - \\"variable\\": \\"--amplify-components-table-header-padding\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-togglebutton-link-hover-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-header-small-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-small)\\" + "variable": "--amplify-components-togglebutton-link-hover-color", + "value": "var(--amplify-colors-overlay-50)" }, { - \\"variable\\": \\"--amplify-components-table-header-small-padding\\", - \\"value\\": \\"var(--amplify-space-xs)\\" + "variable": "--amplify-components-togglebutton-link-pressed-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-header-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-togglebutton-link-pressed-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-table-row-display\\", - \\"value\\": \\"table-row\\" + "variable": "--amplify-components-togglebutton-link-pressed-focus-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-row-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-tertiary)\\" + "variable": "--amplify-components-togglebutton-link-pressed-focus-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-table-row-striped-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-secondary)\\" + "variable": "--amplify-components-togglebutton-link-pressed-hover-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-table-row-vertical-align\\", - \\"value\\": \\"middle\\" + "variable": "--amplify-components-togglebutton-link-pressed-hover-color", + "value": "var(--amplify-colors-overlay-90)" }, { - \\"variable\\": \\"--amplify-components-table-width\\", - \\"value\\": \\"100%\\" + "variable": "--amplify-components-togglebutton-pressed-background-color", + "value": "var(--amplify-colors-overlay-20)" }, { - \\"variable\\": \\"--amplify-components-tabs-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-togglebutton-pressed-border-color", + "value": "var(--amplify-colors-border-pressed)" }, { - \\"variable\\": \\"--amplify-components-tabs-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-secondary)\\" + "variable": "--amplify-components-togglebutton-pressed-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-tabs-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-togglebutton-pressed-hover-background-color", + "value": "var(--amplify-colors-overlay-30)" }, { - \\"variable\\": \\"--amplify-components-tabs-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-togglebutton-primary-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-tabs-gap\\", - \\"value\\": \\"0\\" + "variable": "--amplify-components-togglebutton-primary-border-width", + "value": "var(--amplify-border-widths-small)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-active-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-togglebutton-primary-disabled-background-color", + "value": "var(--amplify-colors-background-disabled)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-active-border-color\\", - \\"value\\": \\"var(--amplify-colors-font-interactive)\\" + "variable": "--amplify-components-togglebutton-primary-disabled-border-color", + "value": "var(--amplify-colors-border-disabled)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-active-color\\", - \\"value\\": \\"var(--amplify-colors-font-interactive)\\" + "variable": "--amplify-components-togglebutton-primary-disabled-color", + "value": "var(--amplify-colors-font-disabled)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-togglebutton-primary-focus-background-color", + "value": "var(--amplify-colors-transparent)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-secondary)\\" + "variable": "--amplify-components-togglebutton-primary-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-border-style\\", - \\"value\\": \\"solid\\" + "variable": "--amplify-components-togglebutton-primary-focus-box-shadow", + "value": "var(--amplify-components-fieldcontrol-focus-box-shadow)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-medium)\\" + "variable": "--amplify-components-togglebutton-primary-focus-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-color\\", - \\"value\\": \\"var(--amplify-colors-font-secondary)\\" + "variable": "--amplify-components-togglebutton-primary-hover-background-color", + "value": "var(--amplify-colors-overlay-10)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-disabled-background-color\\", - \\"value\\": \\"transparent\\" + "variable": "--amplify-components-togglebutton-primary-hover-color", + "value": "var(--amplify-colors-font-primary)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-tertiary)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-background-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-border-color", + "value": "var(--amplify-colors-primary-80)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-focus)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-font-size\\", - \\"value\\": \\"var(--amplify-font-sizes-medium)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-focus-background-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-font-weight\\", - \\"value\\": \\"var(--amplify-font-weights-bold)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-focus-border-color", + "value": "var(--amplify-colors-border-focus)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-hover)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-focus-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-padding-horizontal\\", - \\"value\\": \\"var(--amplify-space-medium)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-hover-background-color", + "value": "var(--amplify-colors-primary-60)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-padding-vertical\\", - \\"value\\": \\"var(--amplify-space-small)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-hover-border-color", + "value": "var(--amplify-colors-primary-60)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-text-align\\", - \\"value\\": \\"center\\" + "variable": "--amplify-components-togglebutton-primary-pressed-hover-box-shadow", + "value": "var(--amplify-colors-primary-60)" }, { - \\"variable\\": \\"--amplify-components-tabs-item-transition-duration\\", - \\"value\\": \\"var(--amplify-time-medium)\\" + "variable": "--amplify-components-togglebutton-primary-pressed-hover-color", + "value": "var(--amplify-colors-background-primary)" }, { - \\"variable\\": \\"--amplify-components-text-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-components-togglebuttongroup-align-content", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-text-error-color\\", - \\"value\\": \\"var(--amplify-colors-font-error)\\" + "variable": "--amplify-components-togglebuttongroup-align-items", + "value": "center" }, { - \\"variable\\": \\"--amplify-components-text-info-color\\", - \\"value\\": \\"var(--amplify-colors-font-info)\\" + "variable": "--amplify-components-togglebuttongroup-justify-content", + "value": "flex-start" }, { - \\"variable\\": \\"--amplify-components-text-primary-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-font-sizes-large", + "value": "1.25rem" }, { - \\"variable\\": \\"--amplify-components-text-secondary-color\\", - \\"value\\": \\"var(--amplify-colors-font-secondary)\\" + "variable": "--amplify-font-sizes-medium", + "value": "1rem" }, { - \\"variable\\": \\"--amplify-components-text-success-color\\", - \\"value\\": \\"var(--amplify-colors-font-success)\\" + "variable": "--amplify-font-sizes-small", + "value": "0.875rem" }, { - \\"variable\\": \\"--amplify-components-text-tertiary-color\\", - \\"value\\": \\"var(--amplify-colors-font-tertiary)\\" + "variable": "--amplify-font-sizes-xl", + "value": "1.5rem" }, { - \\"variable\\": \\"--amplify-components-text-warning-color\\", - \\"value\\": \\"var(--amplify-colors-font-warning)\\" + "variable": "--amplify-font-sizes-xs", + "value": "0.75rem" }, { - \\"variable\\": \\"--amplify-components-textareafield-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-font-sizes-xxl", + "value": "2rem" }, { - \\"variable\\": \\"--amplify-components-textareafield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-font-sizes-xxs", + "value": "0.5rem" }, { - \\"variable\\": \\"--amplify-components-textareafield-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-border-color)\\" + "variable": "--amplify-font-sizes-xxxl", + "value": "2.5rem" }, { - \\"variable\\": \\"--amplify-components-textfield-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-border-color)\\" + "variable": "--amplify-font-sizes-xxxs", + "value": "0.375rem" }, { - \\"variable\\": \\"--amplify-components-textfield-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\" + "variable": "--amplify-font-sizes-xxxxl", + "value": "3rem" }, { - \\"variable\\": \\"--amplify-components-textfield-focus-border-color\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-border-color)\\" + "variable": "--amplify-font-weights-black", + "value": "900" }, { - \\"variable\\": \\"--amplify-components-textfield-font-size\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-font-size)\\" + "variable": "--amplify-font-weights-bold", + "value": "700" }, { - \\"variable\\": \\"--amplify-components-togglebutton-active-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-font-weights-extrabold", + "value": "800" }, { - \\"variable\\": \\"--amplify-components-togglebutton-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-primary)\\" + "variable": "--amplify-font-weights-hairline", + "value": "100" }, { - \\"variable\\": \\"--amplify-components-togglebutton-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-font-weights-light", + "value": "300" }, { - \\"variable\\": \\"--amplify-components-togglebutton-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-font-weights-medium", + "value": "500" }, { - \\"variable\\": \\"--amplify-components-togglebutton-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-disabled)\\" + "variable": "--amplify-font-weights-normal", + "value": "400" }, { - \\"variable\\": \\"--amplify-components-togglebutton-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-font-weights-semibold", + "value": "600" }, { - \\"variable\\": \\"--amplify-components-togglebutton-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-font-weights-thin", + "value": "200" }, { - \\"variable\\": \\"--amplify-components-togglebutton-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-fonts-default-static", + "value": "'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\\n 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif" }, { - \\"variable\\": \\"--amplify-components-togglebutton-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-fonts-default-variable", + "value": "'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,\\n 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\\n sans-serif" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-line-heights-large", + "value": "2" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-50)\\" + "variable": "--amplify-line-heights-medium", + "value": "1.5" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-line-heights-small", + "value": "1.25" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-opacities-0", + "value": "0" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-opacities-10", + "value": "0.1" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-focus-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-50)\\" + "variable": "--amplify-opacities-100", + "value": "1" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-opacities-20", + "value": "0.2" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-hover-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-50)\\" + "variable": "--amplify-opacities-30", + "value": "0.3" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-opacities-40", + "value": "0.4" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-opacities-50", + "value": "0.5" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-opacities-60", + "value": "0.6" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-focus-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-opacities-70", + "value": "0.7" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-opacities-80", + "value": "0.8" }, { - \\"variable\\": \\"--amplify-components-togglebutton-link-pressed-hover-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-90)\\" + "variable": "--amplify-opacities-90", + "value": "0.9" }, { - \\"variable\\": \\"--amplify-components-togglebutton-pressed-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-20)\\" + "variable": "--amplify-outline-offsets-large", + "value": "3px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-pressed-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-pressed)\\" + "variable": "--amplify-outline-offsets-medium", + "value": "2px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-pressed-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-outline-offsets-small", + "value": "1px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-pressed-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-30)\\" + "variable": "--amplify-outline-widths-large", + "value": "3px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-outline-widths-medium", + "value": "2px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-border-width\\", - \\"value\\": \\"var(--amplify-border-widths-small)\\" + "variable": "--amplify-outline-widths-small", + "value": "1px" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-disabled-background-color\\", - \\"value\\": \\"var(--amplify-colors-background-disabled)\\" + "variable": "--amplify-radii-large", + "value": "1rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-disabled-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-disabled)\\" + "variable": "--amplify-radii-medium", + "value": "0.5rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-disabled-color\\", - \\"value\\": \\"var(--amplify-colors-font-disabled)\\" + "variable": "--amplify-radii-small", + "value": "0.25rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-transparent)\\" + "variable": "--amplify-radii-xl", + "value": "2rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-radii-xs", + "value": "0.125rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-focus-box-shadow\\", - \\"value\\": \\"var(--amplify-components-fieldcontrol-focus-box-shadow)\\" + "variable": "--amplify-radii-xxl", + "value": "4rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-focus-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-radii-xxxl", + "value": "8rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-overlay-10)\\" + "variable": "--amplify-shadows-large", + "value": "0px 4px 12px var(--amplify-colors-shadow-primary)" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-hover-color\\", - \\"value\\": \\"var(--amplify-colors-font-primary)\\" + "variable": "--amplify-shadows-medium", + "value": "0px 2px 6px var(--amplify-colors-shadow-secondary)" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-shadows-small", + "value": "0px 2px 4px var(--amplify-colors-shadow-tertiary)" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-border-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-80)\\" + "variable": "--amplify-space-large", + "value": "1.5rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-space-medium", + "value": "1rem" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-focus-background-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-space-relative-full", + "value": "100%" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-focus-border-color\\", - \\"value\\": \\"var(--amplify-colors-border-focus)\\" + "variable": "--amplify-space-relative-large", + "value": "1.5em" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-focus-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-space-relative-medium", + "value": "1em" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-hover-background-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-60)\\" + "variable": "--amplify-space-relative-small", + "value": "0.75em" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-hover-border-color\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-60)\\" + "variable": "--amplify-space-relative-xl", + "value": "2.0em" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-hover-box-shadow\\", - \\"value\\": \\"var(--amplify-colors-brand-primary-60)\\" + "variable": "--amplify-space-relative-xs", + "value": "0.5em" }, { - \\"variable\\": \\"--amplify-components-togglebutton-primary-pressed-hover-color\\", - \\"value\\": \\"var(--amplify-colors-background-primary)\\" + "variable": "--amplify-space-relative-xxl", + "value": "3.0em" }, { - \\"variable\\": \\"--amplify-components-togglebuttongroup-align-content\\", - \\"value\\": \\"center\\" + "variable": "--amplify-space-relative-xxs", + "value": "0.375em" }, { - \\"variable\\": \\"--amplify-components-togglebuttongroup-align-items\\", - \\"value\\": \\"center\\" + "variable": "--amplify-space-relative-xxxl", + "value": "4.5em" }, { - \\"variable\\": \\"--amplify-components-togglebuttongroup-justify-content\\", - \\"value\\": \\"flex-start\\" + "variable": "--amplify-space-relative-xxxs", + "value": "0.25em" }, { - \\"variable\\": \\"--amplify-font-sizes-large\\", - \\"value\\": \\"1.25rem\\" + "variable": "--amplify-space-small", + "value": "0.75rem" }, { - \\"variable\\": \\"--amplify-font-sizes-medium\\", - \\"value\\": \\"1rem\\" + "variable": "--amplify-space-xl", + "value": "2.0rem" }, { - \\"variable\\": \\"--amplify-font-sizes-small\\", - \\"value\\": \\"0.875rem\\" + "variable": "--amplify-space-xs", + "value": "0.5rem" }, { - \\"variable\\": \\"--amplify-font-sizes-xl\\", - \\"value\\": \\"1.5rem\\" + "variable": "--amplify-space-xxl", + "value": "3.0rem" }, { - \\"variable\\": \\"--amplify-font-sizes-xs\\", - \\"value\\": \\"0.75rem\\" + "variable": "--amplify-space-xxs", + "value": "0.375rem" }, { - \\"variable\\": \\"--amplify-font-sizes-xxl\\", - \\"value\\": \\"2rem\\" + "variable": "--amplify-space-xxxl", + "value": "4.5rem" }, { - \\"variable\\": \\"--amplify-font-sizes-xxs\\", - \\"value\\": \\"0.5rem\\" + "variable": "--amplify-space-xxxs", + "value": "0.25rem" }, { - \\"variable\\": \\"--amplify-font-sizes-xxxl\\", - \\"value\\": \\"2.5rem\\" + "variable": "--amplify-space-zero", + "value": "0" }, { - \\"variable\\": \\"--amplify-font-sizes-xxxs\\", - \\"value\\": \\"0.375rem\\" + "variable": "--amplify-time-long", + "value": "500ms" }, { - \\"variable\\": \\"--amplify-font-sizes-xxxxl\\", - \\"value\\": \\"3rem\\" + "variable": "--amplify-time-medium", + "value": "250ms" }, { - \\"variable\\": \\"--amplify-font-weights-black\\", - \\"value\\": \\"900\\" + "variable": "--amplify-time-short", + "value": "100ms" }, { - \\"variable\\": \\"--amplify-font-weights-bold\\", - \\"value\\": \\"700\\" + "variable": "--amplify-transforms-slide-x-large", + "value": "translateX(2em)" }, { - \\"variable\\": \\"--amplify-font-weights-extrabold\\", - \\"value\\": \\"800\\" + "variable": "--amplify-transforms-slide-x-medium", + "value": "translateX(1em)" }, { - \\"variable\\": \\"--amplify-font-weights-hairline\\", - \\"value\\": \\"100\\" - }, - { - \\"variable\\": \\"--amplify-font-weights-light\\", - \\"value\\": \\"300\\" - }, - { - \\"variable\\": \\"--amplify-font-weights-medium\\", - \\"value\\": \\"500\\" - }, - { - \\"variable\\": \\"--amplify-font-weights-normal\\", - \\"value\\": \\"400\\" - }, - { - \\"variable\\": \\"--amplify-font-weights-semibold\\", - \\"value\\": \\"600\\" - }, - { - \\"variable\\": \\"--amplify-font-weights-thin\\", - \\"value\\": \\"200\\" - }, - { - \\"variable\\": \\"--amplify-fonts-default-static\\", - \\"value\\": \\"'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\\\\n 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\\" - }, - { - \\"variable\\": \\"--amplify-fonts-default-variable\\", - \\"value\\": \\"'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,\\\\n 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\\\\n sans-serif\\" - }, - { - \\"variable\\": \\"--amplify-line-heights-large\\", - \\"value\\": \\"2\\" - }, - { - \\"variable\\": \\"--amplify-line-heights-medium\\", - \\"value\\": \\"1.5\\" - }, - { - \\"variable\\": \\"--amplify-line-heights-small\\", - \\"value\\": \\"1.25\\" - }, - { - \\"variable\\": \\"--amplify-opacities-0\\", - \\"value\\": \\"0\\" - }, - { - \\"variable\\": \\"--amplify-opacities-10\\", - \\"value\\": \\"0.1\\" - }, - { - \\"variable\\": \\"--amplify-opacities-100\\", - \\"value\\": \\"1\\" - }, - { - \\"variable\\": \\"--amplify-opacities-20\\", - \\"value\\": \\"0.2\\" - }, - { - \\"variable\\": \\"--amplify-opacities-30\\", - \\"value\\": \\"0.3\\" - }, - { - \\"variable\\": \\"--amplify-opacities-40\\", - \\"value\\": \\"0.4\\" - }, - { - \\"variable\\": \\"--amplify-opacities-50\\", - \\"value\\": \\"0.5\\" - }, - { - \\"variable\\": \\"--amplify-opacities-60\\", - \\"value\\": \\"0.6\\" - }, - { - \\"variable\\": \\"--amplify-opacities-70\\", - \\"value\\": \\"0.7\\" - }, - { - \\"variable\\": \\"--amplify-opacities-80\\", - \\"value\\": \\"0.8\\" - }, - { - \\"variable\\": \\"--amplify-opacities-90\\", - \\"value\\": \\"0.9\\" - }, - { - \\"variable\\": \\"--amplify-outline-offsets-large\\", - \\"value\\": \\"3px\\" - }, - { - \\"variable\\": \\"--amplify-outline-offsets-medium\\", - \\"value\\": \\"2px\\" - }, - { - \\"variable\\": \\"--amplify-outline-offsets-small\\", - \\"value\\": \\"1px\\" - }, - { - \\"variable\\": \\"--amplify-outline-widths-large\\", - \\"value\\": \\"3px\\" - }, - { - \\"variable\\": \\"--amplify-outline-widths-medium\\", - \\"value\\": \\"2px\\" - }, - { - \\"variable\\": \\"--amplify-outline-widths-small\\", - \\"value\\": \\"1px\\" - }, - { - \\"variable\\": \\"--amplify-radii-large\\", - \\"value\\": \\"1rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-medium\\", - \\"value\\": \\"0.5rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-small\\", - \\"value\\": \\"0.25rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-xl\\", - \\"value\\": \\"2rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-xs\\", - \\"value\\": \\"0.125rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-xxl\\", - \\"value\\": \\"4rem\\" - }, - { - \\"variable\\": \\"--amplify-radii-xxxl\\", - \\"value\\": \\"8rem\\" - }, - { - \\"variable\\": \\"--amplify-shadows-large\\", - \\"value\\": \\"0px 4px 12px var(--amplify-colors-shadow-primary)\\" - }, - { - \\"variable\\": \\"--amplify-shadows-medium\\", - \\"value\\": \\"0px 2px 6px var(--amplify-colors-shadow-secondary)\\" - }, - { - \\"variable\\": \\"--amplify-shadows-small\\", - \\"value\\": \\"0px 2px 4px var(--amplify-colors-shadow-tertiary)\\" - }, - { - \\"variable\\": \\"--amplify-space-large\\", - \\"value\\": \\"1.5rem\\" - }, - { - \\"variable\\": \\"--amplify-space-medium\\", - \\"value\\": \\"1rem\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-full\\", - \\"value\\": \\"100%\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-large\\", - \\"value\\": \\"1.5em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-medium\\", - \\"value\\": \\"1em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-small\\", - \\"value\\": \\"0.75em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xl\\", - \\"value\\": \\"2.0em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xs\\", - \\"value\\": \\"0.5em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xxl\\", - \\"value\\": \\"3.0em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xxs\\", - \\"value\\": \\"0.375em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xxxl\\", - \\"value\\": \\"4.5em\\" - }, - { - \\"variable\\": \\"--amplify-space-relative-xxxs\\", - \\"value\\": \\"0.25em\\" - }, - { - \\"variable\\": \\"--amplify-space-small\\", - \\"value\\": \\"0.75rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xl\\", - \\"value\\": \\"2.0rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xs\\", - \\"value\\": \\"0.5rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xxl\\", - \\"value\\": \\"3.0rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xxs\\", - \\"value\\": \\"0.375rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xxxl\\", - \\"value\\": \\"4.5rem\\" - }, - { - \\"variable\\": \\"--amplify-space-xxxs\\", - \\"value\\": \\"0.25rem\\" - }, - { - \\"variable\\": \\"--amplify-space-zero\\", - \\"value\\": \\"0\\" - }, - { - \\"variable\\": \\"--amplify-time-long\\", - \\"value\\": \\"500ms\\" - }, - { - \\"variable\\": \\"--amplify-time-medium\\", - \\"value\\": \\"250ms\\" - }, - { - \\"variable\\": \\"--amplify-time-short\\", - \\"value\\": \\"100ms\\" - }, - { - \\"variable\\": \\"--amplify-transforms-slide-x-large\\", - \\"value\\": \\"translateX(2em)\\" - }, - { - \\"variable\\": \\"--amplify-transforms-slide-x-medium\\", - \\"value\\": \\"translateX(1em)\\" - }, - { - \\"variable\\": \\"--amplify-transforms-slide-x-small\\", - \\"value\\": \\"translateX(0.5em)\\" + "variable": "--amplify-transforms-slide-x-small", + "value": "translateX(0.5em)" } ]" `; diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap index 3ea65f135d0..db6cda1d368 100644 --- a/docs/__tests__/__snapshots__/props-table.test.ts.snap +++ b/docs/__tests__/__snapshots__/props-table.test.ts.snap @@ -2,14872 +2,15203 @@ exports[`Props Table 1`] = ` "{ - \\"Alert\\": { - \\"Alert\\": [ + "Accordion": { + "Accordion": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"'info' | 'error' | 'warning' | 'success'\\", - \\"description\\": \\"The variation property will affect the background color of the Alert.\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"isDismissible\\": { - \\"name\\": \\"isDismissible\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"The isDismissible property will affect whether the user can dismiss (close) the Alert. Defaults to false (not dismissible).\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"dismissButtonLabel\\": { - \\"name\\": \\"dismissButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Configures the accessible label for the Alert's dismiss button.\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"onDismiss\\": { - \\"name\\": \\"onDismiss\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"The onDismiss callback will be called when the user dismisses (closes) the Alert.\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"hasIcon\\": { - \\"name\\": \\"hasIcon\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"The hasIcon property will determine whether or not an icon is displayed on the Alert. Defaults to true (icon displayed).\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"heading\\": { - \\"name\\": \\"heading\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"The heading property will affect the content of the Alert heading.\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"buttonRef\\": { - \\"name\\": \\"buttonRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"The ref will be forwarded to the dismiss button\\", - \\"category\\": \\"BaseAlertProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ] - }, - \\"Autocomplete\\": { - \\"Autocomplete\\": [ + ], + "Accordion.Item": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"options\\": { - \\"name\\": \\"options\\", - \\"type\\": \\"ComboBoxOption[]\\", - \\"description\\": \\"A list of options\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": false - }, - \\"menuSlots\\": { - \\"name\\": \\"menuSlots\\", - \\"type\\": \\"PrimitiveProps\\", - \\"description\\": \\"A colleciton of slots to customize the dropdown of options\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": true - }, - \\"isLoading\\": { - \\"name\\": \\"isLoading\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used to indicate if the autocomplete in loading state Default: false\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": true - }, - \\"optionFilter\\": { - \\"name\\": \\"optionFilter\\", - \\"type\\": \\"((option: ComboBoxOption, value: string) => boolean) | undefined\\", - \\"description\\": \\"Custom filter that will be applied to options.\\\\n\\\\nNote: Applying custom filter to options will disable match highlighting.\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": true - }, - \\"renderOption\\": { - \\"name\\": \\"renderOption\\", - \\"type\\": \\"((option: ComboBoxOption, value: string) => React.ReactNode) | undefined\\", - \\"description\\": \\"Used to customize the rendering of an option inside the li element\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": true - }, - \\"onSelect\\": { - \\"name\\": \\"onSelect\\", - \\"type\\": \\"((option: ComboBoxOption) => void) | undefined\\", - \\"description\\": \\"Triggered when an option is selected\\", - \\"category\\": \\"BaseAutocompleteProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the initial value for an uncontrolled search field\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the value for a controlled search field\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"hasSearchButton\\": { - \\"name\\": \\"hasSearchButton\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used to determine whether to render a search button on the right Default: true\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"hasSearchIcon\\": { - \\"name\\": \\"hasSearchIcon\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used to determine whether to render a search icon on the left when there is no search button Default: false\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"onSubmit\\": { - \\"name\\": \\"onSubmit\\", - \\"type\\": \\"((value: string) => void) | undefined\\", - \\"description\\": \\"Handle submission of search field input\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"onClear\\": { - \\"name\\": \\"onClear\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Triggered when search field is cleared\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label Default: true\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"clearButtonLabel\\": { - \\"name\\": \\"clearButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the \`aria-label\` for clear button Default: \\\\\\"Clear search\\\\\\"\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"searchButtonRef\\": { - \\"name\\": \\"searchButtonRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"Provides ref access to search button DOM element\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Badge\\": { - \\"Badge\\": [ + "Alert": { + "Alert": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"'info' | 'error' | 'warning' | 'success'\\", - \\"description\\": \\"The variation property will affect the background color of the badge.\\", - \\"category\\": \\"BaseBadgeProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"The size property will affect the font size of the badge.\\", - \\"category\\": \\"BaseBadgeProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "'info' | 'error' | 'warning' | 'success'", + "description": "The variation property will affect the background color of the Alert.", + "category": "BaseAlertProps", + "isOptional": true + }, + "isDismissible": { + "name": "isDismissible", + "type": "boolean | undefined", + "description": "The isDismissible property will affect whether the user can dismiss (close) the Alert. Defaults to false (not dismissible).", + "category": "BaseAlertProps", + "isOptional": true + }, + "dismissButtonLabel": { + "name": "dismissButtonLabel", + "type": "string | undefined", + "description": "Configures the accessible label for the Alert's dismiss button.", + "category": "BaseAlertProps", + "isOptional": true + }, + "onDismiss": { + "name": "onDismiss", + "type": "(() => void) | undefined", + "description": "The onDismiss callback will be called when the user dismisses (closes) the Alert.", + "category": "BaseAlertProps", + "isOptional": true + }, + "hasIcon": { + "name": "hasIcon", + "type": "boolean | undefined", + "description": "The hasIcon property will determine whether or not an icon is displayed on the Alert. Defaults to true (icon displayed).", + "category": "BaseAlertProps", + "isOptional": true + }, + "heading": { + "name": "heading", + "type": "React.ReactNode", + "description": "The heading property will affect the content of the Alert heading.", + "category": "BaseAlertProps", + "isOptional": true + }, + "buttonRef": { + "name": "buttonRef", + "type": "React.Ref | undefined", + "description": "The ref will be forwarded to the dismiss button", + "category": "BaseAlertProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Breadcrumbs\\": { - \\"Breadcrumbs\\": [ + "Autocomplete": { + "Autocomplete": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "options": { + "name": "options", + "type": "ComboBoxOption[]", + "description": "A list of options", + "category": "BaseAutocompleteProps", + "isOptional": false + }, + "menuSlots": { + "name": "menuSlots", + "type": "PrimitiveProps", + "description": "A colleciton of slots to customize the dropdown of options", + "category": "BaseAutocompleteProps", + "isOptional": true + }, + "isLoading": { + "name": "isLoading", + "type": "boolean | undefined", + "description": "Used to indicate if the autocomplete in loading state Default: false", + "category": "BaseAutocompleteProps", + "isOptional": true + }, + "optionFilter": { + "name": "optionFilter", + "type": "((option: ComboBoxOption, value: string) => boolean) | undefined", + "description": "Custom filter that will be applied to options.\\n\\nNote: Applying custom filter to options will disable match highlighting.", + "category": "BaseAutocompleteProps", + "isOptional": true + }, + "renderOption": { + "name": "renderOption", + "type": "((option: ComboBoxOption, value: string) => React.ReactNode) | undefined", + "description": "Used to customize the rendering of an option inside the li element", + "category": "BaseAutocompleteProps", + "isOptional": true + }, + "onSelect": { + "name": "onSelect", + "type": "((option: ComboBoxOption) => void) | undefined", + "description": "Triggered when an option is selected", + "category": "BaseAutocompleteProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | undefined", + "description": "Set the initial value for an uncontrolled search field", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "Set the value for a controlled search field", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "hasSearchButton": { + "name": "hasSearchButton", + "type": "boolean | undefined", + "description": "Used to determine whether to render a search button on the right Default: true", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "hasSearchIcon": { + "name": "hasSearchIcon", + "type": "boolean | undefined", + "description": "Used to determine whether to render a search icon on the left when there is no search button Default: false", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "onSubmit": { + "name": "onSubmit", + "type": "((value: string) => void) | undefined", + "description": "Handle submission of search field input", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "onClear": { + "name": "onClear", + "type": "(() => void) | undefined", + "description": "Triggered when search field is cleared", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label Default: true", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "clearButtonLabel": { + "name": "clearButtonLabel", + "type": "string | undefined", + "description": "Set the \`aria-label\` for clear button Default: \\"Clear search\\"", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "searchButtonRef": { + "name": "searchButtonRef", + "type": "React.Ref | undefined", + "description": "Provides ref access to search button DOM element", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type", + "category": "TextFieldOptions", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ], - \\"Breadcrumbs.Item\\": [ + ] + }, + "Badge": { + "Badge": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "'info' | 'error' | 'warning' | 'success'", + "description": "The variation property will affect the background color of the badge.", + "category": "BaseBadgeProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "The size property will affect the font size of the badge.", + "category": "BaseBadgeProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ], - \\"Breadcrumbs.Link\\": [ + ] + }, + "Breadcrumbs": { + "Breadcrumbs": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"Breadcrumbs.Separator\\": [ + "Breadcrumbs.Item": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ] - }, - \\"Button\\": { - \\"Button\\": [ + ], + "Breadcrumbs.Link": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"colorTheme\\": { - \\"name\\": \\"colorTheme\\", - \\"type\\": \\"| 'info'\\\\n | 'error'\\\\n | 'warning'\\\\n | 'success'\\\\n | 'overlay'\\", - \\"description\\": \\"Changes the color scheme of the button\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will be disabled.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isFullWidth\\": { - \\"name\\": \\"isFullWidth\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will take up the full width of its container.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isLoading\\": { - \\"name\\": \\"isLoading\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will show a spinner.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"loadingText\\": { - \\"name\\": \\"loadingText\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"The label to show in the button when \`loading\` is true\\\\nIf no text is passed, it only shows the spinner\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"onClick\\": { - \\"name\\": \\"onClick\\", - \\"type\\": \\"React.MouseEventHandler | undefined\\", - \\"description\\": \\"Button click event handler\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the button. Default: \\\\\\"medium\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'button' | 'reset' | 'submit'\\", - \\"description\\": \\"Changes the button type Default: \\\\\\"button\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\", - \\"description\\": \\"Changes the visual weight of the button.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ] - }, - \\"Card\\": { - \\"Card\\": [ + ], + "Breadcrumbs.Separator": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"'outlined' | 'elevated'\\", - \\"description\\": \\"Changes the displayed style of the Card. Options include ‘outlined’, ‘elevated’ and none (default)\\", - \\"category\\": \\"BaseCardProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"CheckboxField\\": { - \\"CheckboxField\\": [ + "Button": { + "Button": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Sets the label text\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Default: false\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": false - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": true - }, - \\"labelPosition\\": { - \\"name\\": \\"labelPosition\\", - \\"type\\": \\"'start' | 'end' | 'top' | 'bottom'\\", - \\"description\\": \\"Sets the position of label in relation to the CheckboxField, Default: \\\\\\"start\\\\\\"\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": true - }, - \\"isIndeterminate\\": { - \\"name\\": \\"isIndeterminate\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether a checkbox is in indeterminate state Default: false\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseCheckboxProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "colorTheme": { + "name": "colorTheme", + "type": "| 'info'\\n | 'error'\\n | 'warning'\\n | 'success'\\n | 'overlay'", + "description": "Changes the color scheme of the button", + "category": "BaseButtonProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "If \`true\`, the button will be disabled.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isFullWidth": { + "name": "isFullWidth", + "type": "boolean | undefined", + "description": "If \`true\`, the button will take up the full width of its container.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isLoading": { + "name": "isLoading", + "type": "boolean | undefined", + "description": "If \`true\`, the button will show a spinner.", + "category": "BaseButtonProps", + "isOptional": true + }, + "loadingText": { + "name": "loadingText", + "type": "string | undefined", + "description": "The label to show in the button when \`loading\` is true\\nIf no text is passed, it only shows the spinner", + "category": "BaseButtonProps", + "isOptional": true + }, + "onClick": { + "name": "onClick", + "type": "React.MouseEventHandler | undefined", + "description": "Button click event handler", + "category": "BaseButtonProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the button. Default: \\"medium\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "'button' | 'reset' | 'submit'", + "description": "Changes the button type Default: \\"button\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'link'\\n | 'menu'\\n | 'warning'\\n | 'destructive'", + "description": "Changes the visual weight of the button.", + "category": "BaseButtonProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Collection\\": { - \\"Collection\\": [ + "Card": { + "Card": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'list' | 'grid' | 'table'\\", - \\"description\\": \\"Collection type. This will be used to determine collection wrapper component. Default: 'list'\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": false - }, - \\"isPaginated\\": { - \\"name\\": \\"isPaginated\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Enable pagination for collection items\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"itemsPerPage\\": { - \\"name\\": \\"itemsPerPage\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Page size (when pagination is enabled)\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"isSearchable\\": { - \\"name\\": \\"isSearchable\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Enable collection filtering\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"searchFilter\\": { - \\"name\\": \\"searchFilter\\", - \\"type\\": \\"((item: unknown, searchText: string) => boolean) | undefined\\", - \\"description\\": \\"Custom search filter (when search is enabled)\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"searchLabel\\": { - \\"name\\": \\"searchLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Search field label Default: \\\\\\"Search\\\\\\"\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"searchPlaceholder\\": { - \\"name\\": \\"searchPlaceholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Search field placeholder\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"searchNoResultsFound\\": { - \\"name\\": \\"searchNoResultsFound\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Controls what is displayed when no results are found from the Collection search\\", - \\"category\\": \\"CollectionWrapperProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"items\\": { - \\"name\\": \\"items\\", - \\"type\\": \\"Item[]\\", - \\"description\\": \\"The items from a data source that will be mapped by the Collection component\\", - \\"category\\": \\"CollectionBaseProps\\", - \\"isOptional\\": false - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"(item: Item, index: number) => JSX.Element\\", - \\"description\\": \\"The component to be repeated\\\\nSame interface as Array.prototype.map\\", - \\"category\\": \\"CollectionChildren\\", - \\"isOptional\\": false + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "'outlined' | 'elevated'", + "description": "Changes the displayed style of the Card. Options include ‘outlined’, ‘elevated’ and none (default)", + "category": "BaseCardProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Divider\\": { - \\"Divider\\": [ + "CheckboxField": { + "CheckboxField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"orientation\\": { - \\"name\\": \\"orientation\\", - \\"type\\": \\"'horizontal' | 'vertical'\\", - \\"description\\": \\"Controls whether the divider is oriented horizontally or vertically. Default: \\\\\\"horizontal\\\\\\"\\", - \\"category\\": \\"DividerOptions\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Size of the divider (height for a horizontal divider, width for vertical) Default: \\\\\\"small\\\\\\"\\", - \\"category\\": \\"DividerOptions\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Adds text to the divider, usually something like \\\\\\"or\\\\\\" to separate 2 things.\\", - \\"category\\": \\"DividerOptions\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Sets the label text", + "category": "BaseCheckboxProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Default: false", + "category": "BaseCheckboxProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseCheckboxProps", + "isOptional": false + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseCheckboxProps", + "isOptional": true + }, + "labelPosition": { + "name": "labelPosition", + "type": "'start' | 'end' | 'top' | 'bottom'", + "description": "Sets the position of label in relation to the CheckboxField, Default: \\"start\\"", + "category": "BaseCheckboxProps", + "isOptional": true + }, + "isIndeterminate": { + "name": "isIndeterminate", + "type": "boolean | undefined", + "description": "Determines whether a checkbox is in indeterminate state Default: false", + "category": "BaseCheckboxProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseCheckboxProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"DropZone\\": { - \\"DropZone\\": [ + "Collection": { + "Collection": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "'list' | 'grid' | 'table'", + "description": "Collection type. This will be used to determine collection wrapper component. Default: 'list'", + "category": "CollectionWrapperProps", + "isOptional": false + }, + "isPaginated": { + "name": "isPaginated", + "type": "boolean | undefined", + "description": "Enable pagination for collection items", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "itemsPerPage": { + "name": "itemsPerPage", + "type": "number | undefined", + "description": "Page size (when pagination is enabled)", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "isSearchable": { + "name": "isSearchable", + "type": "boolean | undefined", + "description": "Enable collection filtering", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "searchFilter": { + "name": "searchFilter", + "type": "((item: unknown, searchText: string) => boolean) | undefined", + "description": "Custom search filter (when search is enabled)", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "searchLabel": { + "name": "searchLabel", + "type": "string | undefined", + "description": "Search field label Default: \\"Search\\"", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "searchPlaceholder": { + "name": "searchPlaceholder", + "type": "string | undefined", + "description": "Search field placeholder", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "searchNoResultsFound": { + "name": "searchNoResultsFound", + "type": "React.ReactNode", + "description": "Controls what is displayed when no results are found from the Collection search", + "category": "CollectionWrapperProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "items": { + "name": "items", + "type": "Item[]", + "description": "The items from a data source that will be mapped by the Collection component", + "category": "CollectionBaseProps", + "isOptional": false + }, + "children": { + "name": "children", + "type": "(item: Item, index: number) => JSX.Element", + "description": "The component to be repeated\\nSame interface as Array.prototype.map", + "category": "CollectionChildren", + "isOptional": false } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Expander\\": { - \\"Expander\\": [ + "Divider": { + "Divider": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | string[] | undefined\\", - \\"description\\": \\"The value of the item(s) to expand. Use on uncontrolled component.\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | string[] | undefined\\", - \\"description\\": \\"The controlled value of the item(s) to expand. Must be used in conjunction with onChange.\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"isCollapsible\\": { - \\"name\\": \\"isCollapsible\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether the opened item can be collapsed if this is a single expander.\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'single' | 'multiple'\\", - \\"description\\": \\"Determines whether one or multiple items can be opened at the same time.\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"((value?: string | string[] | undefined) => void) | undefined\\", - \\"description\\": \\"replace usage with \`onValueChange\`\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"onValueChange\\": { - \\"name\\": \\"onValueChange\\", - \\"type\\": \\"((value?: string | string[] | undefined) => void) | undefined\\", - \\"description\\": \\"Event handler called when the expanded state of an item changes\\", - \\"category\\": \\"BaseExpanderProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "orientation": { + "name": "orientation", + "type": "'horizontal' | 'vertical'", + "description": "Controls whether the divider is oriented horizontally or vertically. Default: \\"horizontal\\"", + "category": "DividerOptions", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Size of the divider (height for a horizontal divider, width for vertical) Default: \\"small\\"", + "category": "DividerOptions", + "isOptional": true + }, + "label": { + "name": "label", + "type": "string | undefined", + "description": "Adds text to the divider, usually something like \\"or\\" to separate 2 things.", + "category": "DividerOptions", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } - ], - \\"ExpanderItem\\": [ + ] + }, + "DropZone": { + "DropZone": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"title\\": { - \\"name\\": \\"title\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"The content of the heading.\\", - \\"category\\": \\"BaseExpanderItemProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string\\", - \\"description\\": \\"A unique value for the item.\\", - \\"category\\": \\"BaseExpanderItemProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Fieldset\\": { - \\"Fieldset\\": [ + "Fieldset": { + "Fieldset": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"legend\\": { - \\"name\\": \\"legend\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Legend is the label for the Fieldset.\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": false - }, - \\"legendHidden\\": { - \\"name\\": \\"legendHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hides the legend while making it still accessible to screenreaders.\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"outlined\\\\\\" | \\\\\\"plain\\\\\\" | undefined\\", - \\"description\\": \\"Adds plain or outlined variation to the Fieldset\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the Fieldset\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\" Determines whether the Fieldset should be disabled. Default: false\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the Fieldset.\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"form\\": { - \\"name\\": \\"form\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Form to associate the Fieldset with\\", - \\"category\\": \\"BaseFieldsetProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "legend": { + "name": "legend", + "type": "React.ReactNode", + "description": "Legend is the label for the Fieldset.", + "category": "BaseFieldsetProps", + "isOptional": false + }, + "legendHidden": { + "name": "legendHidden", + "type": "boolean | undefined", + "description": "Visually hides the legend while making it still accessible to screenreaders.", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"outlined\\" | \\"plain\\" | undefined", + "description": "Adds plain or outlined variation to the Fieldset", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the Fieldset", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": " Determines whether the Fieldset should be disabled. Default: false", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the Fieldset.", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "form": { + "name": "form", + "type": "string | undefined", + "description": "Form to associate the Fieldset with", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Flex\\": { - \\"Flex\\": [ + "Flex": { + "Flex": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Grid\\": { - \\"Grid\\": [ + "Grid": { + "Grid": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"autoColumns\\": { - \\"name\\": \\"autoColumns\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Specifies the size of an implicitly-created grid column track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"autoFlow\\": { - \\"name\\": \\"autoFlow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"autoRows\\": { - \\"name\\": \\"autoRows\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Specifies the size of an implicitly-created grid row track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateAreas\\": { - \\"name\\": \\"templateAreas\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"specifies named grid areas, establishing the cells in the grid and assigning them names. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateColumns\\": { - \\"name\\": \\"templateColumns\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Defines the line names and track sizing functions of the grid columns. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateRows\\": { - \\"name\\": \\"templateRows\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Defines the line names and track sizing functions of the grid rows. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"number | string | 'auto'\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"number | string | 'auto'\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "autoColumns": { + "name": "autoColumns", + "type": "ResponsiveStyle> | undefined", + "description": "Specifies the size of an implicitly-created grid column track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "autoFlow": { + "name": "autoFlow", + "type": "ResponsiveStyle | undefined", + "description": "Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "autoRows": { + "name": "autoRows", + "type": "ResponsiveStyle> | undefined", + "description": "Specifies the size of an implicitly-created grid row track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateAreas": { + "name": "templateAreas", + "type": "ResponsiveStyle | undefined", + "description": "specifies named grid areas, establishing the cells in the grid and assigning them names. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateColumns": { + "name": "templateColumns", + "type": "ResponsiveStyle> | undefined", + "description": "Defines the line names and track sizing functions of the grid columns. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateRows": { + "name": "templateRows", + "type": "ResponsiveStyle> | undefined", + "description": "Defines the line names and track sizing functions of the grid rows. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "number | string | 'auto'", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "number | string | 'auto'", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"autoColumns\\": { - \\"name\\": \\"autoColumns\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Specifies the size of an implicitly-created grid column track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"autoFlow\\": { - \\"name\\": \\"autoFlow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"autoRows\\": { - \\"name\\": \\"autoRows\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Specifies the size of an implicitly-created grid row track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateAreas\\": { - \\"name\\": \\"templateAreas\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"specifies named grid areas, establishing the cells in the grid and assigning them names. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateColumns\\": { - \\"name\\": \\"templateColumns\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Defines the line names and track sizing functions of the grid columns. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"templateRows\\": { - \\"name\\": \\"templateRows\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Defines the line names and track sizing functions of the grid rows. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)\\", - \\"category\\": \\"GridContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"number | string | 'auto'\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"number | string | 'auto'\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "autoColumns": { + "name": "autoColumns", + "type": "ResponsiveStyle> | undefined", + "description": "Specifies the size of an implicitly-created grid column track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "autoFlow": { + "name": "autoFlow", + "type": "ResponsiveStyle | undefined", + "description": "Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "autoRows": { + "name": "autoRows", + "type": "ResponsiveStyle> | undefined", + "description": "Specifies the size of an implicitly-created grid row track or pattern of tracks. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateAreas": { + "name": "templateAreas", + "type": "ResponsiveStyle | undefined", + "description": "specifies named grid areas, establishing the cells in the grid and assigning them names. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateColumns": { + "name": "templateColumns", + "type": "ResponsiveStyle> | undefined", + "description": "Defines the line names and track sizing functions of the grid columns. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "templateRows": { + "name": "templateRows", + "type": "ResponsiveStyle> | undefined", + "description": "Defines the line names and track sizing functions of the grid rows. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)", + "category": "GridContainerStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "number | string | 'auto'", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "number | string | 'auto'", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Heading\\": { - \\"Heading\\": [ + "Heading": { + "Heading": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"level\\": { - \\"name\\": \\"level\\", - \\"type\\": \\"1 | 2 | 3 | 4 | 5 | 6\\", - \\"description\\": \\"Controls which semantic section heading element is rendered,

through

\\", - \\"category\\": \\"BaseHeadingProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'secondary'\\\\n | 'tertiary'\\\\n | 'error'\\\\n | 'warning'\\\\n | 'info'\\\\n | 'success'\\", - \\"description\\": \\"This should be the primary way to handle different styles of text. Lower-level\\\\ntext styling attributes like color can be set directly, that should be more of an\\\\nescape hatch.\\", - \\"category\\": \\"BaseTextProps\\", - \\"isOptional\\": true - }, - \\"isTruncated\\": { - \\"name\\": \\"isTruncated\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"This attribute will be used to indicate if the text component should truncate text\\\\nthat exceeds the width of the text element. Truncated text will render an ellipsis.\\", - \\"category\\": \\"BaseTextProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "level": { + "name": "level", + "type": "1 | 2 | 3 | 4 | 5 | 6", + "description": "Controls which semantic section heading element is rendered,

through

", + "category": "BaseHeadingProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'secondary'\\n | 'tertiary'\\n | 'error'\\n | 'warning'\\n | 'info'\\n | 'success'", + "description": "This should be the primary way to handle different styles of text. Lower-level\\ntext styling attributes like color can be set directly, that should be more of an\\nescape hatch.", + "category": "BaseTextProps", + "isOptional": true + }, + "isTruncated": { + "name": "isTruncated", + "type": "boolean | undefined", + "description": "This attribute will be used to indicate if the text component should truncate text\\nthat exceeds the width of the text element. Truncated text will render an ellipsis.", + "category": "BaseTextProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"HighlightMatch\\": { - \\"HighlightMatch\\": [ + "HighlightMatch": { + "HighlightMatch": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"string\\", - \\"description\\": \\"The label you would like to have match highlighting\\", - \\"category\\": \\"BaseHighlightMatchProps\\", - \\"isOptional\\": false - }, - \\"query\\": { - \\"name\\": \\"query\\", - \\"type\\": \\"string\\", - \\"description\\": \\"A query string used to match against the label\\", - \\"category\\": \\"BaseHighlightMatchProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "string", + "description": "The label you would like to have match highlighting", + "category": "BaseHighlightMatchProps", + "isOptional": false + }, + "query": { + "name": "query", + "type": "string", + "description": "A query string used to match against the label", + "category": "BaseHighlightMatchProps", + "isOptional": false + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Icon\\": { - \\"Icon\\": [ + "Icon": { + "Icon": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"pathData\\": { - \\"name\\": \\"pathData\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"This defines the shape of the SVG element(the 'd' attribute). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"ariaLabel\\": { - \\"name\\": \\"ariaLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"This is used to define a string that labels the current element.\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"viewBox\\": { - \\"name\\": \\"viewBox\\", - \\"type\\": \\"{\\\\n minX?: number;\\\\n minY?: number;\\\\n width?: number;\\\\n height?: number;\\\\n}\\", - \\"description\\": \\"This defines the position and dimension, in user space, of an SVG viewport. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"fill\\": { - \\"name\\": \\"fill\\", - \\"type\\": \\"Property.Color | undefined\\", - \\"description\\": \\"By default this will be \\\\\\"currentColor\\\\\\" to match what is generally expected of icons (they inherit their color from current font color). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"You can pass SVG elements like directly as children for more\\\\nflexibility and to allow for multiple paths.\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"paths\\": { - \\"name\\": \\"paths\\", - \\"type\\": \\"React.SVGAttributes[] | undefined\\", - \\"description\\": \\"Optionally pass an array of path-like objects which\\\\nthe icon will map to elements.\\", - \\"category\\": \\"BaseIconProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "pathData": { + "name": "pathData", + "type": "string | undefined", + "description": "This defines the shape of the SVG element(the 'd' attribute). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)", + "category": "BaseIconProps", + "isOptional": true + }, + "ariaLabel": { + "name": "ariaLabel", + "type": "string | undefined", + "description": "This is used to define a string that labels the current element.", + "category": "BaseIconProps", + "isOptional": true + }, + "viewBox": { + "name": "viewBox", + "type": "{\\n minX?: number;\\n minY?: number;\\n width?: number;\\n height?: number;\\n}", + "description": "This defines the position and dimension, in user space, of an SVG viewport. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)", + "category": "BaseIconProps", + "isOptional": true + }, + "fill": { + "name": "fill", + "type": "Property.Color | undefined", + "description": "By default this will be \\"currentColor\\" to match what is generally expected of icons (they inherit their color from current font color). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)", + "category": "BaseIconProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "You can pass SVG elements like directly as children for more\\nflexibility and to allow for multiple paths.", + "category": "BaseIconProps", + "isOptional": true + }, + "paths": { + "name": "paths", + "type": "React.SVGAttributes[] | undefined", + "description": "Optionally pass an array of path-like objects which\\nthe icon will map to elements.", + "category": "BaseIconProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Image\\": { - \\"Image\\": [ + "Image": { + "Image": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"alt\\": { - \\"name\\": \\"alt\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Alternative text description of the image (required). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": false - }, - \\"sizes\\": { - \\"name\\": \\"sizes\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set of image source sizes. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": true - }, - \\"src\\": { - \\"name\\": \\"src\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"URl source for image (required).\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": false - }, - \\"srcSet\\": { - \\"name\\": \\"srcSet\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Possible image sources for the browser to use. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": true - }, - \\"onLoad\\": { - \\"name\\": \\"onLoad\\", - \\"type\\": \\"((event: React.SyntheticEvent) => void) | undefined\\", - \\"description\\": \\"Handles loading event on image.\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": true - }, - \\"onError\\": { - \\"name\\": \\"onError\\", - \\"type\\": \\"((error: string | React.SyntheticEvent) => void) | undefined\\", - \\"description\\": \\"Handles error events on image.\\", - \\"category\\": \\"ImageOptions\\", - \\"isOptional\\": true - }, - \\"aspectRatio\\": { - \\"name\\": \\"aspectRatio\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets a preferred aspect ratio for the selected replaced element's box\\", - \\"category\\": \\"ImageStyleProps\\", - \\"isOptional\\": true - }, - \\"objectFit\\": { - \\"name\\": \\"objectFit\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\" Sets how the content of an should be resized to fit its container\\", - \\"category\\": \\"ImageStyleProps\\", - \\"isOptional\\": true - }, - \\"objectPosition\\": { - \\"name\\": \\"objectPosition\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\" Specifies the alignment of the selected replaced element's contents within the element's box\\", - \\"category\\": \\"ImageStyleProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "alt": { + "name": "alt", + "type": "string | undefined", + "description": "Alternative text description of the image (required). See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)", + "category": "ImageOptions", + "isOptional": false + }, + "sizes": { + "name": "sizes", + "type": "string | undefined", + "description": "Set of image source sizes. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)", + "category": "ImageOptions", + "isOptional": true + }, + "src": { + "name": "src", + "type": "string | undefined", + "description": "URl source for image (required).", + "category": "ImageOptions", + "isOptional": false + }, + "srcSet": { + "name": "srcSet", + "type": "string | undefined", + "description": "Possible image sources for the browser to use. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)", + "category": "ImageOptions", + "isOptional": true + }, + "onLoad": { + "name": "onLoad", + "type": "((event: React.SyntheticEvent) => void) | undefined", + "description": "Handles loading event on image.", + "category": "ImageOptions", + "isOptional": true + }, + "onError": { + "name": "onError", + "type": "((error: string | React.SyntheticEvent) => void) | undefined", + "description": "Handles error events on image.", + "category": "ImageOptions", + "isOptional": true + }, + "aspectRatio": { + "name": "aspectRatio", + "type": "ResponsiveStyle | undefined", + "description": "Sets a preferred aspect ratio for the selected replaced element's box", + "category": "ImageStyleProps", + "isOptional": true + }, + "objectFit": { + "name": "objectFit", + "type": "ResponsiveStyle | undefined", + "description": " Sets how the content of an should be resized to fit its container", + "category": "ImageStyleProps", + "isOptional": true + }, + "objectPosition": { + "name": "objectPosition", + "type": "ResponsiveStyle> | undefined", + "description": " Specifies the alignment of the selected replaced element's contents within the element's box", + "category": "ImageStyleProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Input\\": { - \\"Input\\": [ + "Input": { + "Input": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"| 'enter'\\\\n | 'done'\\\\n | 'go'\\\\n | 'next'\\\\n | 'previous'\\\\n | 'search'\\\\n | 'send'\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"| 'none'\\\\n | 'text'\\\\n | 'decimal'\\\\n | 'numeric'\\\\n | 'tel'\\\\n | 'search'\\\\n | 'email'\\\\n | 'url'\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\" Determines whether field should be disabled. Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "| 'enter'\\n | 'done'\\n | 'go'\\n | 'next'\\n | 'previous'\\n | 'search'\\n | 'send'", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "| 'none'\\n | 'text'\\n | 'decimal'\\n | 'numeric'\\n | 'tel'\\n | 'search'\\n | 'email'\\n | 'url'", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": " Determines whether field should be disabled. Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type.", + "category": "BaseInputProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | number | readonly string[] | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Label\\": { - \\"Label\\": [ + "Label": { + "Label": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"visuallyHidden\\": { - \\"name\\": \\"visuallyHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether label should be visually hidden\\", - \\"category\\": \\"BaseLabelProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Inner text of the label\\", - \\"category\\": \\"BaseLabelProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "visuallyHidden": { + "name": "visuallyHidden", + "type": "boolean | undefined", + "description": "Whether label should be visually hidden", + "category": "BaseLabelProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Inner text of the label", + "category": "BaseLabelProps", + "isOptional": false + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Link\\": { - \\"Link\\": [ + "Link": { + "Link": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the Link component\\", - \\"category\\": \\"BaseLinkProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"isExternal\\": { - \\"name\\": \\"isExternal\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Boolean value indicating an external link\\\\nsets the rel attribute to \\\\\\"noopener noreferrer\\\\\\"\\", - \\"category\\": \\"LinkOptions\\", - \\"isOptional\\": true - }, - \\"href\\": { - \\"name\\": \\"href\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"a stringifier that returns a string containing the whole URL, and allows the href to be updated. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href)\\", - \\"category\\": \\"LinkOptions\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the Link component", + "category": "BaseLinkProps", + "isOptional": false + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "isExternal": { + "name": "isExternal", + "type": "boolean | undefined", + "description": "Boolean value indicating an external link\\nsets the rel attribute to \\"noopener noreferrer\\"", + "category": "LinkOptions", + "isOptional": true + }, + "href": { + "name": "href", + "type": "string | undefined", + "description": "a stringifier that returns a string containing the whole URL, and allows the href to be updated. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href)", + "category": "LinkOptions", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Loader\\": { - \\"Loader\\": [ + "Loader": { + "Loader": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"This will set the size of Loader.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"linear\\\\\\" | undefined\\", - \\"description\\": \\"This will set the variation of Loader. Available options are linear and none(circular).\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"filledColor\\": { - \\"name\\": \\"filledColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"This will set the filled color of Loader.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"emptyColor\\": { - \\"name\\": \\"emptyColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"This will set the empty color of Loader.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"percentage\\": { - \\"name\\": \\"percentage\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"This will set the percentage of a determinate Loader.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"isDeterminate\\": { - \\"name\\": \\"isDeterminate\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"This will mark the Loader as determinate.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"isPercentageTextHidden\\": { - \\"name\\": \\"isPercentageTextHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"This will set the visibility of percentage text.\\", - \\"category\\": \\"BaseLoaderProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "This will set the size of Loader.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"linear\\" | undefined", + "description": "This will set the variation of Loader. Available options are linear and none(circular).", + "category": "BaseLoaderProps", + "isOptional": true + }, + "filledColor": { + "name": "filledColor", + "type": "StyleToken | undefined", + "description": "This will set the filled color of Loader.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "emptyColor": { + "name": "emptyColor", + "type": "StyleToken | undefined", + "description": "This will set the empty color of Loader.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "percentage": { + "name": "percentage", + "type": "number | undefined", + "description": "This will set the percentage of a determinate Loader.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "isDeterminate": { + "name": "isDeterminate", + "type": "boolean | undefined", + "description": "This will mark the Loader as determinate.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "isPercentageTextHidden": { + "name": "isPercentageTextHidden", + "type": "boolean | undefined", + "description": "This will set the visibility of percentage text.", + "category": "BaseLoaderProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Menu\\": { - \\"Menu\\": [ + "Menu": { + "Menu": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"menuAlign\\": { - \\"name\\": \\"menuAlign\\", - \\"type\\": \\"\\\\\\"center\\\\\\" | \\\\\\"end\\\\\\" | \\\\\\"start\\\\\\" | undefined\\", - \\"description\\": \\"Alignment of menu against trigger Default: \\\\\\"start\\\\\\"\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"onOpenChange\\": { - \\"name\\": \\"onOpenChange\\", - \\"type\\": \\"((isOpen: boolean) => void) | undefined\\", - \\"description\\": \\"Handle open and close event of menu\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"isOpen\\": { - \\"name\\": \\"isOpen\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Default for controlled menu\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Size of Menu button and items\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"trigger\\": { - \\"name\\": \\"trigger\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Trigger node Default: MenuButton with IconMenu Note: Must forward refs to DOM element\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"triggerClassName\\": { - \\"name\\": \\"triggerClassName\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"ClassName to apply to default trigger button\\\\nNote: only applies if \`trigger\` prop is null\\", - \\"category\\": \\"BaseMenuProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "menuAlign": { + "name": "menuAlign", + "type": "\\"center\\" | \\"end\\" | \\"start\\" | undefined", + "description": "Alignment of menu against trigger Default: \\"start\\"", + "category": "BaseMenuProps", + "isOptional": true + }, + "onOpenChange": { + "name": "onOpenChange", + "type": "((isOpen: boolean) => void) | undefined", + "description": "Handle open and close event of menu", + "category": "BaseMenuProps", + "isOptional": true + }, + "isOpen": { + "name": "isOpen", + "type": "boolean | undefined", + "description": "Default for controlled menu", + "category": "BaseMenuProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Size of Menu button and items", + "category": "BaseMenuProps", + "isOptional": true + }, + "trigger": { + "name": "trigger", + "type": "React.ReactNode", + "description": "Trigger node Default: MenuButton with IconMenu Note: Must forward refs to DOM element", + "category": "BaseMenuProps", + "isOptional": true + }, + "triggerClassName": { + "name": "triggerClassName", + "type": "string | undefined", + "description": "ClassName to apply to default trigger button\\nNote: only applies if \`trigger\` prop is null", + "category": "BaseMenuProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"MenuButton\\": [ + "MenuButton": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isLoading\\": { - \\"name\\": \\"isLoading\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will show a spinner.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will be disabled.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"onClick\\": { - \\"name\\": \\"onClick\\", - \\"type\\": \\"React.MouseEventHandler | undefined\\", - \\"description\\": \\"Button click event handler\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'button' | 'reset' | 'submit'\\", - \\"description\\": \\"Changes the button type Default: \\\\\\"button\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the button. Default: \\\\\\"medium\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\", - \\"description\\": \\"Changes the visual weight of the button.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isFullWidth\\": { - \\"name\\": \\"isFullWidth\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will take up the full width of its container.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"loadingText\\": { - \\"name\\": \\"loadingText\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"The label to show in the button when \`loading\` is true\\\\nIf no text is passed, it only shows the spinner\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isLoading": { + "name": "isLoading", + "type": "boolean | undefined", + "description": "If \`true\`, the button will show a spinner.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "If \`true\`, the button will be disabled.", + "category": "BaseButtonProps", + "isOptional": true + }, + "onClick": { + "name": "onClick", + "type": "React.MouseEventHandler | undefined", + "description": "Button click event handler", + "category": "BaseButtonProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "'button' | 'reset' | 'submit'", + "description": "Changes the button type Default: \\"button\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the button. Default: \\"medium\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'link'\\n | 'menu'\\n | 'warning'\\n | 'destructive'", + "description": "Changes the visual weight of the button.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isFullWidth": { + "name": "isFullWidth", + "type": "boolean | undefined", + "description": "If \`true\`, the button will take up the full width of its container.", + "category": "BaseButtonProps", + "isOptional": true + }, + "loadingText": { + "name": "loadingText", + "type": "string | undefined", + "description": "The label to show in the button when \`loading\` is true\\nIf no text is passed, it only shows the spinner", + "category": "BaseButtonProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"MenuItem\\": [ + "MenuItem": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Accepts any number of MenuItem components\\", - \\"category\\": \\"BaseMenuItemProps\\", - \\"isOptional\\": true - }, - \\"isLoading\\": { - \\"name\\": \\"isLoading\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will show a spinner.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will be disabled.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"onClick\\": { - \\"name\\": \\"onClick\\", - \\"type\\": \\"React.MouseEventHandler | undefined\\", - \\"description\\": \\"Button click event handler\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'button' | 'reset' | 'submit'\\", - \\"description\\": \\"Changes the button type Default: \\\\\\"button\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the button. Default: \\\\\\"medium\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\", - \\"description\\": \\"Changes the visual weight of the button.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isFullWidth\\": { - \\"name\\": \\"isFullWidth\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will take up the full width of its container.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"loadingText\\": { - \\"name\\": \\"loadingText\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"The label to show in the button when \`loading\` is true\\\\nIf no text is passed, it only shows the spinner\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Accepts any number of MenuItem components", + "category": "BaseMenuItemProps", + "isOptional": true + }, + "isLoading": { + "name": "isLoading", + "type": "boolean | undefined", + "description": "If \`true\`, the button will show a spinner.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "If \`true\`, the button will be disabled.", + "category": "BaseButtonProps", + "isOptional": true + }, + "onClick": { + "name": "onClick", + "type": "React.MouseEventHandler | undefined", + "description": "Button click event handler", + "category": "BaseButtonProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "'button' | 'reset' | 'submit'", + "description": "Changes the button type Default: \\"button\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the button. Default: \\"medium\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'link'\\n | 'menu'\\n | 'warning'\\n | 'destructive'", + "description": "Changes the visual weight of the button.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isFullWidth": { + "name": "isFullWidth", + "type": "boolean | undefined", + "description": "If \`true\`, the button will take up the full width of its container.", + "category": "BaseButtonProps", + "isOptional": true + }, + "loadingText": { + "name": "loadingText", + "type": "string | undefined", + "description": "The label to show in the button when \`loading\` is true\\nIf no text is passed, it only shows the spinner", + "category": "BaseButtonProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Message\\": { - \\"Message\\": [ + "Message": { + "Message": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"dismissLabel\\": { - \\"name\\": \\"dismissLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Configures the accessible label for the Message's dismiss button.\\", - \\"category\\": \\"BaseMessageProps\\", - \\"isOptional\\": true - }, - \\"isDismissible\\": { - \\"name\\": \\"isDismissible\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"The isDismissible property will affect whether the user can dismiss (close) the Message. Defaults to false (not dismissible).\\", - \\"category\\": \\"BaseMessageProps\\", - \\"isOptional\\": true - }, - \\"onDismiss\\": { - \\"name\\": \\"onDismiss\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"The onDismiss callback will be called when the user dismisses (closes) the Message.\\", - \\"category\\": \\"BaseMessageProps\\", - \\"isOptional\\": true - }, - \\"hasIcon\\": { - \\"name\\": \\"hasIcon\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"The hasIcon property will determine whether or not an icon is displayed on the Message. Defaults to true (icon displayed).\\", - \\"category\\": \\"BaseMessageProps\\", - \\"isOptional\\": true - }, - \\"heading\\": { - \\"name\\": \\"heading\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"The heading property will affect the content of the Message heading.\\", - \\"category\\": \\"BaseMessageProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"outlined\\\\\\" | \\\\\\"plain\\\\\\" | \\\\\\"filled\\\\\\" | undefined\\", - \\"description\\": \\"The variation property will affect the overall style of the Message.\\", - \\"category\\": \\"BaseMessageContainerProps\\", - \\"isOptional\\": true - }, - \\"colorTheme\\": { - \\"name\\": \\"colorTheme\\", - \\"type\\": \\"| 'neutral'\\\\n | 'info'\\\\n | 'error'\\\\n | 'warning'\\\\n | 'success'\\", - \\"description\\": \\"The colorTheme property will affect the color and iconography used in the Message.\\", - \\"category\\": \\"BaseMessageContainerProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "dismissLabel": { + "name": "dismissLabel", + "type": "string | undefined", + "description": "Configures the accessible label for the Message's dismiss button.", + "category": "BaseMessageProps", + "isOptional": true + }, + "isDismissible": { + "name": "isDismissible", + "type": "boolean | undefined", + "description": "The isDismissible property will affect whether the user can dismiss (close) the Message. Defaults to false (not dismissible).", + "category": "BaseMessageProps", + "isOptional": true + }, + "onDismiss": { + "name": "onDismiss", + "type": "(() => void) | undefined", + "description": "The onDismiss callback will be called when the user dismisses (closes) the Message.", + "category": "BaseMessageProps", + "isOptional": true + }, + "hasIcon": { + "name": "hasIcon", + "type": "boolean | undefined", + "description": "The hasIcon property will determine whether or not an icon is displayed on the Message. Defaults to true (icon displayed).", + "category": "BaseMessageProps", + "isOptional": true + }, + "heading": { + "name": "heading", + "type": "React.ReactNode", + "description": "The heading property will affect the content of the Message heading.", + "category": "BaseMessageProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"outlined\\" | \\"plain\\" | \\"filled\\" | undefined", + "description": "The variation property will affect the overall style of the Message.", + "category": "BaseMessageContainerProps", + "isOptional": true + }, + "colorTheme": { + "name": "colorTheme", + "type": "| 'neutral'\\n | 'info'\\n | 'error'\\n | 'warning'\\n | 'success'", + "description": "The colorTheme property will affect the color and iconography used in the Message.", + "category": "BaseMessageContainerProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Pagination\\": { - \\"Pagination\\": [ + "Pagination": { + "Pagination": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"currentPage\\": { - \\"name\\": \\"currentPage\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Index of the current page. (starting from 1)\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"totalPages\\": { - \\"name\\": \\"totalPages\\", - \\"type\\": \\"number\\", - \\"description\\": \\"Total number of available pages.\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": false - }, - \\"siblingCount\\": { - \\"name\\": \\"siblingCount\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"The number of siblings on each side of current page.\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"hasMorePages\\": { - \\"name\\": \\"hasMorePages\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Optionally indicates whether there are more pages after \`totalPages\`. Can be combined with \`totalPages\` to enable the next button when reaching the last page. Default: false\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"currentPageLabel\\": { - \\"name\\": \\"currentPageLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the invisible label for current page. Default: \\\\\\"Current Page:\\\\\\"\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"pageLabel\\": { - \\"name\\": \\"pageLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the label text for each page button other than the current page.\\\\nIt will be used to construct the \`aria-label\` for each page button. e.g, \\\\\\"Go to page 1\\\\\\" for page 1 button Default: \\\\\\"Go to page\\\\\\"\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"previousLabel\\": { - \\"name\\": \\"previousLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the \`aria-label\` for the left arrow button. Default: \\\\\\"Go to previous page\\\\\\"\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"nextLabel\\": { - \\"name\\": \\"nextLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the \`aria-label\` for the right arrow button. Default: \\\\\\"Go to next page\\\\\\"\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"onNext\\": { - \\"name\\": \\"onNext\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Callback function triggered when the next-page button is pressed\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"onPrevious\\": { - \\"name\\": \\"onPrevious\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Callback function triggered when the prev-page button is pressed\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"((newPageIndex?: number | undefined, prevPageIndex?: number | undefined) => void) | undefined\\", - \\"description\\": \\"Callback function triggered every time the page changes\\", - \\"category\\": \\"BasePaginationProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "currentPage": { + "name": "currentPage", + "type": "number | undefined", + "description": "Index of the current page. (starting from 1)", + "category": "BasePaginationProps", + "isOptional": true + }, + "totalPages": { + "name": "totalPages", + "type": "number", + "description": "Total number of available pages.", + "category": "BasePaginationProps", + "isOptional": false + }, + "siblingCount": { + "name": "siblingCount", + "type": "number | undefined", + "description": "The number of siblings on each side of current page.", + "category": "BasePaginationProps", + "isOptional": true + }, + "hasMorePages": { + "name": "hasMorePages", + "type": "boolean | undefined", + "description": "Optionally indicates whether there are more pages after \`totalPages\`. Can be combined with \`totalPages\` to enable the next button when reaching the last page. Default: false", + "category": "BasePaginationProps", + "isOptional": true + }, + "currentPageLabel": { + "name": "currentPageLabel", + "type": "string | undefined", + "description": "Set the invisible label for current page. Default: \\"Current Page:\\"", + "category": "BasePaginationProps", + "isOptional": true + }, + "pageLabel": { + "name": "pageLabel", + "type": "string | undefined", + "description": "Set the label text for each page button other than the current page.\\nIt will be used to construct the \`aria-label\` for each page button. e.g, \\"Go to page 1\\" for page 1 button Default: \\"Go to page\\"", + "category": "BasePaginationProps", + "isOptional": true + }, + "previousLabel": { + "name": "previousLabel", + "type": "string | undefined", + "description": "Set the \`aria-label\` for the left arrow button. Default: \\"Go to previous page\\"", + "category": "BasePaginationProps", + "isOptional": true + }, + "nextLabel": { + "name": "nextLabel", + "type": "string | undefined", + "description": "Set the \`aria-label\` for the right arrow button. Default: \\"Go to next page\\"", + "category": "BasePaginationProps", + "isOptional": true + }, + "onNext": { + "name": "onNext", + "type": "(() => void) | undefined", + "description": "Callback function triggered when the next-page button is pressed", + "category": "BasePaginationProps", + "isOptional": true + }, + "onPrevious": { + "name": "onPrevious", + "type": "(() => void) | undefined", + "description": "Callback function triggered when the prev-page button is pressed", + "category": "BasePaginationProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "((newPageIndex?: number | undefined, prevPageIndex?: number | undefined) => void) | undefined", + "description": "Callback function triggered every time the page changes", + "category": "BasePaginationProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"PasswordField\\": { - \\"PasswordField\\": [ + "PasswordField": { + "PasswordField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"hideShowPassword\\": { - \\"name\\": \\"hideShowPassword\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"For password fields, will hide the \\\\\\"show password\\\\\\" button\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"hidePasswordButtonLabel\\": { - \\"name\\": \\"hidePasswordButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"The hidePasswordButtonLabel prop is no longer in use, since the aria-label is now consistent between state changes. Set the \`aria-label\` for hide password button Default: \\\\\\"Hide password\\\\\\"\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"passwordIsHiddenLabel\\": { - \\"name\\": \\"passwordIsHiddenLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the text read by screen readers when the password is hidden Default: \\\\\\"Password is hidden\\\\\\"\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"passwordIsShownLabel\\": { - \\"name\\": \\"passwordIsShownLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the text read by screen readers when the password is shown Default: \\\\\\"Password is shown\\\\\\"\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"showPasswordButtonLabel\\": { - \\"name\\": \\"showPasswordButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the \`aria-label\` for show password button Default: \\\\\\"Show password\\\\\\"\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Password autocomplete type See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) Default: \\\\\\"current-password\\\\\\"\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"showPasswordButtonRef\\": { - \\"name\\": \\"showPasswordButtonRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"Forwarded ref for access to show password button DOM element\\", - \\"category\\": \\"BasePasswordFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "hideShowPassword": { + "name": "hideShowPassword", + "type": "boolean | undefined", + "description": "For password fields, will hide the \\"show password\\" button", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "hidePasswordButtonLabel": { + "name": "hidePasswordButtonLabel", + "type": "string | undefined", + "description": "The hidePasswordButtonLabel prop is no longer in use, since the aria-label is now consistent between state changes. Set the \`aria-label\` for hide password button Default: \\"Hide password\\"", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "passwordIsHiddenLabel": { + "name": "passwordIsHiddenLabel", + "type": "string | undefined", + "description": "Sets the text read by screen readers when the password is hidden Default: \\"Password is hidden\\"", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "passwordIsShownLabel": { + "name": "passwordIsShownLabel", + "type": "string | undefined", + "description": "Sets the text read by screen readers when the password is shown Default: \\"Password is shown\\"", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "showPasswordButtonLabel": { + "name": "showPasswordButtonLabel", + "type": "string | undefined", + "description": "Set the \`aria-label\` for show password button Default: \\"Show password\\"", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Password autocomplete type See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) Default: \\"current-password\\"", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "showPasswordButtonRef": { + "name": "showPasswordButtonRef", + "type": "React.Ref | undefined", + "description": "Forwarded ref for access to show password button DOM element", + "category": "BasePasswordFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type", + "category": "TextFieldOptions", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | number | readonly string[] | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"PhoneNumberField\\": { - \\"PhoneNumberField\\": [ + "PhoneNumberField": { + "PhoneNumberField": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"\\\\\\"tel\\\\\\" | undefined\\", - \\"description\\": \\" elements of type 'tel' are used to let the user enter and edit a telephone number\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"dialCodeLabel\\": { - \\"name\\": \\"dialCodeLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets a hidden and accessible label for the dial code selector\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"dialCodeName\\": { - \\"name\\": \\"dialCodeName\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the name used when handling form submission for the dial code selector\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"dialCodeList\\": { - \\"name\\": \\"dialCodeList\\", - \\"type\\": \\"string[] | undefined\\", - \\"description\\": \\"Accepts an array of dial codes (strings) used as options in the dial code selector\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"onDialCodeChange\\": { - \\"name\\": \\"onDialCodeChange\\", - \\"type\\": \\"React.ChangeEventHandler | undefined\\", - \\"description\\": \\"Handles change events for the dial code selector\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"dialCodeRef\\": { - \\"name\\": \\"dialCodeRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"Forwarded ref for access to Dial Code select DOM element\\", - \\"category\\": \\"optionalPhoneNumberFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"countryCodeLabel\\": { - \\"name\\": \\"countryCodeLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets a hidden and accessible label for the dial code selector To be removed with next major version release, please use dialCodeLabel\\", - \\"category\\": \\"CountryCodeFieldProps\\", - \\"isOptional\\": true - }, - \\"countryCodeName\\": { - \\"name\\": \\"countryCodeName\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the name used when handling form submission for the dial code selector To be removed with next major version release, please use dialCodeName\\", - \\"category\\": \\"CountryCodeFieldProps\\", - \\"isOptional\\": true - }, - \\"onCountryCodeChange\\": { - \\"name\\": \\"onCountryCodeChange\\", - \\"type\\": \\"React.ChangeEventHandler | undefined\\", - \\"description\\": \\"Handles change events for the dial code selector To be removed with next major version release, please use onDialCodeChange\\", - \\"category\\": \\"CountryCodeFieldProps\\", - \\"isOptional\\": true - }, - \\"countryCodeRef\\": { - \\"name\\": \\"countryCodeRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"Forwarded ref for access to Country Code select DOM element To be removed with next major version release, please use dialCodeRef\\", - \\"category\\": \\"CountryCodeFieldProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | number | readonly string[] | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "\\"tel\\" | undefined", + "description": " elements of type 'tel' are used to let the user enter and edit a telephone number", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "dialCodeLabel": { + "name": "dialCodeLabel", + "type": "string | undefined", + "description": "Sets a hidden and accessible label for the dial code selector", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "dialCodeName": { + "name": "dialCodeName", + "type": "string | undefined", + "description": "Sets the name used when handling form submission for the dial code selector", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "dialCodeList": { + "name": "dialCodeList", + "type": "string[] | undefined", + "description": "Accepts an array of dial codes (strings) used as options in the dial code selector", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "onDialCodeChange": { + "name": "onDialCodeChange", + "type": "React.ChangeEventHandler | undefined", + "description": "Handles change events for the dial code selector", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "dialCodeRef": { + "name": "dialCodeRef", + "type": "React.Ref | undefined", + "description": "Forwarded ref for access to Dial Code select DOM element", + "category": "optionalPhoneNumberFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "countryCodeLabel": { + "name": "countryCodeLabel", + "type": "string | undefined", + "description": "Sets a hidden and accessible label for the dial code selector To be removed with next major version release, please use dialCodeLabel", + "category": "CountryCodeFieldProps", + "isOptional": true + }, + "countryCodeName": { + "name": "countryCodeName", + "type": "string | undefined", + "description": "Sets the name used when handling form submission for the dial code selector To be removed with next major version release, please use dialCodeName", + "category": "CountryCodeFieldProps", + "isOptional": true + }, + "onCountryCodeChange": { + "name": "onCountryCodeChange", + "type": "React.ChangeEventHandler | undefined", + "description": "Handles change events for the dial code selector To be removed with next major version release, please use onDialCodeChange", + "category": "CountryCodeFieldProps", + "isOptional": true + }, + "countryCodeRef": { + "name": "countryCodeRef", + "type": "React.Ref | undefined", + "description": "Forwarded ref for access to Country Code select DOM element To be removed with next major version release, please use dialCodeRef", + "category": "CountryCodeFieldProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Placeholder\\": { - \\"Placeholder\\": [ + "Placeholder": { + "Placeholder": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isLoaded\\": { - \\"name\\": \\"isLoaded\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If true, the placeholder won't show, if false the placeholder will show. Default: false\\", - \\"category\\": \\"BasePlaceholderProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Controls the display size of placeholder\\", - \\"category\\": \\"BasePlaceholderProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isLoaded": { + "name": "isLoaded", + "type": "boolean | undefined", + "description": "If true, the placeholder won't show, if false the placeholder will show. Default: false", + "category": "BasePlaceholderProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Controls the display size of placeholder", + "category": "BasePlaceholderProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"RadioGroupField\\": { - \\"RadioGroupField\\": [ + "RadioGroupField": { + "RadioGroupField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseRadioGroupFieldProps\\", - \\"isOptional\\": false - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseRadioGroupFieldProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseRadioGroupFieldProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"React.ChangeEventHandler | undefined\\", - \\"description\\": \\"Handle onChange event\\", - \\"category\\": \\"BaseRadioGroupFieldProps\\", - \\"isOptional\\": true - }, - \\"labelPosition\\": { - \\"name\\": \\"labelPosition\\", - \\"type\\": \\"'start' | 'end' | 'top' | 'bottom'\\", - \\"description\\": \\"Position of label in relation to the radio,\\\\ndefault is 'start'\\", - \\"category\\": \\"BaseRadioGroupFieldProps\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string", + "description": "Name of the Fieldset.", + "category": "BaseRadioGroupFieldProps", + "isOptional": false + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseRadioGroupFieldProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseRadioGroupFieldProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "React.ChangeEventHandler | undefined", + "description": "Handle onChange event", + "category": "BaseRadioGroupFieldProps", + "isOptional": true + }, + "labelPosition": { + "name": "labelPosition", + "type": "'start' | 'end' | 'top' | 'bottom'", + "description": "Position of label in relation to the radio,\\ndefault is 'start'", + "category": "BaseRadioGroupFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "legend": { + "name": "legend", + "type": "React.ReactNode", + "description": "Legend is the label for the Fieldset.", + "category": "BaseFieldsetProps", + "isOptional": false + }, + "legendHidden": { + "name": "legendHidden", + "type": "boolean | undefined", + "description": "Visually hides the legend while making it still accessible to screenreaders.", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"outlined\\" | \\"plain\\" | undefined", + "description": "Adds plain or outlined variation to the Fieldset", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the Fieldset", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "form": { + "name": "form", + "type": "string | undefined", + "description": "Form to associate the Fieldset with", + "category": "BaseFieldsetProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type.", + "category": "BaseInputProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"Radio\\": [ + "Radio": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseRadioProps\\", - \\"isOptional\\": false - }, - \\"labelPosition\\": { - \\"name\\": \\"labelPosition\\", - \\"type\\": \\"'start' | 'end' | 'top' | 'bottom'\\", - \\"description\\": \\"Position of label in relation to the radio,\\\\ndefault is 'start'\\", - \\"category\\": \\"BaseRadioProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\" Determines whether field should be disabled. Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseRadioProps", + "isOptional": false + }, + "labelPosition": { + "name": "labelPosition", + "type": "'start' | 'end' | 'top' | 'bottom'", + "description": "Position of label in relation to the radio,\\ndefault is 'start'", + "category": "BaseRadioProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": " Determines whether field should be disabled. Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Rating\\": { - \\"Rating\\": [ + "Rating": { + "Rating": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"emptyColor\\": { - \\"name\\": \\"emptyColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"The CSS color to use on the empty rating icon\\\\nDefault css value is #A2A2A2\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"emptyIcon\\": { - \\"name\\": \\"emptyIcon\\", - \\"type\\": \\"JSX.Element | undefined\\", - \\"description\\": \\"This will override which icon to use as the empty icon. This will only\\\\noverride the empty icon an will create a rating component that uses\\\\ndifferent icons for filled and empty icons.\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"fillColor\\": { - \\"name\\": \\"fillColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"The CSS color to use on the filled rating icon\\\\nDefault css value is #ffb400\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"icon\\": { - \\"name\\": \\"icon\\", - \\"type\\": \\"JSX.Element | undefined\\", - \\"description\\": \\"This will override which icon to use. This will override both\\\\nthe filled and empty icon values unless an empty icon is specified\\\\nwith the emptyIcon prop\\\\nDefault is \\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"maxValue\\": { - \\"name\\": \\"maxValue\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"The max rating integer value\\\\nDefault is 5\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"This will set the icon size of the stars\\\\nDefault css value is medium\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"The value of the rating\\\\nDefault is 0\\", - \\"category\\": \\"RatingOptions\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "emptyColor": { + "name": "emptyColor", + "type": "StyleToken | undefined", + "description": "The CSS color to use on the empty rating icon\\nDefault css value is #A2A2A2", + "category": "RatingOptions", + "isOptional": true + }, + "emptyIcon": { + "name": "emptyIcon", + "type": "JSX.Element | undefined", + "description": "This will override which icon to use as the empty icon. This will only\\noverride the empty icon an will create a rating component that uses\\ndifferent icons for filled and empty icons.", + "category": "RatingOptions", + "isOptional": true + }, + "fillColor": { + "name": "fillColor", + "type": "StyleToken | undefined", + "description": "The CSS color to use on the filled rating icon\\nDefault css value is #ffb400", + "category": "RatingOptions", + "isOptional": true + }, + "icon": { + "name": "icon", + "type": "JSX.Element | undefined", + "description": "This will override which icon to use. This will override both\\nthe filled and empty icon values unless an empty icon is specified\\nwith the emptyIcon prop\\nDefault is ", + "category": "RatingOptions", + "isOptional": true + }, + "maxValue": { + "name": "maxValue", + "type": "number | undefined", + "description": "The max rating integer value\\nDefault is 5", + "category": "RatingOptions", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "This will set the icon size of the stars\\nDefault css value is medium", + "category": "RatingOptions", + "isOptional": true + }, + "value": { + "name": "value", + "type": "number | undefined", + "description": "The value of the rating\\nDefault is 0", + "category": "RatingOptions", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"ScrollView\\": { - \\"ScrollView\\": [ + "ScrollView": { + "ScrollView": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"orientation\\": { - \\"name\\": \\"orientation\\", - \\"type\\": \\"'horizontal' | 'vertical'\\", - \\"description\\": \\"This prop has been deprecated. To get horizontal or vertical scrollbars,\\\\nmake the width or height of the ScrollView component smaller than the content.\\", - \\"category\\": \\"BaseScrollViewProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "orientation": { + "name": "orientation", + "type": "'horizontal' | 'vertical'", + "description": "This prop has been deprecated. To get horizontal or vertical scrollbars,\\nmake the width or height of the ScrollView component smaller than the content.", + "category": "BaseScrollViewProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"SearchField\\": { - \\"SearchField\\": [ + "SearchField": { + "SearchField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the initial value for an uncontrolled search field\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the value for a controlled search field\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"hasSearchButton\\": { - \\"name\\": \\"hasSearchButton\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used to determine whether to render a search button on the right Default: true\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"hasSearchIcon\\": { - \\"name\\": \\"hasSearchIcon\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used to determine whether to render a search icon on the left when there is no search button Default: false\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"onSubmit\\": { - \\"name\\": \\"onSubmit\\", - \\"type\\": \\"((value: string) => void) | undefined\\", - \\"description\\": \\"Handle submission of search field input\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"onClear\\": { - \\"name\\": \\"onClear\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Triggered when search field is cleared\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label Default: true\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"clearButtonLabel\\": { - \\"name\\": \\"clearButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the \`aria-label\` for clear button Default: \\\\\\"Clear search\\\\\\"\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"searchButtonRef\\": { - \\"name\\": \\"searchButtonRef\\", - \\"type\\": \\"React.Ref | undefined\\", - \\"description\\": \\"Provides ref access to search button DOM element\\", - \\"category\\": \\"BaseSearchFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | undefined", + "description": "Set the initial value for an uncontrolled search field", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "Set the value for a controlled search field", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "hasSearchButton": { + "name": "hasSearchButton", + "type": "boolean | undefined", + "description": "Used to determine whether to render a search button on the right Default: true", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "hasSearchIcon": { + "name": "hasSearchIcon", + "type": "boolean | undefined", + "description": "Used to determine whether to render a search icon on the left when there is no search button Default: false", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "onSubmit": { + "name": "onSubmit", + "type": "((value: string) => void) | undefined", + "description": "Handle submission of search field input", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "onClear": { + "name": "onClear", + "type": "(() => void) | undefined", + "description": "Triggered when search field is cleared", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label Default: true", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "clearButtonLabel": { + "name": "clearButtonLabel", + "type": "string | undefined", + "description": "Set the \`aria-label\` for clear button Default: \\"Clear search\\"", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "searchButtonRef": { + "name": "searchButtonRef", + "type": "React.Ref | undefined", + "description": "Provides ref access to search button DOM element", + "category": "BaseSearchFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type", + "category": "TextFieldOptions", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"SelectField\\": { - \\"SelectField\\": [ + "SelectField": { + "SelectField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"options\\": { - \\"name\\": \\"options\\", - \\"type\\": \\"string[] | undefined\\", - \\"description\\": \\"List of option values for select dropdown\\", - \\"category\\": \\"BaseSelectFieldProps\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"A string providing a hint for a user agent's autocomplete feature\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies the name of the control used when submitting form data\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the SelectField’s initial value on render\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Controls the current value when using the SelectField as a controlled component\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the height and font size of the SelectField. Available options are ‘small’, none (default), and ‘large’\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Changes the displayed style of the SelectField. Options include ‘quiet’ and none (default)\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"icon\\": { - \\"name\\": \\"icon\\", - \\"type\\": \\"React.ReactElement> | undefined\\", - \\"description\\": \\"Changes the icon used to expand and collapse the SelectField\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"iconColor\\": { - \\"name\\": \\"iconColor\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Controls the color of the icon used to expand and collapse the SelectField\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Sets the text that appears in the form control when it has no value set\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Marks the SelectField as having a validation error\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"isMultiple\\": { - \\"name\\": \\"isMultiple\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"A Boolean attribute indicating that multiple options can be selected at once\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"selectSize\\": { - \\"name\\": \\"selectSize\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the number of visible options in a drop-down list\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"A Boolean attribute indicating that an option with a non-empty string value must be selected\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"React.ChangeEventHandler | undefined\\", - \\"description\\": \\"Handles changes to the current value when using the SelectField as a controlled component\\", - \\"category\\": \\"BaseSelectProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "options": { + "name": "options", + "type": "string[] | undefined", + "description": "List of option values for select dropdown", + "category": "BaseSelectFieldProps", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "A string providing a hint for a user agent's autocomplete feature", + "category": "BaseSelectProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Specifies the name of the control used when submitting form data", + "category": "BaseSelectProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | undefined", + "description": "Sets the SelectField’s initial value on render", + "category": "BaseSelectProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "Controls the current value when using the SelectField as a controlled component", + "category": "BaseSelectProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the height and font size of the SelectField. Available options are ‘small’, none (default), and ‘large’", + "category": "BaseSelectProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Changes the displayed style of the SelectField. Options include ‘quiet’ and none (default)", + "category": "BaseSelectProps", + "isOptional": true + }, + "icon": { + "name": "icon", + "type": "React.ReactElement> | undefined", + "description": "Changes the icon used to expand and collapse the SelectField", + "category": "BaseSelectProps", + "isOptional": true + }, + "iconColor": { + "name": "iconColor", + "type": "string | undefined", + "description": "Controls the color of the icon used to expand and collapse the SelectField", + "category": "BaseSelectProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Sets the text that appears in the form control when it has no value set", + "category": "BaseSelectProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Marks the SelectField as having a validation error", + "category": "BaseSelectProps", + "isOptional": true + }, + "isMultiple": { + "name": "isMultiple", + "type": "boolean | undefined", + "description": "A Boolean attribute indicating that multiple options can be selected at once", + "category": "BaseSelectProps", + "isOptional": true + }, + "selectSize": { + "name": "selectSize", + "type": "number | undefined", + "description": "Sets the number of visible options in a drop-down list", + "category": "BaseSelectProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "A Boolean attribute indicating that an option with a non-empty string value must be selected", + "category": "BaseSelectProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "React.ChangeEventHandler | undefined", + "description": "Handles changes to the current value when using the SelectField as a controlled component", + "category": "BaseSelectProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"SliderField\\": { - \\"SliderField\\": [ + "SliderField": { + "SliderField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"min\\": { - \\"name\\": \\"min\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the minimum value for the SliderField range\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"max\\": { - \\"name\\": \\"max\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the maximum value for the SliderField range\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"step\\": { - \\"name\\": \\"step\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Controls the interval between selectable values\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"orientation\\": { - \\"name\\": \\"orientation\\", - \\"type\\": \\"'horizontal' | 'vertical'\\", - \\"description\\": \\"Changes the orientation of the SliderField to either 'vertical' or 'horizontal' (default)\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"isValueHidden\\": { - \\"name\\": \\"isValueHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"When \`true\`, hides the numerical value to the right of the label\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"trackSize\\": { - \\"name\\": \\"trackSize\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Controls the width of the track and size of the thumb. Options include 'small', none (default), and 'large'\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"emptyTrackColor\\": { - \\"name\\": \\"emptyTrackColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"Applies to the empty part of the SliderField track\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"filledTrackColor\\": { - \\"name\\": \\"filledTrackColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"Applies to the filled-in part of the SliderField track\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"thumbColor\\": { - \\"name\\": \\"thumbColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"Applies to the thumb component that users can slide\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Controls the current value when using the SliderField as a controlled component\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the SliderField’s initial value on render\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"formatValue\\": { - \\"name\\": \\"formatValue\\", - \\"type\\": \\"((value: number) => React.ReactNode) | undefined\\", - \\"description\\": \\"Use to format how the value gets rendered\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"((value: number) => void) | undefined\\", - \\"description\\": \\"Handles changes to the current value when using the SliderField as a controlled component\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"dir\\": { - \\"name\\": \\"dir\\", - \\"type\\": \\"'ltr' | 'rtl'\\", - \\"description\\": \\"sets the direction of the slider. See: [Radix docs](https://www.radix-ui.com/docs/primitives/components/slider)\\", - \\"category\\": \\"BaseSliderFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "min": { + "name": "min", + "type": "number | undefined", + "description": "Sets the minimum value for the SliderField range", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "max": { + "name": "max", + "type": "number | undefined", + "description": "Sets the maximum value for the SliderField range", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "step": { + "name": "step", + "type": "number | undefined", + "description": "Controls the interval between selectable values", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "orientation": { + "name": "orientation", + "type": "'horizontal' | 'vertical'", + "description": "Changes the orientation of the SliderField to either 'vertical' or 'horizontal' (default)", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "isValueHidden": { + "name": "isValueHidden", + "type": "boolean | undefined", + "description": "When \`true\`, hides the numerical value to the right of the label", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "trackSize": { + "name": "trackSize", + "type": "string | undefined", + "description": "Controls the width of the track and size of the thumb. Options include 'small', none (default), and 'large'", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "emptyTrackColor": { + "name": "emptyTrackColor", + "type": "StyleToken | undefined", + "description": "Applies to the empty part of the SliderField track", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "filledTrackColor": { + "name": "filledTrackColor", + "type": "StyleToken | undefined", + "description": "Applies to the filled-in part of the SliderField track", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "thumbColor": { + "name": "thumbColor", + "type": "StyleToken | undefined", + "description": "Applies to the thumb component that users can slide", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "number | undefined", + "description": "Controls the current value when using the SliderField as a controlled component", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "number | undefined", + "description": "Sets the SliderField’s initial value on render", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "formatValue": { + "name": "formatValue", + "type": "((value: number) => React.ReactNode) | undefined", + "description": "Use to format how the value gets rendered", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "((value: number) => void) | undefined", + "description": "Handles changes to the current value when using the SliderField as a controlled component", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "dir": { + "name": "dir", + "type": "'ltr' | 'rtl'", + "description": "sets the direction of the slider. See: [Radix docs](https://www.radix-ui.com/docs/primitives/components/slider)", + "category": "BaseSliderFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type", + "category": "TextFieldOptions", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"'ltr' | 'rtl'\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "'ltr' | 'rtl'", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"StepperField\\": { - \\"StepperField\\": [ + "StepperField": { + "StepperField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"\\\\\\"number\\\\\\" | undefined\\", - \\"description\\": \\" elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"min\\": { - \\"name\\": \\"min\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the minimum possible value\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"max\\": { - \\"name\\": \\"max\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the maximum possible value\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"step\\": { - \\"name\\": \\"step\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Controls the interval between selectable values\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Controls the current value when using the StepperField as a controlled component\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Sets the StepperField’s initial value on render\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"increaseButtonLabel\\": { - \\"name\\": \\"increaseButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the label text for increase button.\\\\nThis will be used to construct its the \`aria-label\`. e.g., \\\\\\"Increase to 2\\\\\\" if the current step is 1. Default: \\\\\\"Increase to\\\\\\"\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"decreaseButtonLabel\\": { - \\"name\\": \\"decreaseButtonLabel\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Set the label text for decrease button.\\\\nThis will be used to construct its the \`aria-label\`. e.g., \\\\\\"Decrease to 0\\\\\\" if the current step is 1. Default: \\\\\\"Decrease to\\\\\\"\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"onStepChange\\": { - \\"name\\": \\"onStepChange\\", - \\"type\\": \\"((value: number) => void) | undefined\\", - \\"description\\": \\"Event handler called with the current step value when it is updated\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"onIncrease\\": { - \\"name\\": \\"onIncrease\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Handles the event when a user clicks on the increment button\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"onDecrease\\": { - \\"name\\": \\"onDecrease\\", - \\"type\\": \\"(() => void) | undefined\\", - \\"description\\": \\"Handles the event when a user clicks on the decrement button\\", - \\"category\\": \\"BaseStepperFieldProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "\\"number\\" | undefined", + "description": " elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "min": { + "name": "min", + "type": "number | undefined", + "description": "Sets the minimum possible value", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "max": { + "name": "max", + "type": "number | undefined", + "description": "Sets the maximum possible value", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "step": { + "name": "step", + "type": "number | undefined", + "description": "Controls the interval between selectable values", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "number | undefined", + "description": "Controls the current value when using the StepperField as a controlled component", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "number | undefined", + "description": "Sets the StepperField’s initial value on render", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "increaseButtonLabel": { + "name": "increaseButtonLabel", + "type": "string | undefined", + "description": "Set the label text for increase button.\\nThis will be used to construct its the \`aria-label\`. e.g., \\"Increase to 2\\" if the current step is 1. Default: \\"Increase to\\"", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "decreaseButtonLabel": { + "name": "decreaseButtonLabel", + "type": "string | undefined", + "description": "Set the label text for decrease button.\\nThis will be used to construct its the \`aria-label\`. e.g., \\"Decrease to 0\\" if the current step is 1. Default: \\"Decrease to\\"", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "onStepChange": { + "name": "onStepChange", + "type": "((value: number) => void) | undefined", + "description": "Event handler called with the current step value when it is updated", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "onIncrease": { + "name": "onIncrease", + "type": "(() => void) | undefined", + "description": "Handles the event when a user clicks on the increment button", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "onDecrease": { + "name": "onDecrease", + "type": "(() => void) | undefined", + "description": "Handles the event when a user clicks on the decrement button", + "category": "BaseStepperFieldProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"SwitchField\\": { - \\"SwitchField\\": [ + "SwitchField": { + "SwitchField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Use this to provide a default checked value for an uncontrolled SwitchField\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"isChecked\\": { - \\"name\\": \\"isChecked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If isChecked is provided, this will be a controlled SwitchField\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"This property will set the switch to disabled\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"isLabelHidden\\": { - \\"name\\": \\"isLabelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide the label, but the associated label text will still be required for accessibility.\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": false - }, - \\"labelPosition\\": { - \\"name\\": \\"labelPosition\\", - \\"type\\": \\"'start' | 'end' | 'top' | 'bottom'\\", - \\"description\\": \\"Position of label in relation to the switchfield\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"This prop adds a name attribute to the input element\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"React.ChangeEventHandler | undefined\\", - \\"description\\": \\"Assign an onChange event to the switch field\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"This prop adjusts the size of the switch component\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"thumbColor\\": { - \\"name\\": \\"thumbColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"This property will change the color of the thumb in the switch component\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"trackColor\\": { - \\"name\\": \\"trackColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"This property will change the color of the track in the switch component\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"trackCheckedColor\\": { - \\"name\\": \\"trackCheckedColor\\", - \\"type\\": \\"StyleToken | undefined\\", - \\"description\\": \\"This property will change the color of the checked track in the switch component\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | number | undefined\\", - \\"description\\": \\"This is the value of the switch input and will be submitted with a form submission\\", - \\"category\\": \\"BaseSwitchFieldProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint | undefined\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode | undefined\\", - \\"description\\": \\" Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\\\\\"text\\\\\\"\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute | undefined\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"BaseInputProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean | undefined", + "description": "Use this to provide a default checked value for an uncontrolled SwitchField", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "isChecked": { + "name": "isChecked", + "type": "boolean | undefined", + "description": "If isChecked is provided, this will be a controlled SwitchField", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "This property will set the switch to disabled", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "isLabelHidden": { + "name": "isLabelHidden", + "type": "boolean | undefined", + "description": "Visually hide the label, but the associated label text will still be required for accessibility.", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseSwitchFieldProps", + "isOptional": false + }, + "labelPosition": { + "name": "labelPosition", + "type": "'start' | 'end' | 'top' | 'bottom'", + "description": "Position of label in relation to the switchfield", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "This prop adds a name attribute to the input element", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "React.ChangeEventHandler | undefined", + "description": "Assign an onChange event to the switch field", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "This prop adjusts the size of the switch component", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "thumbColor": { + "name": "thumbColor", + "type": "StyleToken | undefined", + "description": "This property will change the color of the thumb in the switch component", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "trackColor": { + "name": "trackColor", + "type": "StyleToken | undefined", + "description": "This property will change the color of the track in the switch component", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "trackCheckedColor": { + "name": "trackCheckedColor", + "type": "StyleToken | undefined", + "description": "This property will change the color of the checked track in the switch component", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | number | undefined", + "description": "This is the value of the switch input and will be submitted with a form submission", + "category": "BaseSwitchFieldProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseInputProps", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean | undefined", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "BaseInputProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseInputProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseInputProps", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint | undefined", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "BaseInputProps", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode | undefined", + "description": " Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: \\"text\\"", + "category": "BaseInputProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseInputProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseInputProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "BaseInputProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute | undefined", + "description": "Input field type.", + "category": "BaseInputProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants.", + "category": "BaseInputProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Table\\": { - \\"Table\\": [ + "Table": { + "Table": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"caption\\": { - \\"name\\": \\"caption\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Optional caption which serves as an accessible title/caption for\\\\nthe table.\\", - \\"category\\": \\"BaseTableProps\\", - \\"isOptional\\": true - }, - \\"highlightOnHover\\": { - \\"name\\": \\"highlightOnHover\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If set to true, will highlight a table row on hover. Default is false.\\", - \\"category\\": \\"BaseTableProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Affects font size and padding. Default is in between 'small' and 'large'.\\", - \\"category\\": \\"BaseTableProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"'bordered' | 'striped'\\", - \\"description\\": \\"Sets a supported style variation. Default is no specific variation.\\", - \\"category\\": \\"BaseTableProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "caption": { + "name": "caption", + "type": "React.ReactNode", + "description": "Optional caption which serves as an accessible title/caption for\\nthe table.", + "category": "BaseTableProps", + "isOptional": true + }, + "highlightOnHover": { + "name": "highlightOnHover", + "type": "boolean | undefined", + "description": "If set to true, will highlight a table row on hover. Default is false.", + "category": "BaseTableProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Affects font size and padding. Default is in between 'small' and 'large'.", + "category": "BaseTableProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "'bordered' | 'striped'", + "description": "Sets a supported style variation. Default is no specific variation.", + "category": "BaseTableProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TableBody\\": [ + "TableBody": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TableCell\\": [ + "TableCell": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"colspan\\": { - \\"name\\": \\"colspan\\", - \\"type\\": \\"Pick, \\\\\\"colSpan\\\\\\"> | undefined\\", - \\"description\\": \\"Defines the number of columns spanned by a cell within a \\", - \\"category\\": \\"BaseTableCellProps\\", - \\"isOptional\\": true - }, - \\"rowspan\\": { - \\"name\\": \\"rowspan\\", - \\"type\\": \\"Pick, \\\\\\"rowSpan\\\\\\"> | undefined\\", - \\"description\\": \\"Defines the number of rows spanned by a cell within a
\\", - \\"category\\": \\"BaseTableCellProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "colspan": { + "name": "colspan", + "type": "Pick, \\"colSpan\\"> | undefined", + "description": "Defines the number of columns spanned by a cell within a
", + "category": "BaseTableCellProps", + "isOptional": true + }, + "rowspan": { + "name": "rowspan", + "type": "Pick, \\"rowSpan\\"> | undefined", + "description": "Defines the number of rows spanned by a cell within a
", + "category": "BaseTableCellProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TableFoot\\": [ + "TableFoot": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TableHead\\": [ + "TableHead": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TableRow\\": [ + "TableRow": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Tabs\\": { - \\"Tabs\\": [ + "Tabs": { + "Tabs": [ + { + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + } + } + }, + { + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true + } + } + } + ], + "Tabs.Container": [ + { + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + } + } + }, + { + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true + } + } + } + ], + "Tabs.Item": [ + { + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + } + } + }, + { + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true + } + } + } + ], + "Tabs.List": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"The Tabs component only accepts TabItem components as children.\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": false - }, - \\"defaultIndex\\": { - \\"name\\": \\"defaultIndex\\", - \\"type\\": \\"string | number | undefined\\", - \\"description\\": \\"Change which Tab content is initially displayed. Pass in the index of the Tab you wish to show. The default is index 0 (the first tab).\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": true - }, - \\"currentIndex\\": { - \\"name\\": \\"currentIndex\\", - \\"type\\": \\"string | number | undefined\\", - \\"description\\": \\"The controlled index of the currently selected tab. This should be used with\\\\n\`onChange\` as well to make the component controlled.\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"((value: string | number) => void) | undefined\\", - \\"description\\": \\"For controlled usage, use the onChange event to listen to when a tab is clicked\\\\nand update the \`currentIndex\` accordingly. The index of the tab clicked is passed\\\\nto onChange.\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": true - }, - \\"spacing\\": { - \\"name\\": \\"spacing\\", - \\"type\\": \\"'equal' | 'relative'\\", - \\"description\\": \\"Control how Tabs take up the remaining space. Pass \`equal\` to make each tab take up the same amount of space,\\\\nand \`relative\` to make each tab take up space relative to the size of its title.\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": true - }, - \\"indicatorPosition\\": { - \\"name\\": \\"indicatorPosition\\", - \\"type\\": \\"\\\\\\"bottom\\\\\\" | \\\\\\"top\\\\\\" | undefined\\", - \\"description\\": \\"Sets the border and indicator of the tabs to be the top or bottom.\\", - \\"category\\": \\"BaseTabsProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"TabItem\\": [ + "Tabs.Panel": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"title\\": { - \\"name\\": \\"title\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Change the title corresponding with each Tab's content panel.\\", - \\"category\\": \\"BaseTabItemProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Make a Tab not clickable and its content not visible to the user. Defaults to false (i.e., visible).\\", - \\"category\\": \\"BaseTabItemProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Accepts any number of TabItem components\\", - \\"category\\": \\"BaseTabItemProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"Text\\": { - \\"Text\\": [ + "Text": { + "Text": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'secondary'\\\\n | 'tertiary'\\\\n | 'error'\\\\n | 'warning'\\\\n | 'info'\\\\n | 'success'\\", - \\"description\\": \\"This should be the primary way to handle different styles of text. Lower-level\\\\ntext styling attributes like color can be set directly, that should be more of an\\\\nescape hatch.\\", - \\"category\\": \\"BaseTextProps\\", - \\"isOptional\\": true - }, - \\"isTruncated\\": { - \\"name\\": \\"isTruncated\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"This attribute will be used to indicate if the text component should truncate text\\\\nthat exceeds the width of the text element. Truncated text will render an ellipsis.\\", - \\"category\\": \\"BaseTextProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'secondary'\\n | 'tertiary'\\n | 'error'\\n | 'warning'\\n | 'info'\\n | 'success'", + "description": "This should be the primary way to handle different styles of text. Lower-level\\ntext styling attributes like color can be set directly, that should be more of an\\nescape hatch.", + "category": "BaseTextProps", + "isOptional": true + }, + "isTruncated": { + "name": "isTruncated", + "type": "boolean | undefined", + "description": "This attribute will be used to indicate if the text component should truncate text\\nthat exceeds the width of the text element. Truncated text will render an ellipsis.", + "category": "BaseTextProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"TextAreaField\\": { - \\"TextAreaField\\": [ + "TextAreaField": { + "TextAreaField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"(BaseStyleProps & TextAreaStyleProps) | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseTextAreaFieldProps\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\" See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"maxLength\\": { - \\"name\\": \\"maxLength\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Text contents maximum length.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Placeholder text shown when field is empty\\\\nAccessibility tip: avoid putting important instructions for\\\\nfilling out the TextField in the placeholder. Use descriptiveText\\\\nfor important instructions.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"rows\\": { - \\"name\\": \\"rows\\", - \\"type\\": \\"number | undefined\\", - \\"description\\": \\"Controls height based on number of rows of text to display.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | number | readonly string[] | undefined\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"\\\\\\"quiet\\\\\\" | undefined\\", - \\"description\\": \\"Variants\\", - \\"category\\": \\"BaseTextAreaProps\\", - \\"isOptional\\": true - }, - \\"resize\\": { - \\"name\\": \\"resize\\", - \\"type\\": \\"Property.Resize | undefined\\", - \\"description\\": \\"Defines if (and how) an element is resizable by the user\\", - \\"category\\": \\"TextAreaStyleProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "(BaseStyleProps & TextAreaStyleProps) | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseTextAreaFieldProps", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string | undefined", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "string | number | readonly string[] | undefined", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean | undefined", + "description": "Indicates that Field is in error state.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean | undefined", + "description": " See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean | undefined", + "description": "Whether field should be marked required.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "maxLength": { + "name": "maxLength", + "type": "number | undefined", + "description": "Text contents maximum length.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string | undefined", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string | undefined", + "description": "Placeholder text shown when field is empty\\nAccessibility tip: avoid putting important instructions for\\nfilling out the TextField in the placeholder. Use descriptiveText\\nfor important instructions.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "rows": { + "name": "rows", + "type": "number | undefined", + "description": "Controls height based on number of rows of text to display.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the font-size, padding, and height of the field.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | number | readonly string[] | undefined", + "description": "If value is provided, this will be a controlled field.", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "\\"quiet\\" | undefined", + "description": "Variants", + "category": "BaseTextAreaProps", + "isOptional": true + }, + "resize": { + "name": "resize", + "type": "Property.Resize | undefined", + "description": "Defines if (and how) an element is resizable by the user", + "category": "TextAreaStyleProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"TextField\\": { - \\"TextField\\": [ + "TextField": { + "TextField": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"outerEndComponent\\": { - \\"name\\": \\"outerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show after input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"outerStartComponent\\": { - \\"name\\": \\"outerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Component(s) to show before input\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerStartComponent\\": { - \\"name\\": \\"innerStartComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at start\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"innerEndComponent\\": { - \\"name\\": \\"innerEndComponent\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"FieldGroupIconButton component to show inside of input at end\\", - \\"category\\": \\"TextFieldOptions\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"React.HTMLInputTypeAttribute\\", - \\"description\\": \\"Input field type.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"descriptiveText\\": { - \\"name\\": \\"descriptiveText\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Provides additional information needed to fill field\\\\n(e.g. password requirements, etc.)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"errorMessage\\": { - \\"name\\": \\"errorMessage\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\" When defined and \`hasError\` is true, show error message\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"label\\": { - \\"name\\": \\"label\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Label text for field (required)\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": false - }, - \\"labelHidden\\": { - \\"name\\": \\"labelHidden\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Visually hide label (not recommended in most cases) Default: false\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"inputStyles\\": { - \\"name\\": \\"inputStyles\\", - \\"type\\": \\"BaseStyleProps | undefined\\", - \\"description\\": \\"Style props to be applied to the input element\\", - \\"category\\": \\"BaseFieldProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Determines whether field should be disabled. Default: false\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"autoComplete\\": { - \\"name\\": \\"autoComplete\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"checked\\": { - \\"name\\": \\"checked\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"If checked is provided, this will be a controlled checkbox or radio.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"defaultChecked\\": { - \\"name\\": \\"defaultChecked\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Use this to initialize an uncontrolled checkbox or radio.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"defaultValue\\": { - \\"name\\": \\"defaultValue\\", - \\"type\\": \\"React.AllHTMLAttributes<'input'>['defaultValue']\\", - \\"description\\": \\"Use this to provide a default value for an uncontrolled field.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"hasError\\": { - \\"name\\": \\"hasError\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Indicates that Field is in error state.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"enterKeyHint\\": { - \\"name\\": \\"enterKeyHint\\", - \\"type\\": \\"EnterKeyHint\\", - \\"description\\": \\"Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"inputMode\\": { - \\"name\\": \\"inputMode\\", - \\"type\\": \\"InputMode\\", - \\"description\\": \\"Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: @default \\\\\\"text\\\\\\"\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"isReadOnly\\": { - \\"name\\": \\"isReadOnly\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"isRequired\\": { - \\"name\\": \\"isRequired\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Whether field should be marked required.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"name\\": { - \\"name\\": \\"name\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Name of the field. Submitted with the form as part of a name/value pair.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"placeholder\\": { - \\"name\\": \\"placeholder\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"InputSizes\\", - \\"description\\": \\"Changes the font-size, padding, and height of the field.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"React.AllHTMLAttributes<'input'>['value']\\", - \\"description\\": \\"If value is provided, this will be a controlled field.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"FieldVariations\\", - \\"description\\": \\"Variants.\\", - \\"category\\": \\"Input\\", - \\"isOptional\\": true - }, - \\"as\\": { - \\"name\\": \\"as\\", - \\"type\\": \\"React.ElementType\\", - \\"description\\": \\"Changes the underlying rendered HTML element\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "outerEndComponent": { + "name": "outerEndComponent", + "type": "React.ReactNode", + "description": "Component(s) to show after input", + "category": "TextFieldOptions", + "isOptional": true + }, + "outerStartComponent": { + "name": "outerStartComponent", + "type": "React.ReactNode", + "description": "Component(s) to show before input", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerStartComponent": { + "name": "innerStartComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at start", + "category": "TextFieldOptions", + "isOptional": true + }, + "innerEndComponent": { + "name": "innerEndComponent", + "type": "React.ReactNode", + "description": "FieldGroupIconButton component to show inside of input at end", + "category": "TextFieldOptions", + "isOptional": true + }, + "type": { + "name": "type", + "type": "React.HTMLInputTypeAttribute", + "description": "Input field type.", + "category": "Input", + "isOptional": true + }, + "descriptiveText": { + "name": "descriptiveText", + "type": "React.ReactNode", + "description": "Provides additional information needed to fill field\\n(e.g. password requirements, etc.)", + "category": "BaseFieldProps", + "isOptional": true + }, + "errorMessage": { + "name": "errorMessage", + "type": "string | undefined", + "description": " When defined and \`hasError\` is true, show error message", + "category": "BaseFieldProps", + "isOptional": true + }, + "label": { + "name": "label", + "type": "React.ReactNode", + "description": "Label text for field (required)", + "category": "BaseFieldProps", + "isOptional": false + }, + "labelHidden": { + "name": "labelHidden", + "type": "boolean | undefined", + "description": "Visually hide label (not recommended in most cases) Default: false", + "category": "BaseFieldProps", + "isOptional": true + }, + "inputStyles": { + "name": "inputStyles", + "type": "BaseStyleProps | undefined", + "description": "Style props to be applied to the input element", + "category": "BaseFieldProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean", + "description": "Determines whether field should be disabled. Default: false", + "category": "Input", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "autoComplete": { + "name": "autoComplete", + "type": "string", + "description": "Specifies permissions for browser UA to autocomplete field. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)", + "category": "Input", + "isOptional": true + }, + "checked": { + "name": "checked", + "type": "boolean", + "description": "If checked is provided, this will be a controlled checkbox or radio.", + "category": "Input", + "isOptional": true + }, + "defaultChecked": { + "name": "defaultChecked", + "type": "boolean", + "description": "Use this to initialize an uncontrolled checkbox or radio.", + "category": "Input", + "isOptional": true + }, + "defaultValue": { + "name": "defaultValue", + "type": "React.AllHTMLAttributes<'input'>['defaultValue']", + "description": "Use this to provide a default value for an uncontrolled field.", + "category": "Input", + "isOptional": true + }, + "hasError": { + "name": "hasError", + "type": "boolean", + "description": "Indicates that Field is in error state.", + "category": "Input", + "isOptional": true + }, + "enterKeyHint": { + "name": "enterKeyHint", + "type": "EnterKeyHint", + "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", + "category": "Input", + "isOptional": true + }, + "inputMode": { + "name": "inputMode", + "type": "InputMode", + "description": "Provides hint for virtual keyboard shown See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) Default: @default \\"text\\"", + "category": "Input", + "isOptional": true + }, + "isReadOnly": { + "name": "isReadOnly", + "type": "boolean", + "description": "Determines whether field should be immutable. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) Default: false", + "category": "Input", + "isOptional": true + }, + "isRequired": { + "name": "isRequired", + "type": "boolean", + "description": "Whether field should be marked required.", + "category": "Input", + "isOptional": true + }, + "name": { + "name": "name", + "type": "string", + "description": "Name of the field. Submitted with the form as part of a name/value pair.", + "category": "Input", + "isOptional": true + }, + "placeholder": { + "name": "placeholder", + "type": "string", + "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.", + "category": "Input", + "isOptional": true + }, + "size": { + "name": "size", + "type": "InputSizes", + "description": "Changes the font-size, padding, and height of the field.", + "category": "Input", + "isOptional": true + }, + "value": { + "name": "value", + "type": "React.AllHTMLAttributes<'input'>['value']", + "description": "If value is provided, this will be a controlled field.", + "category": "Input", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "FieldVariations", + "description": "Variants.", + "category": "Input", + "isOptional": true + }, + "as": { + "name": "as", + "type": "React.ElementType", + "description": "Changes the underlying rendered HTML element", + "category": "BaseComponentProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"ToggleButton\\": { - \\"ToggleButton\\": [ + "ToggleButton": { + "ToggleButton": [ { - \\"Main\\": { - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Controls the selected state of the ToggleButton\\", - \\"category\\": \\"BaseToggleButtonProps\\", - \\"isOptional\\": true - }, - \\"isPressed\\": { - \\"name\\": \\"isPressed\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Controls the \`isPressed\` state of the ToggleButton when using it as a controlled component\\", - \\"category\\": \\"BaseToggleButtonProps\\", - \\"isOptional\\": true - }, - \\"defaultPressed\\": { - \\"name\\": \\"defaultPressed\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"When \`true\`, sets the \`isPressed\` state of the ToggleButton to \`true\` on initial render\\", - \\"category\\": \\"BaseToggleButtonProps\\", - \\"isOptional\\": true - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"((value: string | undefined) => void) | undefined\\", - \\"description\\": \\"Handles changes to the current value when using the ToggleButton as a controlled component\\", - \\"category\\": \\"BaseToggleButtonProps\\", - \\"isOptional\\": true - }, - \\"isLoading\\": { - \\"name\\": \\"isLoading\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will show a spinner.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will be disabled.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"onClick\\": { - \\"name\\": \\"onClick\\", - \\"type\\": \\"React.MouseEventHandler | undefined\\", - \\"description\\": \\"Button click event handler\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"type\\": { - \\"name\\": \\"type\\", - \\"type\\": \\"'button' | 'reset' | 'submit'\\", - \\"description\\": \\"Changes the button type Default: \\\\\\"button\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the button. Default: \\\\\\"medium\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\", - \\"description\\": \\"Changes the visual weight of the button.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"isFullWidth\\": { - \\"name\\": \\"isFullWidth\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"If \`true\`, the button will take up the full width of its container.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"loadingText\\": { - \\"name\\": \\"loadingText\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"The label to show in the button when \`loading\` is true\\\\nIf no text is passed, it only shows the spinner\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | undefined", + "description": "Controls the selected state of the ToggleButton", + "category": "BaseToggleButtonProps", + "isOptional": true + }, + "isPressed": { + "name": "isPressed", + "type": "boolean | undefined", + "description": "Controls the \`isPressed\` state of the ToggleButton when using it as a controlled component", + "category": "BaseToggleButtonProps", + "isOptional": true + }, + "defaultPressed": { + "name": "defaultPressed", + "type": "boolean | undefined", + "description": "When \`true\`, sets the \`isPressed\` state of the ToggleButton to \`true\` on initial render", + "category": "BaseToggleButtonProps", + "isOptional": true + }, + "onChange": { + "name": "onChange", + "type": "((value: string | undefined) => void) | undefined", + "description": "Handles changes to the current value when using the ToggleButton as a controlled component", + "category": "BaseToggleButtonProps", + "isOptional": true + }, + "isLoading": { + "name": "isLoading", + "type": "boolean | undefined", + "description": "If \`true\`, the button will show a spinner.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "If \`true\`, the button will be disabled.", + "category": "BaseButtonProps", + "isOptional": true + }, + "onClick": { + "name": "onClick", + "type": "React.MouseEventHandler | undefined", + "description": "Button click event handler", + "category": "BaseButtonProps", + "isOptional": true + }, + "type": { + "name": "type", + "type": "'button' | 'reset' | 'submit'", + "description": "Changes the button type Default: \\"button\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the button. Default: \\"medium\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'link'\\n | 'menu'\\n | 'warning'\\n | 'destructive'", + "description": "Changes the visual weight of the button.", + "category": "BaseButtonProps", + "isOptional": true + }, + "isFullWidth": { + "name": "isFullWidth", + "type": "boolean | undefined", + "description": "If \`true\`, the button will take up the full width of its container.", + "category": "BaseButtonProps", + "isOptional": true + }, + "loadingText": { + "name": "loadingText", + "type": "string | undefined", + "description": "The label to show in the button when \`loading\` is true\\nIf no text is passed, it only shows the spinner", + "category": "BaseButtonProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ], - \\"ToggleButtonGroup\\": [ + "ToggleButtonGroup": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Accepts any number of ToggleButton components\\", - \\"category\\": \\"BaseToggleButtonGroupProps\\", - \\"isOptional\\": false - }, - \\"isExclusive\\": { - \\"name\\": \\"isExclusive\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"When \`true\`, only allows one ToggleButton to be pressed at a time within a ToggleButtonGroup\\", - \\"category\\": \\"BaseToggleButtonGroupProps\\", - \\"isOptional\\": true - }, - \\"isSelectionRequired\\": { - \\"name\\": \\"isSelectionRequired\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Used when at least one ToggleButton needs to be currently pressed\\", - \\"category\\": \\"BaseToggleButtonGroupProps\\", - \\"isOptional\\": true - }, - \\"value\\": { - \\"name\\": \\"value\\", - \\"type\\": \\"string | string[]\\", - \\"description\\": \\"Controls which of its ToggleButton children are currently selected\\", - \\"category\\": \\"BaseToggleButtonGroupProps\\", - \\"isOptional\\": false - }, - \\"onChange\\": { - \\"name\\": \\"onChange\\", - \\"type\\": \\"(value: string | (string | undefined)[] | undefined) => void\\", - \\"description\\": \\"Handles changes to the current value when using the ToggleButtonGroup as a controlled component\\", - \\"category\\": \\"BaseToggleButtonGroupProps\\", - \\"isOptional\\": false - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"size\\": { - \\"name\\": \\"size\\", - \\"type\\": \\"'small' | 'large'\\", - \\"description\\": \\"Changes the size of the button. Default: \\\\\\"medium\\\\\\"\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true - }, - \\"variation\\": { - \\"name\\": \\"variation\\", - \\"type\\": \\"| 'primary'\\\\n | 'link'\\\\n | 'menu'\\\\n | 'warning'\\\\n | 'destructive'\\", - \\"description\\": \\"Changes the visual weight of the button.\\", - \\"category\\": \\"BaseButtonProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Accepts any number of ToggleButton components", + "category": "BaseToggleButtonGroupProps", + "isOptional": false + }, + "isExclusive": { + "name": "isExclusive", + "type": "boolean | undefined", + "description": "When \`true\`, only allows one ToggleButton to be pressed at a time within a ToggleButtonGroup", + "category": "BaseToggleButtonGroupProps", + "isOptional": true + }, + "isSelectionRequired": { + "name": "isSelectionRequired", + "type": "boolean | undefined", + "description": "Used when at least one ToggleButton needs to be currently pressed", + "category": "BaseToggleButtonGroupProps", + "isOptional": true + }, + "value": { + "name": "value", + "type": "string | string[]", + "description": "Controls which of its ToggleButton children are currently selected", + "category": "BaseToggleButtonGroupProps", + "isOptional": false + }, + "onChange": { + "name": "onChange", + "type": "(value: string | (string | undefined)[] | undefined) => void", + "description": "Handles changes to the current value when using the ToggleButtonGroup as a controlled component", + "category": "BaseToggleButtonGroupProps", + "isOptional": false + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "size": { + "name": "size", + "type": "'small' | 'large'", + "description": "Changes the size of the button. Default: \\"medium\\"", + "category": "BaseButtonProps", + "isOptional": true + }, + "variation": { + "name": "variation", + "type": "| 'primary'\\n | 'link'\\n | 'menu'\\n | 'warning'\\n | 'destructive'", + "description": "Changes the visual weight of the button.", + "category": "BaseButtonProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>> | undefined\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"CSSLayoutStyleProps\\", - \\"isOptional\\": true - }, - \\"direction\\": { - \\"name\\": \\"direction\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets how flex items are placed in the flex container defining the main axis\\\\nand the direction (normal or reversed). (maps to flex-direction CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"wrap\\": { - \\"name\\": \\"wrap\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"The flexWrap property is set on containers and it controls what happens when\\\\nchildren overflow the size of the container along the main axis. By default,\\\\nchildren are forced into a single line (which can shrink elements). If\\\\nwrapping is allowed, items are wrapped into multiple lines along the main\\\\naxis if needed.\\\\n(maps to flex-wrap CSS property)\\", - \\"category\\": \\"FlexContainerStyleProps\\", - \\"isOptional\\": true - }, - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle | undefined", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle | undefined", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle | undefined", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>> | undefined", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "CSSLayoutStyleProps", + "isOptional": true + }, + "direction": { + "name": "direction", + "type": "ResponsiveStyle | undefined", + "description": "Sets how flex items are placed in the flex container defining the main axis\\nand the direction (normal or reversed). (maps to flex-direction CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "wrap": { + "name": "wrap", + "type": "ResponsiveStyle | undefined", + "description": "The flexWrap property is set on containers and it controls what happens when\\nchildren overflow the size of the container along the main axis. By default,\\nchildren are forced into a single line (which can shrink elements). If\\nwrapping is allowed, items are wrapped into multiple lines along the main\\naxis if needed.\\n(maps to flex-wrap CSS property)", + "category": "FlexContainerStyleProps", + "isOptional": true + }, + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"View\\": { - \\"View\\": [ + "View": { + "View": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\n https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"as\\": { - \\"name\\": \\"as\\", - \\"type\\": \\"React.ElementType\\", - \\"description\\": \\"Changes the underlying rendered HTML element\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"ariaLabel\\": { - \\"name\\": \\"ariaLabel\\", - \\"type\\": \\"AriaAttributes['aria-label']\\", - \\"description\\": \\"Defines a string value that labels an interactive element for accessibility\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"ariaValuetext\\": { - \\"name\\": \\"ariaValuetext\\", - \\"type\\": \\"AriaAttributes['aria-valuetext']\\", - \\"description\\": \\"Defines the human readable text alternative of \`aria-valuenow\` for a range widget\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"role\\": { - \\"name\\": \\"role\\", - \\"type\\": \\"React.AriaRole\\", - \\"description\\": \\"Provides semantic meaning to content, allowing screen readers to support interaction in a way that is consistent with user expectations\\", - \\"category\\": \\"Base\\", - \\"isOptional\\": true - }, - \\"base\\": { - \\"name\\": \\"base\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"small\\": { - \\"name\\": \\"small\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"medium\\": { - \\"name\\": \\"medium\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"large\\": { - \\"name\\": \\"large\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"xl\\": { - \\"name\\": \\"xl\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"xxl\\": { - \\"name\\": \\"xxl\\", - \\"type\\": \\"PropertyType\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"alignSelf\\": { - \\"name\\": \\"alignSelf\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. See: @see[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"backgroundColor\\": { - \\"name\\": \\"backgroundColor\\", - \\"type\\": \\"ResponsiveStyle<\\\\n ColorKeys>\\\\n >\\", - \\"description\\": \\"Sets the background color of an element. See: @see[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"backgroundImage\\": { - \\"name\\": \\"backgroundImage\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets one or more background images on an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"border\\": { - \\"name\\": \\"border\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Shorthand CSS property that sets an element's border-width, border-style, and border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"borderColor\\": { - \\"name\\": \\"borderColor\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that sets an element's border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"borderWidth\\": { - \\"name\\": \\"borderWidth\\", - \\"type\\": \\"ResponsiveStyle<\\\\n BorderWidthKeys>\\\\n >\\", - \\"description\\": \\"Shorthand CSS property that sets an element's border-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"borderStyle\\": { - \\"name\\": \\"borderStyle\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Shorthand CSS property that sets an element's border-style. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"borderRadius\\": { - \\"name\\": \\"borderRadius\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Rounds the corners of an element's outer border edge.\\\\n You can set a single radius to make circular corners, or two radii to make elliptical corners. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"bottom\\": { - \\"name\\": \\"bottom\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Participates in setting the vertical position of a positioned element.\\\\n It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"boxShadow\\": { - \\"name\\": \\"boxShadow\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Adds shadow effects around an element's frame. You can set multiple effects separated by commas.\\\\n A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"color\\": { - \\"name\\": \\"color\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the foreground color value of an element's text and text decorations, and sets the \`currentcolor\` value.\\\\n \`currentcolor\` may be used as an indirect value on other properties and is the default for other color properties, such as border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"display\\": { - \\"name\\": \\"display\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"fontFamily\\": { - \\"name\\": \\"fontFamily\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Specifies a prioritized list of one or more font family names and/or generic family names for the selected element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"fontSize\\": { - \\"name\\": \\"fontSize\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"fontStyle\\": { - \\"name\\": \\"fontStyle\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets whether a font should be styled with a normal, italic, or oblique face from its font-family. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"fontWeight\\": { - \\"name\\": \\"fontWeight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"height\\": { - \\"name\\": \\"height\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"specifies the height of an element. By default, the property defines the height of the content area.\\\\n If box-sizing is set to border-box, however, it instead determines the height of the border area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"left\\": { - \\"name\\": \\"left\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"letterSpacing\\": { - \\"name\\": \\"letterSpacing\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Sets the horizontal spacing behavior between text characters.\\\\n This value is added to the natural spacing between characters while rendering the text. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"lineHeight\\": { - \\"name\\": \\"lineHeight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the height of a line box. It's commonly used to set the distance between lines of text. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"margin\\": { - \\"name\\": \\"margin\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that sets the margin area on all four sides of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginBlock\\": { - \\"name\\": \\"marginBlock\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that defines the logical block start and end margins of an element,\\\\n which maps to physical margins depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginBlockEnd\\": { - \\"name\\": \\"marginBlockEnd\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical block end margin of an element,\\\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginBlockStart\\": { - \\"name\\": \\"marginBlockStart\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical block start margin of an element,\\\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginBottom\\": { - \\"name\\": \\"marginBottom\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the margin area on the bottom of an element.\\\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginInline\\": { - \\"name\\": \\"marginInline\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that defines both the logical inline start and end margins of an element,\\\\n which maps to physical margins depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginInlineEnd\\": { - \\"name\\": \\"marginInlineEnd\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical inline end margin of an element,\\\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginInlineStart\\": { - \\"name\\": \\"marginInlineStart\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical inline start margin of an element,\\\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginLeft\\": { - \\"name\\": \\"marginLeft\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the margin area on the left side of an element.\\\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginRight\\": { - \\"name\\": \\"marginRight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the margin area on the right side of an element.\\\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"marginTop\\": { - \\"name\\": \\"marginTop\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the margin area on the top of an element.\\\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"maxHeight\\": { - \\"name\\": \\"maxHeight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the maximum height of an element.\\\\n It prevents the used value of the height property from becoming larger than the value specified for max-height. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"maxWidth\\": { - \\"name\\": \\"maxWidth\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the maximum width of an element.\\\\n It prevents the used value of the width property from becoming larger than the value specified by max-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"minHeight\\": { - \\"name\\": \\"minHeight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the minimum height of an element.\\\\n It prevents the used value of the height property from becoming smaller than the value specified for min-height. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"minWidth\\": { - \\"name\\": \\"minWidth\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the minimum width of an element.\\\\n It prevents the used value of the width property from becoming smaller than the value specified for min-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"opacity\\": { - \\"name\\": \\"opacity\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the opacity of an element.\\\\n Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"overflow\\": { - \\"name\\": \\"overflow\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Shorthand CSS property that sets the desired behavior for an element's overflow\\\\n — i.e. when an element's content is too big to fit in its block formatting context — in both directions. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"padding\\": { - \\"name\\": \\"padding\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that sets the padding area on all four sides of an element at once. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingBlock\\": { - \\"name\\": \\"paddingBlock\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Shorthand CSS property that defines the logical block start and end padding of an element,\\\\n which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingBlockEnd\\": { - \\"name\\": \\"paddingBlockEnd\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical block end padding of an element,\\\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingBlockStart\\": { - \\"name\\": \\"paddingBlockStart\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical block start padding of an element,\\\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingBottom\\": { - \\"name\\": \\"paddingBottom\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Sets the height of the padding area on the bottom of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingInline\\": { - \\"name\\": \\"paddingInline\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Shorthand CSS property that defines the logical inline start and end padding of an element,\\\\n which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingInlineEnd\\": { - \\"name\\": \\"paddingInlineEnd\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical inline end padding of an element,\\\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingInlineStart\\": { - \\"name\\": \\"paddingInlineStart\\", - \\"type\\": \\"ResponsiveStyle<\\\\n SpaceKeys>\\\\n >\\", - \\"description\\": \\"Defines the logical inline start padding of an element,\\\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingLeft\\": { - \\"name\\": \\"paddingLeft\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the width of the padding area to the left of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingRight\\": { - \\"name\\": \\"paddingRight\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the width of the padding area on the right of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"paddingTop\\": { - \\"name\\": \\"paddingTop\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets the height of the padding area on the top of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"position\\": { - \\"name\\": \\"position\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets how an element is positioned in a document.\\\\n The top, right, bottom, and left properties determine the final location of positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"right\\": { - \\"name\\": \\"right\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"textAlign\\": { - \\"name\\": \\"textAlign\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets the horizontal alignment of the content inside a block element or table-cell box.\\\\n This means it works like vertical-align but in the horizontal direction. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"textDecoration\\": { - \\"name\\": \\"textDecoration\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Shorthand CSS property that sets the appearance of decorative lines on text.\\\\n It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"textTransform\\": { - \\"name\\": \\"textTransform\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Specifies how to capitalize an element's text. It can be used to make text\\\\n appear in all-uppercase or all-lowercase, or with each word capitalized. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"top\\": { - \\"name\\": \\"top\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"transform\\": { - \\"name\\": \\"transform\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"transformOrigin\\": { - \\"name\\": \\"transformOrigin\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets the origin for an element's transformations. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"width\\": { - \\"name\\": \\"width\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Sets an element's width. By default, it sets the width of the content area,\\\\n but if box-sizing is set to border-box, it sets the width of the border area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"whiteSpace\\": { - \\"name\\": \\"whiteSpace\\", - \\"type\\": \\"ResponsiveStyle>\\", - \\"description\\": \\"Sets how white space inside an element is handled. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"alignItems\\": { - \\"name\\": \\"alignItems\\", - \\"type\\": \\"ResponsiveStyle\\", - \\"description\\": \\"Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"alignContent\\": { - \\"name\\": \\"alignContent\\", - \\"type\\": \\"ResponsiveStyle\\", - \\"description\\": \\"Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"justifyContent\\": { - \\"name\\": \\"justifyContent\\", - \\"type\\": \\"ResponsiveStyle\\", - \\"description\\": \\"Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"gap\\": { - \\"name\\": \\"gap\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"columnGap\\": { - \\"name\\": \\"columnGap\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"rowGap\\": { - \\"name\\": \\"rowGap\\", - \\"type\\": \\"ResponsiveStyle>>\\", - \\"description\\": \\"Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true - }, - \\"AllStyleProps\\": { - \\"name\\": \\"AllStyleProps\\", - \\"type\\": \\"extends BaseStyleProps,\\\\n ImageStyleProps,\\\\n FlexContainerStyleProps,\\\\n GridContainerStyleProps,\\\\n TextAreaStyleProps\\", - \\"description\\": \\"\\", - \\"category\\": \\"Style\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string", + "description": "Unique identifier", + "category": "Base", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "Base", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string", + "description": "Additional CSS class name for component", + "category": "Base", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "Base", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean", + "description": "Support for the HTML \`inert\` attribute\\n https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "Base", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true + }, + "as": { + "name": "as", + "type": "React.ElementType", + "description": "Changes the underlying rendered HTML element", + "category": "BaseComponentProps", + "isOptional": true + }, + "ariaLabel": { + "name": "ariaLabel", + "type": "AriaAttributes['aria-label']", + "description": "Defines a string value that labels an interactive element for accessibility", + "category": "Base", + "isOptional": true + }, + "ariaValuetext": { + "name": "ariaValuetext", + "type": "AriaAttributes['aria-valuetext']", + "description": "Defines the human readable text alternative of \`aria-valuenow\` for a range widget", + "category": "Base", + "isOptional": true + }, + "role": { + "name": "role", + "type": "React.AriaRole", + "description": "Provides semantic meaning to content, allowing screen readers to support interaction in a way that is consistent with user expectations", + "category": "Base", + "isOptional": true + }, + "base": { + "name": "base", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "small": { + "name": "small", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "medium": { + "name": "medium", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "large": { + "name": "large", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "xl": { + "name": "xl", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "xxl": { + "name": "xxl", + "type": "PropertyType", + "description": "", + "category": "Style", + "isOptional": true + }, + "alignSelf": { + "name": "alignSelf", + "type": "ResponsiveStyle>", + "description": "Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. See: @see[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)", + "category": "Style", + "isOptional": true + }, + "backgroundColor": { + "name": "backgroundColor", + "type": "ResponsiveStyle<\\n ColorKeys>\\n >", + "description": "Sets the background color of an element. See: @see[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)", + "category": "Style", + "isOptional": true + }, + "backgroundImage": { + "name": "backgroundImage", + "type": "ResponsiveStyle>", + "description": "Sets one or more background images on an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)", + "category": "Style", + "isOptional": true + }, + "border": { + "name": "border", + "type": "ResponsiveStyle>", + "description": "Shorthand CSS property that sets an element's border-width, border-style, and border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border)", + "category": "Style", + "isOptional": true + }, + "borderColor": { + "name": "borderColor", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that sets an element's border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)", + "category": "Style", + "isOptional": true + }, + "borderWidth": { + "name": "borderWidth", + "type": "ResponsiveStyle<\\n BorderWidthKeys>\\n >", + "description": "Shorthand CSS property that sets an element's border-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)", + "category": "Style", + "isOptional": true + }, + "borderStyle": { + "name": "borderStyle", + "type": "ResponsiveStyle>", + "description": "Shorthand CSS property that sets an element's border-style. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)", + "category": "Style", + "isOptional": true + }, + "borderRadius": { + "name": "borderRadius", + "type": "ResponsiveStyle>>", + "description": "Rounds the corners of an element's outer border edge.\\n You can set a single radius to make circular corners, or two radii to make elliptical corners. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)", + "category": "Style", + "isOptional": true + }, + "bottom": { + "name": "bottom", + "type": "ResponsiveStyle>>", + "description": "Participates in setting the vertical position of a positioned element.\\n It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)", + "category": "Style", + "isOptional": true + }, + "boxShadow": { + "name": "boxShadow", + "type": "ResponsiveStyle>>", + "description": "Adds shadow effects around an element's frame. You can set multiple effects separated by commas.\\n A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)", + "category": "Style", + "isOptional": true + }, + "color": { + "name": "color", + "type": "ResponsiveStyle>>", + "description": "Sets the foreground color value of an element's text and text decorations, and sets the \`currentcolor\` value.\\n \`currentcolor\` may be used as an indirect value on other properties and is the default for other color properties, such as border-color. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color)", + "category": "Style", + "isOptional": true + }, + "display": { + "name": "display", + "type": "ResponsiveStyle>", + "description": "Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)", + "category": "Style", + "isOptional": true + }, + "fontFamily": { + "name": "fontFamily", + "type": "ResponsiveStyle>>", + "description": "Specifies a prioritized list of one or more font family names and/or generic family names for the selected element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)", + "category": "Style", + "isOptional": true + }, + "fontSize": { + "name": "fontSize", + "type": "ResponsiveStyle>>", + "description": "Sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)", + "category": "Style", + "isOptional": true + }, + "fontStyle": { + "name": "fontStyle", + "type": "ResponsiveStyle>", + "description": "Sets whether a font should be styled with a normal, italic, or oblique face from its font-family. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)", + "category": "Style", + "isOptional": true + }, + "fontWeight": { + "name": "fontWeight", + "type": "ResponsiveStyle>>", + "description": "Sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)", + "category": "Style", + "isOptional": true + }, + "height": { + "name": "height", + "type": "ResponsiveStyle>>", + "description": "specifies the height of an element. By default, the property defines the height of the content area.\\n If box-sizing is set to border-box, however, it instead determines the height of the border area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height)", + "category": "Style", + "isOptional": true + }, + "left": { + "name": "left", + "type": "ResponsiveStyle>>", + "description": "Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/left)", + "category": "Style", + "isOptional": true + }, + "letterSpacing": { + "name": "letterSpacing", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Sets the horizontal spacing behavior between text characters.\\n This value is added to the natural spacing between characters while rendering the text. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)", + "category": "Style", + "isOptional": true + }, + "lineHeight": { + "name": "lineHeight", + "type": "ResponsiveStyle>>", + "description": "Sets the height of a line box. It's commonly used to set the distance between lines of text. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)", + "category": "Style", + "isOptional": true + }, + "margin": { + "name": "margin", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that sets the margin area on all four sides of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)", + "category": "Style", + "isOptional": true + }, + "marginBlock": { + "name": "marginBlock", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that defines the logical block start and end margins of an element,\\n which maps to physical margins depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block)", + "category": "Style", + "isOptional": true + }, + "marginBlockEnd": { + "name": "marginBlockEnd", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical block end margin of an element,\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end)", + "category": "Style", + "isOptional": true + }, + "marginBlockStart": { + "name": "marginBlockStart", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical block start margin of an element,\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start)", + "category": "Style", + "isOptional": true + }, + "marginBottom": { + "name": "marginBottom", + "type": "ResponsiveStyle>>", + "description": "Sets the margin area on the bottom of an element.\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)", + "category": "Style", + "isOptional": true + }, + "marginInline": { + "name": "marginInline", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that defines both the logical inline start and end margins of an element,\\n which maps to physical margins depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline)", + "category": "Style", + "isOptional": true + }, + "marginInlineEnd": { + "name": "marginInlineEnd", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical inline end margin of an element,\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end)", + "category": "Style", + "isOptional": true + }, + "marginInlineStart": { + "name": "marginInlineStart", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical inline start margin of an element,\\n which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start)", + "category": "Style", + "isOptional": true + }, + "marginLeft": { + "name": "marginLeft", + "type": "ResponsiveStyle>>", + "description": "Sets the margin area on the left side of an element.\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)", + "category": "Style", + "isOptional": true + }, + "marginRight": { + "name": "marginRight", + "type": "ResponsiveStyle>>", + "description": "Sets the margin area on the right side of an element.\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)", + "category": "Style", + "isOptional": true + }, + "marginTop": { + "name": "marginTop", + "type": "ResponsiveStyle>>", + "description": "Sets the margin area on the top of an element.\\n A positive value places it farther from its neighbors, while a negative value places it closer. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)", + "category": "Style", + "isOptional": true + }, + "maxHeight": { + "name": "maxHeight", + "type": "ResponsiveStyle>>", + "description": "Sets the maximum height of an element.\\n It prevents the used value of the height property from becoming larger than the value specified for max-height. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)", + "category": "Style", + "isOptional": true + }, + "maxWidth": { + "name": "maxWidth", + "type": "ResponsiveStyle>>", + "description": "Sets the maximum width of an element.\\n It prevents the used value of the width property from becoming larger than the value specified by max-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)", + "category": "Style", + "isOptional": true + }, + "minHeight": { + "name": "minHeight", + "type": "ResponsiveStyle>>", + "description": "Sets the minimum height of an element.\\n It prevents the used value of the height property from becoming smaller than the value specified for min-height. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)", + "category": "Style", + "isOptional": true + }, + "minWidth": { + "name": "minWidth", + "type": "ResponsiveStyle>>", + "description": "Sets the minimum width of an element.\\n It prevents the used value of the width property from becoming smaller than the value specified for min-width. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)", + "category": "Style", + "isOptional": true + }, + "opacity": { + "name": "opacity", + "type": "ResponsiveStyle>>", + "description": "Sets the opacity of an element.\\n Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)", + "category": "Style", + "isOptional": true + }, + "overflow": { + "name": "overflow", + "type": "ResponsiveStyle>", + "description": "Shorthand CSS property that sets the desired behavior for an element's overflow\\n — i.e. when an element's content is too big to fit in its block formatting context — in both directions. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)", + "category": "Style", + "isOptional": true + }, + "padding": { + "name": "padding", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that sets the padding area on all four sides of an element at once. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)", + "category": "Style", + "isOptional": true + }, + "paddingBlock": { + "name": "paddingBlock", + "type": "ResponsiveStyle>>", + "description": "Shorthand CSS property that defines the logical block start and end padding of an element,\\n which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block)", + "category": "Style", + "isOptional": true + }, + "paddingBlockEnd": { + "name": "paddingBlockEnd", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical block end padding of an element,\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end)", + "category": "Style", + "isOptional": true + }, + "paddingBlockStart": { + "name": "paddingBlockStart", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical block start padding of an element,\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start)", + "category": "Style", + "isOptional": true + }, + "paddingBottom": { + "name": "paddingBottom", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Sets the height of the padding area on the bottom of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom)", + "category": "Style", + "isOptional": true + }, + "paddingInline": { + "name": "paddingInline", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Shorthand CSS property that defines the logical inline start and end padding of an element,\\n which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline)", + "category": "Style", + "isOptional": true + }, + "paddingInlineEnd": { + "name": "paddingInlineEnd", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical inline end padding of an element,\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end)", + "category": "Style", + "isOptional": true + }, + "paddingInlineStart": { + "name": "paddingInlineStart", + "type": "ResponsiveStyle<\\n SpaceKeys>\\n >", + "description": "Defines the logical inline start padding of an element,\\n which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start)", + "category": "Style", + "isOptional": true + }, + "paddingLeft": { + "name": "paddingLeft", + "type": "ResponsiveStyle>>", + "description": "Sets the width of the padding area to the left of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left)", + "category": "Style", + "isOptional": true + }, + "paddingRight": { + "name": "paddingRight", + "type": "ResponsiveStyle>>", + "description": "Sets the width of the padding area on the right of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)", + "category": "Style", + "isOptional": true + }, + "paddingTop": { + "name": "paddingTop", + "type": "ResponsiveStyle>>", + "description": "Sets the height of the padding area on the top of an element. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)", + "category": "Style", + "isOptional": true + }, + "position": { + "name": "position", + "type": "ResponsiveStyle>", + "description": "Sets how an element is positioned in a document.\\n The top, right, bottom, and left properties determine the final location of positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)", + "category": "Style", + "isOptional": true + }, + "right": { + "name": "right", + "type": "ResponsiveStyle>>", + "description": "Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/right)", + "category": "Style", + "isOptional": true + }, + "textAlign": { + "name": "textAlign", + "type": "ResponsiveStyle>", + "description": "Sets the horizontal alignment of the content inside a block element or table-cell box.\\n This means it works like vertical-align but in the horizontal direction. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)", + "category": "Style", + "isOptional": true + }, + "textDecoration": { + "name": "textDecoration", + "type": "ResponsiveStyle>", + "description": "Shorthand CSS property that sets the appearance of decorative lines on text.\\n It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)", + "category": "Style", + "isOptional": true + }, + "textTransform": { + "name": "textTransform", + "type": "ResponsiveStyle>", + "description": "Specifies how to capitalize an element's text. It can be used to make text\\n appear in all-uppercase or all-lowercase, or with each word capitalized. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)", + "category": "Style", + "isOptional": true + }, + "top": { + "name": "top", + "type": "ResponsiveStyle>>", + "description": "Participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top)", + "category": "Style", + "isOptional": true + }, + "transform": { + "name": "transform", + "type": "ResponsiveStyle>>", + "description": "Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)", + "category": "Style", + "isOptional": true + }, + "transformOrigin": { + "name": "transformOrigin", + "type": "ResponsiveStyle>", + "description": "Sets the origin for an element's transformations. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)", + "category": "Style", + "isOptional": true + }, + "width": { + "name": "width", + "type": "ResponsiveStyle>>", + "description": "Sets an element's width. By default, it sets the width of the content area,\\n but if box-sizing is set to border-box, it sets the width of the border area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width)", + "category": "Style", + "isOptional": true + }, + "whiteSpace": { + "name": "whiteSpace", + "type": "ResponsiveStyle>", + "description": "Sets how white space inside an element is handled. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)", + "category": "Style", + "isOptional": true + }, + "alignItems": { + "name": "alignItems", + "type": "ResponsiveStyle", + "description": "Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)", + "category": "Style", + "isOptional": true + }, + "alignContent": { + "name": "alignContent", + "type": "ResponsiveStyle", + "description": "Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)", + "category": "Style", + "isOptional": true + }, + "justifyContent": { + "name": "justifyContent", + "type": "ResponsiveStyle", + "description": "Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)", + "category": "Style", + "isOptional": true + }, + "gap": { + "name": "gap", + "type": "ResponsiveStyle>>", + "description": "Controls the spacing between child components. Shorthand for rowGap and columnGap. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)", + "category": "Style", + "isOptional": true + }, + "columnGap": { + "name": "columnGap", + "type": "ResponsiveStyle>>", + "description": "Controls the spacing between Flex/Grid child columns See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)", + "category": "Style", + "isOptional": true + }, + "rowGap": { + "name": "rowGap", + "type": "ResponsiveStyle>>", + "description": "Controls the spacing between Flex/Grid child rows See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)", + "category": "Style", + "isOptional": true + }, + "AllStyleProps": { + "name": "AllStyleProps", + "type": "extends BaseStyleProps,\\n ImageStyleProps,\\n FlexContainerStyleProps,\\n GridContainerStyleProps,\\n TextAreaStyleProps", + "description": "", + "category": "Style", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } ] }, - \\"VisuallyHidden\\": { - \\"VisuallyHidden\\": [ + "VisuallyHidden": { + "VisuallyHidden": [ { - \\"Main\\": { - \\"id\\": { - \\"name\\": \\"id\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Unique identifier\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"children\\": { - \\"name\\": \\"children\\", - \\"type\\": \\"React.ReactNode\\", - \\"description\\": \\"Children to be rendered inside the component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"className\\": { - \\"name\\": \\"className\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Additional CSS class name for component\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"testId\\": { - \\"name\\": \\"testId\\", - \\"type\\": \\"string | undefined\\", - \\"description\\": \\"Used to provide a \`data-testid\` attribute for testing purposes\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"inert\\": { - \\"name\\": \\"inert\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Support for the HTML \`inert\` attribute\\\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\\", - \\"category\\": \\"BaseComponentProps\\", - \\"isOptional\\": true - }, - \\"isDisabled\\": { - \\"name\\": \\"isDisabled\\", - \\"type\\": \\"boolean | undefined\\", - \\"description\\": \\"Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true - }, - \\"style\\": { - \\"name\\": \\"style\\", - \\"type\\": \\"React.CSSProperties | undefined\\", - \\"description\\": \\"Accepts a JavaScript object with camelCased properties rather than a CSS string.\\\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)\\", - \\"category\\": \\"BaseViewProps\\", - \\"isOptional\\": true + "Main": { + "id": { + "name": "id", + "type": "string | undefined", + "description": "Unique identifier", + "category": "BaseComponentProps", + "isOptional": true + }, + "children": { + "name": "children", + "type": "React.ReactNode", + "description": "Children to be rendered inside the component", + "category": "BaseComponentProps", + "isOptional": true + }, + "className": { + "name": "className", + "type": "string | undefined", + "description": "Additional CSS class name for component", + "category": "BaseComponentProps", + "isOptional": true + }, + "testId": { + "name": "testId", + "type": "string | undefined", + "description": "Used to provide a \`data-testid\` attribute for testing purposes", + "category": "BaseComponentProps", + "isOptional": true + }, + "inert": { + "name": "inert", + "type": "boolean | undefined", + "description": "Support for the HTML \`inert\` attribute\\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert", + "category": "BaseComponentProps", + "isOptional": true + }, + "isDisabled": { + "name": "isDisabled", + "type": "boolean | undefined", + "description": "Sets the Boolean \`disabled\` HTML attribute, which, when present, makes the element not mutable, focusable, or even submitted with the form", + "category": "BaseViewProps", + "isOptional": true + }, + "style": { + "name": "style", + "type": "React.CSSProperties | undefined", + "description": "Accepts a JavaScript object with camelCased properties rather than a CSS string.\\nThis is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. See: [React docs](https://reactjs.org/docs/dom-elements.html#style)", + "category": "BaseViewProps", + "isOptional": true } } }, { - \\"Layout\\": { - \\"flex\\": { - \\"name\\": \\"flex\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Shorthand for flex grow / shrink / basis\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"order\\": { - \\"name\\": \\"order\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Sets the order to lay out an item in a flex or grid container.\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"grow\\": { - \\"name\\": \\"grow\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to grow\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"shrink\\": { - \\"name\\": \\"shrink\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Ability for flex item to shrink\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"basis\\": { - \\"name\\": \\"basis\\", - \\"type\\": \\"ResponsiveStyle> | undefined\\", - \\"description\\": \\"Default size of element before remaining space is distributed\\", - \\"category\\": \\"FlexItemStyleProps\\", - \\"isOptional\\": true - }, - \\"area\\": { - \\"name\\": \\"area\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"column\\": { - \\"name\\": \\"column\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnEnd\\": { - \\"name\\": \\"columnEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnSpan\\": { - \\"name\\": \\"columnSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"columnStart\\": { - \\"name\\": \\"columnStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"row\\": { - \\"name\\": \\"row\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowEnd\\": { - \\"name\\": \\"rowEnd\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowSpan\\": { - \\"name\\": \\"rowSpan\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true - }, - \\"rowStart\\": { - \\"name\\": \\"rowStart\\", - \\"type\\": \\"ResponsiveStyle | undefined\\", - \\"description\\": \\"Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)\\", - \\"category\\": \\"GridItemStyleProps\\", - \\"isOptional\\": true + "Layout": { + "flex": { + "name": "flex", + "type": "ResponsiveStyle> | undefined", + "description": "Shorthand for flex grow / shrink / basis", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "order": { + "name": "order", + "type": "ResponsiveStyle | undefined", + "description": "Sets the order to lay out an item in a flex or grid container.", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "grow": { + "name": "grow", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to grow", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "shrink": { + "name": "shrink", + "type": "ResponsiveStyle | undefined", + "description": "Ability for flex item to shrink", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "basis": { + "name": "basis", + "type": "ResponsiveStyle> | undefined", + "description": "Default size of element before remaining space is distributed", + "category": "FlexItemStyleProps", + "isOptional": true + }, + "area": { + "name": "area", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "column": { + "name": "column", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnEnd": { + "name": "columnEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnSpan": { + "name": "columnSpan", + "type": "ResponsiveStyle | undefined", + "description": "Makes it possible for an element to span across all columns when its value is set to all. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "columnStart": { + "name": "columnStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "row": { + "name": "row", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowEnd": { + "name": "rowEnd", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowSpan": { + "name": "rowSpan", + "type": "ResponsiveStyle | undefined", + "description": "", + "category": "GridItemStyleProps", + "isOptional": true + }, + "rowStart": { + "name": "rowStart", + "type": "ResponsiveStyle | undefined", + "description": "Specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)", + "category": "GridItemStyleProps", + "isOptional": true } } } diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap index d40147b6f27..5735cf75e7c 100644 --- a/docs/__tests__/__snapshots__/sitemap.test.ts.snap +++ b/docs/__tests__/__snapshots__/sitemap.test.ts.snap @@ -52,6 +52,7 @@ exports[`Sitemap Snapshot 1`] = ` /react-native/theming, /react-native/theming/dark-mode, /react/components, +/react/components/accordion, /react/components/alert, /react/components/autocomplete, /react/components/badge, @@ -62,7 +63,6 @@ exports[`Sitemap Snapshot 1`] = ` /react/components/collection, /react/components/divider, /react/components/dropzone, -/react/components/expander, /react/components/fieldset, /react/components/flex, /react/components/grid, @@ -109,7 +109,6 @@ exports[`Sitemap Snapshot 1`] = ` /react/connected-components/liveness/customization, /react/connected-components/liveness/troubleshooting, /react/connected-components/storage, -/react/connected-components/storage/fileuploader, /react/connected-components/storage/storageimage, /react/connected-components/storage/storagemanager, /react/getting-started/accessibility, diff --git a/docs/jest.config.ts b/docs/jest.config.ts index 2948f649d8c..eae85291077 100644 --- a/docs/jest.config.ts +++ b/docs/jest.config.ts @@ -1,15 +1,8 @@ -/* - * For a detailed explanation regarding each configuration property and type check, visit: - * https://jestjs.io/docs/configuration - */ +import { Config } from 'jest'; -const jestConfig = { +const jestConfig: Config = { preset: 'ts-jest', - setupFiles: ['./jestEnv.ts'], - transform: { - '^.+\\.(ts|tsx)?$': 'ts-jest', - '^.+\\.(js|jsx)$': 'babel-jest', - }, + setupFiles: ['/jest.setup.ts'], }; export default jestConfig; diff --git a/docs/jestEnv.ts b/docs/jest.setup.ts similarity index 100% rename from docs/jestEnv.ts rename to docs/jest.setup.ts diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts index 9bc3dd46b9d..4f11a03dc6c 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -1,5 +1,4 @@ /// -/// /// // NOTE: This file should not be edited diff --git a/docs/next.config.js b/docs/next.config.js index be199d549bd..6818b650d36 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -15,8 +15,6 @@ module.exports = withNextPluginPreval({ DOCSEARCH_DOCS_APP_ID: process.env.DOCSEARCH_DOCS_APP_ID, DOCSEARCH_DOCS_API_KEY: process.env.DOCSEARCH_DOCS_API_KEY, DOCSEARCH_DOCS_INDEX_NAME: process.env.DOCSEARCH_DOCS_INDEX_NAME, - FF_FILEUPLOADER_COMPONENTS_ENABLED: - process.env.FF_FILEUPLOADER_COMPONENTS_ENABLED, }, // Differentiate pages with frontmatter & layout vs. normal MD(X) pageExtensions: ['page.mdx', 'page.tsx'], @@ -158,6 +156,15 @@ module.exports = withNextPluginPreval({ '/:platform(react|react-native|angular|vue)/connected-components/authenticator/advanced', permanent: true, }, + + /** + * Renamed "expander" to "accordion" + */ + { + source: '/react/components/expander', + destination: '/react/components/accordion', + permanent: false, + }, /** * Redirect traffic from CRA to Vite getting started page */ @@ -249,13 +256,6 @@ module.exports = withNextPluginPreval({ ], }); - // resolve react and react-dom from project node_modules - config.resolve.alias = { - ...config.resolve.alias, - react: path.resolve(__dirname, 'node_modules/react'), - 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), - }; - return config; }, }); diff --git a/docs/package.json b/docs/package.json index 71dd2e11149..9998724b2eb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,7 +15,7 @@ "build:props-tables": "node --require esbuild-register ./scripts/generate-props-tables-data.ts", "clean": "rimraf node_modules .next && yarn flutter:clean", "lint": "next lint", - "postbuild": "yarn postbuild:sitemap && yarn test && yarn postbuild:previews", + "postbuild": "yarn postbuild:sitemap && yarn test", "postbuild:previews": "node --require esbuild-register ./scripts/generate-previews.ts", "postbuild:sitemap": "node --require esbuild-register ./scripts/generate-sitemap-robotstxt.ts", "start": "next start", @@ -24,29 +24,23 @@ }, "dependencies": { "@aws-amplify/ui-react": "5.3.2", - "@aws-amplify/ui-react-storage": "2.3.2", - "@cucumber/gherkin": "^19.0.3", - "@cucumber/messages": "^16.0.1", "@docsearch/react": "3", "@mdx-js/loader": "^2.1.0", "@mdx-js/mdx": "^2.1.0", "@mdx-js/react": "^2.1.0", - "@moxy/next-compile-node-modules": "^2.1.1", - "@xstate/inspect": "^0.4.1", - "aws-amplify": "latest", - "classnames": "^2.3.1", + "aws-amplify": "^6.0.1", "countries-list": "^2.6.1", "dotenv": "^16.0.0", "gray-matter": "^4.0.3", "lodash": "^4.17.21", "mdx-prism": "^0.3.3", - "next": "11.1.4", + "next": "^13.5.5", "next-plugin-preval": "^1.2.1", "prism-react-renderer": "1.2.1", "raw-loader": "^4.0.2", - "react": "17", + "react": "18.2.0", "react-copy-to-clipboard": "^5.0.4", - "react-dom": "17", + "react-dom": "18.2.0", "react-icons": "^4.3.1", "react-live": "^2.4.1", "rehype": "^11.0.0", @@ -65,25 +59,17 @@ "license": "MIT", "devDependencies": { "@supercharge/promise-pool": "^2.4.0", - "@types/jest": "^27", "@types/lodash": "^4.14.170", "@types/node": "^14.14.31", - "@types/react": "17.0.47", "autoprefixer": "^10.2.4", - "babel-jest": "^29.3.1", - "canvas": "^2.9.1", + "canvas": "^2.11.2", "dotenv-safe": "^8.2.0", - "esbuild-register": "^3.3.2", - "eslint": "7.32.0", - "eslint-config-next": "12.0.10", + "eslint-config-next": "^13.5.5", "globby": "^13.1.1", - "jest": "^27", "postcss": "^8.4.31", "puppeteer": "^19.7.2", "react-markdown": "^8.0.3", "sitemap-urls": "^3.0.0", - "ts-jest": "^27", - "ts-morph": "^17.0.0", "ts-node": "^10.9.1" } } diff --git a/docs/public/android-preview.png b/docs/public/android-preview.png deleted file mode 100644 index a0c26d8ec30..00000000000 Binary files a/docs/public/android-preview.png and /dev/null differ diff --git a/docs/public/angular-preview.png b/docs/public/angular-preview.png deleted file mode 100644 index 4ffad25a427..00000000000 Binary files a/docs/public/angular-preview.png and /dev/null differ diff --git a/docs/public/flutter-preview.png b/docs/public/flutter-preview.png deleted file mode 100644 index a0c26d8ec30..00000000000 Binary files a/docs/public/flutter-preview.png and /dev/null differ diff --git a/docs/public/preview.png b/docs/public/preview.png deleted file mode 100644 index 15b15ea59b5..00000000000 Binary files a/docs/public/preview.png and /dev/null differ diff --git a/docs/public/react-native-preview.png b/docs/public/react-native-preview.png deleted file mode 100644 index a0c26d8ec30..00000000000 Binary files a/docs/public/react-native-preview.png and /dev/null differ diff --git a/docs/public/react-preview.png b/docs/public/react-preview.png deleted file mode 100644 index 8fcc388fbcb..00000000000 Binary files a/docs/public/react-preview.png and /dev/null differ diff --git a/docs/public/swift-preview.png b/docs/public/swift-preview.png deleted file mode 100644 index a0c26d8ec30..00000000000 Binary files a/docs/public/swift-preview.png and /dev/null differ diff --git a/docs/public/vue-preview.png b/docs/public/vue-preview.png deleted file mode 100644 index 366c9f84c21..00000000000 Binary files a/docs/public/vue-preview.png and /dev/null differ diff --git a/docs/scripts/generate-previews.ts b/docs/scripts/generate-previews.ts index 74c3a84565d..273ce635b00 100644 --- a/docs/scripts/generate-previews.ts +++ b/docs/scripts/generate-previews.ts @@ -216,6 +216,7 @@ const main = async () => { }); }; +// @todo-migration re-enable if (require.main) { main(); } diff --git a/docs/scripts/generate-sitemap-robotstxt.ts b/docs/scripts/generate-sitemap-robotstxt.ts index fe077e4b4aa..8f67f426aa4 100644 --- a/docs/scripts/generate-sitemap-robotstxt.ts +++ b/docs/scripts/generate-sitemap-robotstxt.ts @@ -77,7 +77,7 @@ async function generateSitemap() { `; - const formatted = prettier.format(sitemap, { + const formatted = await prettier.format(sitemap, { ...prettierConfig, parser: 'html', }); diff --git a/docs/scripts/link-checker-puppeteer.ts b/docs/scripts/link-checker-puppeteer.ts index 5cdc0605c0a..68efca76e7d 100644 --- a/docs/scripts/link-checker-puppeteer.ts +++ b/docs/scripts/link-checker-puppeteer.ts @@ -50,7 +50,9 @@ function reportResult(links: LinkInfo[]) { } } ); - const failedLinks = errorLinks.filter((link) => link.statusCode >= 400); + const failedLinks = errorLinks.filter( + (link) => link.statusCode >= 400 && isInternalLink(link.href) + ); if (failedLinks.length) { throw new Error(`${failedLinks.length} broken links were found`); } else { @@ -60,6 +62,7 @@ function reportResult(links: LinkInfo[]) { } } else { console.log('🎉 All links look good!'); + process.exit(); } } @@ -93,7 +96,7 @@ async function runLinkChecker() { }; }); - await console.table(allPagesPathsNum); + console.table(allPagesPathsNum); const links = results.reduce((acc, curr) => [...acc, ...curr.links], []); reportResult(links); @@ -102,5 +105,6 @@ async function runLinkChecker() { try { runLinkChecker(); } catch (err) { + console.log(`Docs link check failure: ${err.message}`); process.exit(1); } diff --git a/docs/scripts/types/catalog.d.ts b/docs/scripts/types/catalog.d.ts index efdae990284..f52aaacb00b 100644 --- a/docs/scripts/types/catalog.d.ts +++ b/docs/scripts/types/catalog.d.ts @@ -1,4 +1,6 @@ export type ComponentName = + | 'Accordion' + | 'Accordion.Item' | 'Alert' | 'Badge' | 'Breadcrumbs' @@ -15,8 +17,7 @@ export type ComponentName = | 'DropZone.Accepted' | 'DropZone.Rejected' | 'DropZone.Default' - | 'Expander' - | 'ExpanderItem' + | 'ExpanderGroup' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'Flex' @@ -49,7 +50,10 @@ export type ComponentName = | 'StepperField' | 'SwitchField' | 'Tabs' - | 'TabItem' + | 'Tabs.Container' + | 'Tabs.Item' + | 'Tabs.List' + | 'Tabs.Panel' | 'Text' | 'TextAreaField' | 'TextField' diff --git a/docs/scripts/util/checkLink.ts b/docs/scripts/util/checkLink.ts index ee7a9e27f98..0c9b4726e5e 100644 --- a/docs/scripts/util/checkLink.ts +++ b/docs/scripts/util/checkLink.ts @@ -67,7 +67,7 @@ async function returnStatus({ } } -export function checkLink( +export async function checkLink( { href, tagName, @@ -82,12 +82,7 @@ export function checkLink( pageUrl: string; }, linkIdx: number -): Promise; - -export async function checkLink( - { href, tagName, tagText, pageIdx, pageUrl }, - linkIdx -) { +): Promise { return new Promise(async (res, rej) => { const linkData = { href, linkIdx, pageIdx, pageUrl, tagName, tagText }; if (!href) { diff --git a/docs/scripts/util/componentsWithChildren.ts b/docs/scripts/util/componentsWithChildren.ts index 9eec0af1467..cb804fb91d4 100644 --- a/docs/scripts/util/componentsWithChildren.ts +++ b/docs/scripts/util/componentsWithChildren.ts @@ -3,7 +3,7 @@ import { ComponentName } from '../types/catalog'; export const componentsWithChildren: { [key in ComponentName]?: ComponentName[]; } = { - Expander: ['ExpanderItem'], + Accordion: ['Accordion.Item'], Breadcrumbs: [ 'Breadcrumbs.Item', 'Breadcrumbs.Link', @@ -11,7 +11,7 @@ export const componentsWithChildren: { ], Menu: ['MenuButton', 'MenuItem'], RadioGroupField: ['Radio'], - Tabs: ['TabItem'], + Tabs: ['Tabs.Container', 'Tabs.Item', 'Tabs.List', 'Tabs.Panel'], Table: ['TableBody', 'TableCell', 'TableFoot', 'TableHead', 'TableRow'], ToggleButton: ['ToggleButtonGroup'], }; diff --git a/docs/scripts/util/getAllTypesData.ts b/docs/scripts/util/getAllTypesData.ts index ea23f4c1fca..85ff125ad10 100644 --- a/docs/scripts/util/getAllTypesData.ts +++ b/docs/scripts/util/getAllTypesData.ts @@ -1,6 +1,11 @@ import fs from 'fs'; import path from 'path'; -import { Project, PropertySignature, TypeAliasDeclaration } from 'ts-morph'; +import { + Project, + PropertySignature, + SyntaxKind, + TypeAliasDeclaration, +} from 'ts-morph'; import { capitalizeString } from '../../src/utils/capitalizeString'; import { AllTypeFileData, @@ -8,7 +13,6 @@ import { TypeFileName, TypeData, } from '../types/allTypesData'; -import { SyntaxKind } from 'typescript'; export const getAllTypesData = () => { const project = new Project({ diff --git a/docs/src/components/CardLink.tsx b/docs/src/components/CardLink.tsx index 60d40d6b5df..509493822a0 100644 --- a/docs/src/components/CardLink.tsx +++ b/docs/src/components/CardLink.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { classNames } from '@aws-amplify/ui'; import { Grid, Link, Heading } from '@aws-amplify/ui-react'; interface CardLinkProps { diff --git a/docs/src/components/CodeHighlight.tsx b/docs/src/components/CodeHighlight.tsx index c12d40288ac..0cbf91d0923 100644 --- a/docs/src/components/CodeHighlight.tsx +++ b/docs/src/components/CodeHighlight.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import Highlight, { defaultProps, Language } from 'prism-react-renderer'; import { View, Text, Button } from '@aws-amplify/ui-react'; -import classNames from 'classnames'; +import { classNames } from '@aws-amplify/ui'; export const CodeHighlight = ({ className = '', diff --git a/docs/src/components/ComponentClassTable.tsx b/docs/src/components/ComponentClassTable.tsx index f3daaecf236..5424db07d83 100644 --- a/docs/src/components/ComponentClassTable.tsx +++ b/docs/src/components/ComponentClassTable.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { - ComponentClassObject, TableRow, TableBody, TableHead, TableCell, } from '@aws-amplify/ui-react'; +import { ComponentsMetadata } from './ComponentsMetadata'; import { ResponsiveTable, ResponsiveTableCell } from './ResponsiveTable'; export const ComponentClassTable = ({ componentName }) => { const targetClasses = React.useMemo(() => { - return Object.values(ComponentClassObject) + return Object.values(ComponentsMetadata) .filter((value: any) => { return ( value && diff --git a/docs/src/components/ComponentStyleDisplay.tsx b/docs/src/components/ComponentStyleDisplay.tsx index faf5a122698..f73fdac47f7 100644 --- a/docs/src/components/ComponentStyleDisplay.tsx +++ b/docs/src/components/ComponentStyleDisplay.tsx @@ -1,21 +1,25 @@ import * as React from 'react'; import { ComponentClassTable } from '@/components/ComponentClassTable'; import { ComponentVariableTable } from '@/components/ComponentVariableTable'; -import { Tabs, TabItem, View } from '@aws-amplify/ui-react'; +import { Tabs, View } from '@aws-amplify/ui-react'; export const ComponentStyleDisplay = ({ componentName }) => { return ( - - + + + Target Classes + CSS Variables + + - - + + - + - - + + ); }; diff --git a/docs/src/components/ComponentsMetadata.ts b/docs/src/components/ComponentsMetadata.ts new file mode 100644 index 00000000000..37abe03d6b9 --- /dev/null +++ b/docs/src/components/ComponentsMetadata.ts @@ -0,0 +1,809 @@ +import { ComponentClassName } from '@aws-amplify/ui'; + +// includes primiitve subcomponent names, like `AlertIcon` +type ComponentClassNameKey = keyof typeof ComponentClassName; + +type ComponentNameKey = + | 'Accordion' + | 'Alert' + | 'Autocomplete' + | 'Badge' + | 'Breadcrumbs' + | 'Button' + | 'Button' + | 'Card' + | 'Checkbox' + | 'CheckboxField' + | 'Collection' + | 'PhoneNumberField' + | 'Divider' + | 'DropZone' + | 'Fieldset' + | 'Flex' + | 'Grid' + | 'Heading' + | 'HighlightMatch' + | 'Icon' + | 'Image' + | 'Input' + | 'Label' + | 'Link' + | 'Loader' + | 'Menu' + | 'Message' + | 'Pagination' + | 'PasswordField' + | 'PhoneNumberField' + | 'Placeholder' + | 'Radio' + | 'RadioGroupField' + | 'Rating' + | 'ScrollView' + | 'SearchField' + | 'Select' + | 'SliderField' + | 'SelectField' + | 'StepperField' + | 'StorageImage' + | 'StorageManager' + | 'SwitchField' + | 'Table' + | 'Tabs' + | 'Text' + | 'TextAreaField' + | 'TextField' + | 'ToggleButton' + | 'ToggleButtonGroup' + | 'VisuallyHidden'; + +interface ComponentMetadata { + className: string; + components?: ComponentNameKey[]; + description?: string; +} + +type ComponentClassNameItems = { + [Name in ComponentClassNameKey]: ComponentMetadata; +}; + +export const ComponentsMetadata: ComponentClassNameItems = { + Accordion: { + className: ComponentClassName.Accordion, + components: ['Accordion'], + description: 'Top level element that wraps the Accordion primitive', + }, + AccordionItem: { + className: ComponentClassName.AccordionItem, + components: ['Accordion'], + description: 'Accordion item (containier for header, trigger, and content)', + }, + AccordionItemContent: { + className: ComponentClassName.AccordionItemContent, + components: ['Accordion'], + description: 'Accordion content container', + }, + AccordionItemIcon: { + className: ComponentClassName.AccordionItemIcon, + components: ['Accordion'], + description: 'Icon to indicate whether an item is expanded or collapsed', + }, + AccordionItemTrigger: { + className: ComponentClassName.AccordionItemTrigger, + components: ['Accordion'], + description: 'Accordion item trigger (summary element)', + }, + Alert: { + className: ComponentClassName.Alert, + components: ['Alert'], + description: 'Top level element that wraps the Alert primitive', + }, + AlertIcon: { + className: ComponentClassName.AlertIcon, + components: ['Alert'], + description: 'Class applied to Icon component within the Alert primitive', + }, + AlertHeading: { + className: ComponentClassName.AlertHeading, + components: ['Alert'], + description: 'Class applied to the heading View', + }, + AlertBody: { + className: ComponentClassName.AlertBody, + components: ['Alert'], + description: 'Class applied to the body View', + }, + AlertDismiss: { + className: ComponentClassName.AlertDismiss, + components: ['Alert'], + description: 'Class applied to the close Button', + }, + Autocomplete: { + className: ComponentClassName.Autocomplete, + components: ['Autocomplete'], + description: 'Top level element that wraps the Autocomplete primitive', + }, + AutocompleteMenu: { + className: ComponentClassName.AutocompleteMenu, + components: ['Autocomplete'], + description: 'Top level element that wraps the dropdown menu', + }, + AutocompleteMenuEmpty: { + className: ComponentClassName.AutocompleteMenuEmpty, + components: ['Autocomplete'], + description: 'Class applied to the no options slot of menu', + }, + AutocompleteMenuFooter: { + className: ComponentClassName.AutocompleteMenuFooter, + components: ['Autocomplete'], + description: 'Class applied to menu footer', + }, + AutocompleteMenuHeader: { + className: ComponentClassName.AutocompleteMenuHeader, + components: ['Autocomplete'], + description: 'Class applied to menu header', + }, + AutocompleteMenuLoading: { + className: ComponentClassName.AutocompleteMenuLoading, + components: ['Autocomplete'], + description: 'Class applied to the loading slot of menu', + }, + AutocompleteMenuOption: { + className: ComponentClassName.AutocompleteMenuOption, + components: ['Autocomplete'], + description: 'Class applied to each li option', + }, + AutocompleteMenuOptions: { + className: ComponentClassName.AutocompleteMenuOptions, + components: ['Autocomplete'], + description: 'Class applied to ul container element', + }, + Badge: { + className: ComponentClassName.Badge, + components: ['Badge'], + description: 'Top level element that wraps the Badge component', + }, + Breadcrumbs: { + className: ComponentClassName.Breadcrumbs, + components: ['Breadcrumbs'], + description: 'Top level element that wraps the Breadcrumbs component', + }, + BreadcrumbsItem: { + className: ComponentClassName.BreadcrumbsItem, + components: ['Breadcrumbs'], + description: 'Each breadcrumb', + }, + BreadcrumbsLink: { + className: ComponentClassName.BreadcrumbsLink, + components: ['Breadcrumbs'], + description: 'Links used within breadcrumbs', + }, + BreadcrumbsList: { + className: ComponentClassName.BreadcrumbsList, + components: ['Breadcrumbs'], + description: 'List element within nav', + }, + BreadcrumbsSeparator: { + className: ComponentClassName.BreadcrumbsSeparator, + components: ['Breadcrumbs'], + description: 'Separator between each breadcrumb', + }, + Button: { + className: ComponentClassName.Button, + components: ['Button'], + description: 'Top level element that wraps the Button primitive', + }, + ButtonGroup: { className: ComponentClassName.ButtonGroup }, + ButtonLoaderWrapper: { + className: ComponentClassName.ButtonLoaderWrapper, + components: ['Button'], + description: + 'Class applied to the Loader component within the Button Loading state', + }, + Card: { + className: ComponentClassName.Card, + components: ['Card'], + description: 'Top level element that wraps the Card primitive', + }, + Checkbox: { + className: ComponentClassName.Checkbox, + components: ['Checkbox'], + description: 'Top level element that wraps the Checkbox primitive', + }, + CheckboxButton: { + className: ComponentClassName.CheckboxButton, + components: ['Checkbox'], + description: 'Wrapper for the checked icon within the Checkbox primitive', + }, + CheckboxIcon: { + className: ComponentClassName.CheckboxIcon, + components: ['Checkbox'], + description: + 'Class applied to the checked icon within the Checkbox primitive', + }, + CheckboxInput: { + className: ComponentClassName.CheckboxInput, + components: ['Checkbox'], + description: + 'Class applied to the visually hidden checkbox input within the Checkbox primitive', + }, + CheckboxLabel: { + className: ComponentClassName.CheckboxLabel, + components: ['Checkbox'], + description: 'Class applied to the label within the Checkbox primitive', + }, + CheckboxField: { + className: ComponentClassName.CheckboxField, + components: ['CheckboxField'], + description: 'Top level element that wraps the CheckboxField primitive', + }, + Collection: { + className: ComponentClassName.Collection, + components: ['Collection'], + description: 'Top level element that wraps the Collection primitive', + }, + CollectionItems: { + className: ComponentClassName.CollectionItems, + components: ['Collection'], + description: + 'Class applied to the element that wraps all the items in a collection', + }, + CollectionSearch: { + className: ComponentClassName.CollectionSearch, + components: ['Collection'], + description: + 'Class applied to the element that wraps the collection search box', + }, + CollectionPagination: { + className: ComponentClassName.CollectionPagination, + components: ['Collection'], + description: + 'Class applied to the element that wraps the pagination component in a collection', + }, + CountryCodeSelect: { + className: ComponentClassName.CountryCodeSelect, + components: ['PhoneNumberField'], + description: + 'Class applied to the Dial Code Select within the PhoneNumberField primitive', + }, + DialCodeSelect: { + className: ComponentClassName.DialCodeSelect, + components: ['PhoneNumberField'], + description: + 'Class applied to the Dial Code Select within the PhoneNumberField primitive', + }, + Divider: { + className: ComponentClassName.Divider, + components: ['Divider'], + description: 'Top level element that wraps the Divider primitive', + }, + DividerLabel: { + className: ComponentClassName.DividerLabel, + components: ['Divider'], + description: 'Class applied to the label of the Divider component', + }, + DropZone: { + className: ComponentClassName.DropZone, + components: ['DropZone'], + description: 'Class applied to the DropZone component', + }, + Field: { className: ComponentClassName.Field }, + FieldDescription: { className: ComponentClassName.FieldDescription }, + FieldErrorMessage: { className: ComponentClassName.FieldErrorMessage }, + FieldGroup: { className: ComponentClassName.FieldGroup }, + FieldGroupControl: { className: ComponentClassName.FieldGroupControl }, + FieldGroupFieldWrapper: { + className: ComponentClassName.FieldGroupFieldWrapper, + }, + FieldGroupOuterEnd: { className: ComponentClassName.FieldGroupOuterEnd }, + FieldGroupOuterStart: { className: ComponentClassName.FieldGroupOuterStart }, + FieldGroupInnerEnd: { className: ComponentClassName.FieldGroupInnerEnd }, + FieldGroupInnerStart: { className: ComponentClassName.FieldGroupInnerStart }, + FieldGroupIcon: { className: ComponentClassName.FieldGroupIcon }, + FieldGroupIconButton: { className: ComponentClassName.FieldGroupIconButton }, + FieldGroupHasInnerEnd: { + className: ComponentClassName.FieldGroupHasInnerEnd, + }, + FieldGroupHasInnerStart: { + className: ComponentClassName.FieldGroupHasInnerStart, + }, + FieldShowPassword: { className: ComponentClassName.FieldShowPassword }, + Fieldset: { + className: ComponentClassName.Fieldset, + components: ['Fieldset'], + description: 'Top level element that wraps the Fieldset primitive', + }, + FieldsetLegend: { + className: ComponentClassName.FieldsetLegend, + components: ['Fieldset'], + description: 'Visual label for the Fieldset primitive', + }, + Flex: { + className: ComponentClassName.Flex, + components: ['Flex'], + description: 'Top level element that wraps the Flex primitive', + }, + Grid: { + className: ComponentClassName.Grid, + components: ['Grid'], + description: 'Top level element that wraps the Grid primitive', + }, + Heading: { + className: ComponentClassName.Heading, + components: ['Heading'], + description: 'Top level element that wraps the Heading primitive', + }, + HighlightMatch: { + className: ComponentClassName.HighlightMatch, + components: ['HighlightMatch'], + description: 'Top level element that wraps the HighlightMatch primitive', + }, + HighlightMatchHighlighted: { + className: ComponentClassName.HighlightMatchHighlighted, + components: ['HighlightMatch'], + description: + 'Class applied to the highlighted text of the HighlightMatch primitive', + }, + Icon: { + className: ComponentClassName.Icon, + components: ['Icon'], + description: 'Top level element that wraps the Icon primitive', + }, + Image: { + className: ComponentClassName.Image, + components: ['Image'], + description: 'Top level element that wraps the Image primitive', + }, + Input: { + className: ComponentClassName.Input, + components: ['Input'], + description: 'Class applied to the input element', + }, + Label: { + className: ComponentClassName.Label, + components: ['Label'], + description: 'Class applied to the label element', + }, + Link: { + className: ComponentClassName.Link, + components: ['Link'], + description: 'Top level element that wraps the Link primitive', + }, + Loader: { + className: ComponentClassName.Loader, + components: ['Loader'], + description: 'Top level element that wraps the Loader primitive', + }, + LoaderLabel: { + className: ComponentClassName.LoaderLabel, + components: ['Loader'], + description: 'Class applied to the track of loader', + }, + MenuContent: { + className: ComponentClassName.MenuContent, + components: ['Menu'], + description: 'Menu content container (Flex)', + }, + MenuWrapper: { + className: ComponentClassName.MenuWrapper, + components: ['Menu'], + description: 'Menu content wrapper', + }, + MenuItem: { + className: ComponentClassName.MenuItem, + components: ['Menu'], + description: + 'Menu item button (MenuButton, wrapped in amplify-menu-content class)', + }, + MenuTrigger: { + className: ComponentClassName.MenuTrigger, + components: ['Menu'], + description: + 'Menu trigger button (MenuButton, not wrapped in amplify-menu-content class)', + }, + Message: { + className: ComponentClassName.Message, + components: ['Message'], + description: 'Class applied to the root element of the Message', + }, + MessageIcon: { + className: ComponentClassName.MessageIcon, + components: ['Message'], + description: 'Class applied to Icon component within the Message primitive', + }, + MessageHeading: { + className: ComponentClassName.MessageHeading, + components: ['Message'], + description: 'Class applied to the heading View', + }, + MessageBody: { + className: ComponentClassName.MessageBody, + components: ['Message'], + description: 'Class applied to the body View', + }, + MessageContent: { + className: ComponentClassName.MessageContent, + components: ['Message'], + description: + 'Class applied to the wrappar around heading and children of the Message', + }, + MessageDismiss: { + className: ComponentClassName.MessageDismiss, + components: ['Message'], + description: 'Class applied to the close Button', + }, + Pagination: { + className: ComponentClassName.Pagination, + components: ['Pagination'], + description: 'Top level element that wraps the Pagination primitive', + }, + PaginationItem: { + className: ComponentClassName.PaginationItem, + components: ['Pagination'], + description: 'Class applied to the pagination items', + }, + PasswordField: { + className: ComponentClassName.PasswordField, + components: ['PasswordField'], + description: 'Top level element that wraps the PasswordField primitive', + }, + PhoneNumberField: { + className: ComponentClassName.PhoneNumberField, + components: ['PhoneNumberField'], + description: 'Top level element that wraps the PhoneNumberField primitive', + }, + Placeholder: { + className: ComponentClassName.Placeholder, + components: ['Placeholder'], + description: 'Top level element that wraps the Placeholder primitive', + }, + Radio: { + className: ComponentClassName.Radio, + components: ['RadioGroupField', 'Radio'], + description: 'Top level element that wraps the Radio primitive', + }, + RadioButton: { + className: ComponentClassName.RadioButton, + components: ['RadioGroupField', 'Radio'], + description: 'Class applied to the displayed radio button', + }, + RadioInput: { + className: ComponentClassName.RadioInput, + components: ['RadioGroupField', 'Radio'], + description: 'Class applied to the visually hidden radio input', + }, + RadioLabel: { + className: ComponentClassName.RadioLabel, + components: ['RadioGroupField', 'Radio'], + description: 'Class applied to the radio label', + }, + RadioGroupField: { + className: ComponentClassName.RadioGroupField, + components: ['RadioGroupField'], + description: 'Top level element that wraps the RadioGroupField primitive', + }, + RadioGroup: { + className: ComponentClassName.RadioGroup, + components: ['RadioGroupField'], + description: 'Class applied to the radio group wrapper', + }, + Rating: { + className: ComponentClassName.Rating, + components: ['Rating'], + description: 'Top level element that wraps the Rating primitive', + }, + RatingItem: { + className: ComponentClassName.RatingItem, + components: ['Rating'], + description: 'Each element in the Rating primitive', + }, + RatingIcon: { + className: ComponentClassName.RatingIcon, + components: ['Rating'], + description: 'The icons in the Rating primitive', + }, + RatingLabel: { + className: ComponentClassName.RatingLabel, + components: ['Rating'], + description: 'Top level element that wraps the Rating primitive', + }, + ScrollView: { + className: ComponentClassName.ScrollView, + components: ['ScrollView'], + description: 'Top level element that wraps the ScrollView primitive', + }, + SearchField: { + className: ComponentClassName.SearchField, + components: ['SearchField'], + description: 'Top level element that wraps the SearchField primitive', + }, + SearchFieldClear: { + className: ComponentClassName.SearchFieldClear, + components: ['SearchField'], + description: 'Class applied to the search field clear button', + }, + SearchFieldSearch: { + className: ComponentClassName.SearchFieldSearch, + components: ['SearchField'], + description: 'Class applied to the search button', + }, + Select: { + className: ComponentClassName.Select, + components: ['Select', 'SelectField'], + description: 'Class applied to the select element', + }, + SelectField: { + className: ComponentClassName.SelectField, + components: ['SelectField'], + description: 'Top level element that wraps the SelectField primitive', + }, + SelectWrapper: { + className: ComponentClassName.SelectWrapper, + components: ['Select', 'SelectField'], + description: 'Class applied to the select wrapper', + }, + SelectIcon: { + className: ComponentClassName.SelectIcon, + components: ['Select', 'SelectField'], + description: 'Class applied to the select icon wrapper', + }, + SliderField: { + className: ComponentClassName.SliderField, + components: ['SliderField'], + description: 'Top level element that wraps the SliderField primitive', + }, + SliderFieldGroup: { + className: ComponentClassName.SliderFieldGroup, + components: ['SliderField'], + description: 'Class applied to the element that wraps the slider root', + }, + SliderFieldLabel: { + className: ComponentClassName.SliderFieldLabel, + components: ['SliderField'], + description: 'Class applied to the slider label', + }, + SliderFieldRange: { + className: ComponentClassName.SliderFieldRange, + components: ['SliderField'], + description: 'Class applied to the filled in portion of the slider track', + }, + SliderFieldRoot: { + className: ComponentClassName.SliderFieldRoot, + components: ['SliderField'], + description: + 'Class applied to the slider root which wraps the track and thumb', + }, + SliderFieldThumb: { + className: ComponentClassName.SliderFieldThumb, + components: ['SliderField'], + description: 'Class applied to the slider thumb', + }, + SliderFieldTrack: { + className: ComponentClassName.SliderFieldTrack, + components: ['SliderField'], + description: 'Class applied to the slider track', + }, + StepperField: { + className: ComponentClassName.StepperField, + components: ['StepperField'], + description: 'Top level element that wraps the StepperField primitive', + }, + StepperFieldButtonDecrease: { + className: ComponentClassName.StepperFieldButtonDecrease, + components: ['StepperField'], + description: 'Class applied to the decrease button', + }, + StepperFieldButtonIncrease: { + className: ComponentClassName.StepperFieldButtonIncrease, + components: ['StepperField'], + description: 'Class applied to the increase button', + }, + StepperFieldInput: { + className: ComponentClassName.StepperFieldInput, + components: ['StepperField'], + description: 'Class applied to the StepperField input', + }, + StorageImage: { + className: ComponentClassName.StorageImage, + components: ['StorageImage'], + description: 'Class applied to the img tag', + }, + StorageManager: { + className: ComponentClassName.StorageManager, + components: ['StorageManager'], + }, + StorageManagerDropZone: { + className: ComponentClassName.StorageManagerDropZone, + components: ['StorageManager'], + }, + StorageManagerDropZoneIcon: { + className: ComponentClassName.StorageManagerDropZoneIcon, + components: ['StorageManager'], + }, + StorageManagerDropZoneText: { + className: ComponentClassName.StorageManagerDropZoneText, + components: ['StorageManager'], + }, + StorageManagerFilePicker: { + className: ComponentClassName.StorageManagerFilePicker, + components: ['StorageManager'], + }, + StorageManagerFile: { + className: ComponentClassName.StorageManagerFile, + components: ['StorageManager'], + }, + StorageManagerFileWrapper: { + className: ComponentClassName.StorageManagerFileWrapper, + components: ['StorageManager'], + }, + StorageManagerFileList: { + className: ComponentClassName.StorageManagerFileList, + components: ['StorageManager'], + }, + StorageManagerFileName: { + className: ComponentClassName.StorageManagerFileName, + components: ['StorageManager'], + }, + StorageManagerLoader: { + className: ComponentClassName.StorageManagerLoader, + components: ['StorageManager'], + }, + StorageManagerFileSize: { + className: ComponentClassName.StorageManagerFileSize, + components: ['StorageManager'], + }, + StorageManagerFileInfo: { + className: ComponentClassName.StorageManagerFileInfo, + components: ['StorageManager'], + }, + StorageManagerFileImage: { + className: ComponentClassName.StorageManagerFileImage, + components: ['StorageManager'], + }, + StorageManagerFileMain: { + className: ComponentClassName.StorageManagerFileMain, + components: ['StorageManager'], + }, + StorageManagerFileStatus: { + className: ComponentClassName.StorageManagerFileStatus, + components: ['StorageManager'], + }, + StorageManagerPreviewer: { + className: ComponentClassName.StorageManagerPreviewer, + components: ['StorageManager'], + }, + StorageManagerPreviewerText: { + className: ComponentClassName.StorageManagerPreviewerText, + components: ['StorageManager'], + }, + StorageManagerPreviewerActions: { + className: ComponentClassName.StorageManagerPreviewerActions, + components: ['StorageManager'], + }, + StorageManagerPreviewerFooter: { + className: ComponentClassName.StorageManagerPreviewerFooter, + components: ['StorageManager'], + }, + SwitchField: { + className: ComponentClassName.SwitchField, + components: ['SwitchField'], + description: 'Top level element that wraps the SwitchField primitive', + }, + SwitchLabel: { + className: ComponentClassName.SwitchLabel, + components: ['SwitchField'], + description: 'Class applied to the SwitchField label text', + }, + SwitchThumb: { + className: ComponentClassName.SwitchThumb, + components: ['SwitchField'], + description: 'Class applied to the SwitchField thumb', + }, + SwitchTrack: { + className: ComponentClassName.SwitchTrack, + components: ['SwitchField'], + description: 'Class applied to the SwitchField track', + }, + SwitchWrapper: { + className: ComponentClassName.SwitchWrapper, + components: ['SwitchField'], + description: + 'Class applied to the label element that wraps the SwitchField label and track', + }, + Table: { + className: ComponentClassName.Table, + components: ['Table'], + description: 'Top level element that wraps the Table primitive', + }, + TableCaption: { + className: ComponentClassName.TableCaption, + components: ['Table'], + description: 'Class applied to the content provided as the caption prop', + }, + TableBody: { + className: ComponentClassName.TableBody, + components: ['Table'], + description: 'Class applied to TableBody component', + }, + TableTd: { + className: ComponentClassName.TableTd, + components: ['Table'], + description: + 'Class applied to TableCell component rendered as a
element ()', + }, + TableTh: { + className: ComponentClassName.TableTh, + components: ['Table'], + description: + 'Class applied to TableCell comopnent rendered as a element ()', + }, + TableFoot: { + className: ComponentClassName.TableFoot, + components: ['Table'], + description: 'Class applied to TableFoot component', + }, + TableHead: { + className: ComponentClassName.TableHead, + components: ['Table'], + description: 'Class applied to TableHead component', + }, + TableRow: { + className: ComponentClassName.TableRow, + components: ['Table'], + description: 'Class applied to TableRow component', + }, + Tabs: { + className: ComponentClassName.Tabs, + components: ['Tabs'], + description: 'Top level element that wraps the Tabs primitive', + }, + TabsItem: { + className: ComponentClassName.TabsItem, + components: ['Tabs'], + description: 'Tab element (button) in a TabPanel', + }, + TabsList: { + className: ComponentClassName.TabsList, + components: ['Tabs'], + description: 'Top level element that wraps the TabItem primitive', + }, + TabsPanel: { + className: ComponentClassName.TabsPanel, + components: ['Tabs'], + description: 'Top level element that wraps the TabItem primitive', + }, + Text: { + className: ComponentClassName.Text, + components: ['Text'], + description: 'Top level element that wraps the Text primitive', + }, + Textarea: { + className: ComponentClassName.Textarea, + components: ['TextAreaField'], + description: 'Class applied to the text area', + }, + TextAreaField: { + className: ComponentClassName.TextAreaField, + components: ['TextAreaField'], + description: 'Top level element that wraps the TextAreaField primitive', + }, + TextField: { + className: ComponentClassName.TextField, + components: ['TextField'], + description: 'Top level element that wraps the TextField primitive', + }, + ToggleButton: { + className: ComponentClassName.ToggleButton, + components: ['ToggleButton'], + description: 'Top level element that wraps the ToggleButton primitive', + }, + ToggleButtonGroup: { + className: ComponentClassName.ToggleButtonGroup, + components: ['ToggleButton', 'ToggleButtonGroup'], + description: 'Top level element that wraps the ToggleButtonGroup primitive', + }, + VisuallyHidden: { + className: ComponentClassName.VisuallyHidden, + components: ['VisuallyHidden'], + description: 'Top level element that wraps the VisuallyHidden primitive', + }, +}; diff --git a/docs/src/components/ExpoSnack.tsx b/docs/src/components/ExpoSnack.tsx index 747750d309b..dc402f97e72 100644 --- a/docs/src/components/ExpoSnack.tsx +++ b/docs/src/components/ExpoSnack.tsx @@ -31,10 +31,11 @@ const defaultOptions: SnackOptions = { loading: 'lazy', sdkVersion: '45.0.0', dependencies: [ + '@aws-amplify/react-native', + '@aws-amplify/rtn-web-browser', '@aws-amplify/ui-react-native', 'aws-amplify@5.3.11', 'react-native-safe-area-context', - 'amazon-cognito-identity-js', '@react-native-community/netinfo', '@react-native-async-storage/async-storage', 'react-native-get-random-values', @@ -81,10 +82,14 @@ export const ExpoSnack = (options: SnackOptions) => { } setTheme(theme); - const listener = function (event) { - const [eventName, data] = event.data; + const listener = function ({ data }) { + if (!Array.isArray(data)) { + return; + } + + const [eventName, { iframeId = null } = {}] = data; - if (eventName === 'expoFrameLoaded' && data.iframeId === id.current) { + if (eventName === 'expoFrameLoaded' && iframeId === id.current) { ref.current.contentWindow.postMessage( [ 'expoDataEvent', diff --git a/docs/src/components/FlutterAuthenticatorExample.tsx b/docs/src/components/FlutterAuthenticatorExample.tsx index 9b5da669c57..6a7cfd3a43c 100644 --- a/docs/src/components/FlutterAuthenticatorExample.tsx +++ b/docs/src/components/FlutterAuthenticatorExample.tsx @@ -1,11 +1,4 @@ -import { - Alert, - Link, - Loader, - TabItem, - Tabs, - View, -} from '@aws-amplify/ui-react'; +import { Alert, Loader, Tabs, View } from '@aws-amplify/ui-react'; import React, { useCallback } from 'react'; export function FlutterAuthenticatorExample({ @@ -89,11 +82,16 @@ export function FlutterAuthenticatorExample({ 'The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".' } - - {getDeviceView('ios')} - {getDeviceView('android')} - {getDeviceView('web')} - + + + iOS + Android + Web & Desktop + + {getDeviceView('ios')} + {getDeviceView('android')} + {getDeviceView('web')} + ); } diff --git a/docs/src/components/InstallScripts.tsx b/docs/src/components/InstallScripts.tsx index 0b3e59016bb..00e3f9987cc 100644 --- a/docs/src/components/InstallScripts.tsx +++ b/docs/src/components/InstallScripts.tsx @@ -1,5 +1,5 @@ import { CopyButton } from '@/components/CopyButton'; -import { Tabs, TabItem } from '@aws-amplify/ui-react'; +import { Tabs } from '@aws-amplify/ui-react'; import { useRouter } from 'next/router'; import { Framework, REACT_NATIVE_DEPENDENCIES } from '../data/frameworks'; @@ -19,6 +19,8 @@ const frameworkInstallScript = ( component?: string ) => { const isReactNative = framework === 'react-native'; + const isLivenessReactComponent = + component === 'liveness' && framework === 'react'; const packageManagerPrefix = `${ packageManager === 'npm' ? 'npm install' : 'yarn add' @@ -26,7 +28,7 @@ const frameworkInstallScript = ( const extraDependencies = `${ isReactNative ? ` ${REACT_NATIVE_DEPENDENCIES}` : '' - }`; + }${isLivenessReactComponent ? `@5.x` : ''}`; const componentSubpackage = component ? `-${component}` : ''; @@ -76,21 +78,25 @@ export const InstallScripts = ({ } return ( - - + + + npm + yarn + + - - + + - - + + ); }; diff --git a/docs/src/components/Layout/FrameworkChooser.tsx b/docs/src/components/Layout/FrameworkChooser.tsx index dc0ccc4117d..482d0bc53b7 100644 --- a/docs/src/components/Layout/FrameworkChooser.tsx +++ b/docs/src/components/Layout/FrameworkChooser.tsx @@ -1,5 +1,5 @@ import { Flex, Button } from '@aws-amplify/ui-react'; -import Link from 'next/link'; +import NextLink from 'next/link'; import { useRouter } from 'next/router'; import { FRAMEWORKS, FRAMEWORK_DISPLAY_NAMES } from '@/data/frameworks'; @@ -41,9 +41,9 @@ const FrameworkLink = ({ return isDisabled ? ( frameworkButton ) : ( - + {frameworkButton} - + ); }; diff --git a/docs/src/components/Layout/LogoLink.tsx b/docs/src/components/Layout/LogoLink.tsx index 1c5e87061e2..6970a600e2e 100644 --- a/docs/src/components/Layout/LogoLink.tsx +++ b/docs/src/components/Layout/LogoLink.tsx @@ -1,4 +1,4 @@ -import Link from 'next/link'; +import NextLink from 'next/link'; import { VisuallyHidden } from '@aws-amplify/ui-react'; @@ -11,11 +11,11 @@ interface LogoLinkProps { export const LogoLink = ({ platform, onClick }: LogoLinkProps) => { return ( - + Amplify UI Home - + ); }; diff --git a/docs/src/components/Layout/PageTabLayout.tsx b/docs/src/components/Layout/PageTabLayout.tsx index 3dfce936af9..444535e0d6d 100644 --- a/docs/src/components/Layout/PageTabLayout.tsx +++ b/docs/src/components/Layout/PageTabLayout.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { useRouter } from 'next/router'; -import { Tabs, TabItem, View } from '@aws-amplify/ui-react'; +import { Tabs, View } from '@aws-amplify/ui-react'; export const PageTabLayout = ({ tabComponents, }: { - tabComponents: [{ title: string; children: React.Component }]; + tabComponents: [{ title: string; children: React.ReactNode }]; }) => { const { query: { tab = '', platform }, @@ -17,42 +17,50 @@ export const PageTabLayout = ({ title.toLocaleLowerCase() ); - const getIndex = React.useCallback( - (tab: string) => (tab === '' ? 0 : tabComponentsMap.indexOf(tab)), + const getValue = React.useCallback( + (tab: string) => (tab === '' ? tabComponentsMap[0] : tab), [tabComponentsMap] ); - const defaultIndex = getIndex(tab as string); - const [tabIndex, setTabIndex] = React.useState(defaultIndex); - const changeURL = (index) => { + const defaultValue = getValue(tab as string); + + const [currentTab, setCurrentTab] = React.useState(defaultValue); + const changeURL = (tab) => { push( { pathname, query: { platform, - ...(index != 0 && { tab: tabComponents[index].title.toLowerCase() }), + ...(tab !== tabComponentsMap[0] ? { tab: tab.toLowerCase() } : null), }, }, undefined, { shallow: true } ); - setTabIndex(index); + setCurrentTab(tab); }; React.useEffect(() => { - setTabIndex(getIndex(tab as string)); - }, [tab, getIndex]); + setCurrentTab(getValue(tab as string)); + }, [tab, getValue]); return ( - + + {tabComponents.map(({ title }, idx) => ( + + {title} + + ))} + {tabComponents.map(({ title, children }, idx) => ( - + {children} - + ))} - + ); }; diff --git a/docs/src/components/Layout/Sidebar.tsx b/docs/src/components/Layout/Sidebar.tsx index 515f333a132..a69f390ff84 100644 --- a/docs/src/components/Layout/Sidebar.tsx +++ b/docs/src/components/Layout/Sidebar.tsx @@ -12,8 +12,7 @@ import { Text, Flex, Collection, - Expander, - ExpanderItem, + Accordion, useTheme, } from '@aws-amplify/ui-react'; import { @@ -25,7 +24,7 @@ import { primitiveComponents, } from '../../data/links'; -import Link from 'next/link'; +import NextLink from 'next/link'; import { FrameworkChooser } from './FrameworkChooser'; import { LogoLink } from './LogoLink'; import { MenuButton } from './MenuButton'; @@ -67,11 +66,11 @@ const NavLink = ({ } return ( - + {children} - + ); }; @@ -123,7 +122,7 @@ const ExpanderTitle = ({ Icon, text }) => { height: tokens.fontSizes.large, width: tokens.fontSizes.large, }} - color={tokens.colors.brand.primary[60]} + color={tokens.colors.primary[60]} /> {text} @@ -136,7 +135,7 @@ const SecondaryNav = (props) => { const { platform } = props; // Extract section from URL (/section/... => section) let section = pathname.split('/')[2]; - const [value, setValue] = React.useState([section]); + const [value, setValue] = React.useState([section]); const isFlutter = platform === 'flutter'; const isReactNative = platform === 'react-native'; @@ -147,78 +146,89 @@ const SecondaryNav = (props) => { const hideGuidesExpander = isFlutter || isReactNative || isAndroid || isSwift; return ( - + { - + - } - value="getting-started" - > - {gettingStarted.map(({ label, ...rest }) => ( - - {label} - - ))} - + + + + {gettingStarted.map(({ label, ...rest }) => ( + + {label} + + ))} + + } {platform === 'react' ? ( - } - value="components" - > - {primitiveComponents.map(({ heading, components }, i) => ( - - ))} - + + + + + + + {primitiveComponents.map(({ heading, components }, i) => ( + + ))} + + ) : null} - + - } - value="connected-components" - > - {connectedComponents.map(({ label, href, ...rest }) => ( - - {label} - - ))} - - - {/* Android and Swift don't have theming at this time */} - {hideTheming ? null : ( - } - value="theming" - > - {theming.map(({ label, ...rest }) => ( - + + + + {connectedComponents.map(({ label, href, ...rest }) => ( + {label} ))} - + + + + {/* Android and Swift don't have theming at this time */} + {hideTheming ? null : ( + + + + + + + {theming.map(({ label, ...rest }) => ( + + {label} + + ))} + + )} {/* Flutter, React Native, Android, and Swift don't have guides at this time */} {hideGuidesExpander ? null : ( - } - value="guides" - > - {guides.map(({ label, ...rest }) => ( - - {label} - - ))} - + + + + + + + {guides.map(({ label, ...rest }) => ( + + {label} + + ))} + + )} - + ); }; diff --git a/docs/src/components/Logo.tsx b/docs/src/components/Logo.tsx index c4d7fdbd119..7d847b682bf 100644 --- a/docs/src/components/Logo.tsx +++ b/docs/src/components/Logo.tsx @@ -227,7 +227,7 @@ export const Logo = () => { /> ); diff --git a/docs/src/components/ResponsiveTable.tsx b/docs/src/components/ResponsiveTable.tsx index fc7b3050c8e..91f2bd58245 100644 --- a/docs/src/components/ResponsiveTable.tsx +++ b/docs/src/components/ResponsiveTable.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { classNames } from '@aws-amplify/ui'; import { Table, diff --git a/docs/src/components/SocialProviderDemo.tsx b/docs/src/components/SocialProviderDemo.tsx index 03a018da776..d4612097e10 100644 --- a/docs/src/components/SocialProviderDemo.tsx +++ b/docs/src/components/SocialProviderDemo.tsx @@ -1,7 +1,7 @@ import { translations } from '@aws-amplify/ui'; import { Authenticator } from '@aws-amplify/ui-react'; -import { I18n } from 'aws-amplify'; +import { I18n } from 'aws-amplify/utils'; import * as React from 'react'; type SocialProps = { diff --git a/docs/src/components/Theming/TokenBlocks.tsx b/docs/src/components/Theming/TokenBlocks.tsx index dfdc82d3b93..eeec3e39d07 100644 --- a/docs/src/components/Theming/TokenBlocks.tsx +++ b/docs/src/components/Theming/TokenBlocks.tsx @@ -5,7 +5,6 @@ import { FontValue, LineHeightValue, FontSizeValue, - BorderWidthValue, SpaceValue, RadiusValue, } from '@aws-amplify/ui'; @@ -31,7 +30,7 @@ export function SpaceBlock({ value }: SpaceBlockProps) { } type BorderWidthBlockProps = { - value: BorderWidthValue; + value: SpaceValue; }; export function BorderWidthBlock({ value }: BorderWidthBlockProps) { diff --git a/docs/src/components/Theming/TokenGroups.tsx b/docs/src/components/Theming/TokenGroups.tsx index db72aa245a0..53b19549cce 100644 --- a/docs/src/components/Theming/TokenGroups.tsx +++ b/docs/src/components/Theming/TokenGroups.tsx @@ -21,10 +21,10 @@ export const TokensColorsOverlay = () => ( // Colors, Brand export const TokensColorsBrandPrimary = () => ( - + ); export const TokensColorsBrandSecondary = () => ( - + ); // Colors, Palette diff --git a/docs/src/components/Theming/TokenList.tsx b/docs/src/components/Theming/TokenList.tsx index 377596aba64..906913ff3c2 100644 --- a/docs/src/components/Theming/TokenList.tsx +++ b/docs/src/components/Theming/TokenList.tsx @@ -82,7 +82,7 @@ export function TokenList({ namespace, childNamespace }: TokenListProps) { /** * Get the tokens from useTheme() depending on namespace and childNamespace(s). * e.g. for namespace: 'colors' and childNamespace: ['brand', 'primary'], - * tokenNamespace will equal tokens.colors.brand.primary + * tokenNamespace will equal tokens.colors.primary */ const tokenNamespace = childNamespace ? childNamespace.reduce((namespace, childNamespace) => { diff --git a/docs/src/components/XStateInspector.tsx b/docs/src/components/XStateInspector.tsx deleted file mode 100644 index a926939aea8..00000000000 --- a/docs/src/components/XStateInspector.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { inspect } from '@xstate/inspect'; -import * as React from 'react'; - -export function XStateInspector() { - React.useLayoutEffect(() => { - inspect(); - }, []); - - return ( -