@xyo-network/react-chain-blockchain 1.16.14 → 1.16.16

package/README.md

@@ -24,6 +24,11 @@ XYO Layer One React SDK Blockchain
 
 ## Interfaces
 
+- [AccountBalanceHistoryFlexBoxProps](#interfaces/AccountBalanceHistoryFlexBoxProps)
+- [AccountBalanceHistoryTableExProps](#interfaces/AccountBalanceHistoryTableExProps)
+- [BalanceHistoryTableRowProps](#interfaces/BalanceHistoryTableRowProps)
+- [AddressTableCellProps](#interfaces/AddressTableCellProps)
+- [HashTableCellProps](#interfaces/HashTableCellProps)
 - [BlockProducerChipProps](#interfaces/BlockProducerChipProps)
 - [BlockNumberTableCellProps](#interfaces/BlockNumberTableCellProps)
 - [BlockEpochTableCellProps](#interfaces/BlockEpochTableCellProps)
@@ -32,6 +37,7 @@ XYO Layer One React SDK Blockchain
 - [BlockPayloadCountsTableCellProps](#interfaces/BlockPayloadCountsTableCellProps)
 - [BlockPayloadCountsEventData](#interfaces/BlockPayloadCountsEventData)
 - [BlockProducerTableCell](#interfaces/BlockProducerTableCell)
+- [BlockProducerTableCellInner](#interfaces/BlockProducerTableCellInner)
 - [BlockTransactionCountTableCellProps](#interfaces/BlockTransactionCountTableCellProps)
 - [BlockTransactionCountEventData](#interfaces/BlockTransactionCountEventData)
 - [BlockVerificationTableCellProps](#interfaces/BlockVerificationTableCellProps)
@@ -52,6 +58,9 @@ XYO Layer One React SDK Blockchain
 
 ## Type Aliases
 
+- [BalanceHistoryEventNouns](#type-aliases/BalanceHistoryEventNouns)
+- [TableHeadingLabels](#type-aliases/TableHeadingLabels)
+- [TableHeadings](#type-aliases/TableHeadings)
 - [BlockHeaderEventNouns](#type-aliases/BlockHeaderEventNouns)
 - [PollingState](#type-aliases/PollingState)
 - [Listener](#type-aliases/Listener)
@@ -60,15 +69,25 @@ XYO Layer One React SDK Blockchain
 ## Variables
 
 - [FeatureNotAvailable](#variables/FeatureNotAvailable)
+- [AccountBalanceHistoryFlexBox](#variables/AccountBalanceHistoryFlexBox)
+- [AccountBalanceHistoryTableEx](#variables/AccountBalanceHistoryTableEx)
+- [BalanceHistoryTableRow](#variables/BalanceHistoryTableRow)
+- [AddressTableCell](#variables/AddressTableCell)
+- [HashTableCell](#variables/HashTableCell)
+- [TableHeadingLabels](#variables/TableHeadingLabels)
 - [BlockHeadingFlexbox](#variables/BlockHeadingFlexbox)
 - [ChipSkeleton](#variables/ChipSkeleton)
 - [BlockProducerChip](#variables/BlockProducerChip)
+- [BlockAddressChip](#variables/BlockAddressChip)
 - [BlockNumberTableCell](#variables/BlockNumberTableCell)
+- [BlockNumberTableCellInner](#variables/BlockNumberTableCellInner)
 - [BlockEpochTableCell](#variables/BlockEpochTableCell)
+- [BlockEpochTableCellInner](#variables/BlockEpochTableCellInner)
 - [BlockHashTableCell](#variables/BlockHashTableCell)
 - [BlockJsonViewTableCell](#variables/BlockJsonViewTableCell)
 - [BlockPayloadCountsTableCell](#variables/BlockPayloadCountsTableCell)
 - [BlockProducerTableCell](#variables/BlockProducerTableCell)
+- [BlockProducerTableCellInner](#variables/BlockProducerTableCellInner)
 - [BlockTransactionCountTableCell](#variables/BlockTransactionCountTableCell)
 - [BlockVerificationTableCell](#variables/BlockVerificationTableCell)
 - [BlockchainTableHead](#variables/BlockchainTableHead)
@@ -79,7 +98,6 @@ XYO Layer One React SDK Blockchain
 - [StyledPulseSvgIcon](#variables/StyledPulseSvgIcon)
 - [TransactionsDialog](#variables/TransactionsDialog)
 - [BlockChainPagination](#variables/BlockChainPagination)
-- [DynamicBlockchainRenderFlexbox](#variables/DynamicBlockchainRenderFlexbox)
 - [StaticBlockchainRenderFlexBox](#variables/StaticBlockchainRenderFlexBox)
 - [ChainAnalyzerStatsDialog](#variables/ChainAnalyzerStatsDialog)
 - [ChainAnalyzerStatsDialogFromContext](#variables/ChainAnalyzerStatsDialogFromContext)
@@ -101,6 +119,7 @@ XYO Layer One React SDK Blockchain
 
 ## Functions
 
+- [formatBalanceMagnitude](#functions/formatBalanceMagnitude)
 - [blockProducer](#functions/blockProducer)
 - [buildBlockChainRenderComponent](#functions/buildBlockChainRenderComponent)
 - [payloadCountsFromBlock](#functions/payloadCountsFromBlock)
@@ -115,7 +134,6 @@ XYO Layer One React SDK Blockchain
 - [useChainPagination](#functions/useChainPagination)
 - [resolveDefinedHead](#functions/resolveDefinedHead)
 - [useChainIteratorParams](#functions/useChainIteratorParams)
-- [useChainIteratorStore](#functions/useChainIteratorStore)
 - [useChainIteratorUpdatingHead](#functions/useChainIteratorUpdatingHead)
 - [useIterateChain](#functions/useIterateChain)
 - [useTxsFromBlock](#functions/useTxsFromBlock)
@@ -263,9 +281,7 @@ function BlockchainTableEx(__namedParameters): Element;
 ***
 
 ```ts
-function blockProducer(block): Brand<Brand<Lowercase<string>, {
-}>, {
-}>;
+function blockProducer(block): Address;
 ```
 
 ## Parameters
@@ -276,9 +292,7 @@ function blockProducer(block): Brand<Brand<Lowercase<string>, {
 
 ## Returns
 
-`Brand`\<`Brand`\<`Lowercase`\<`string`\>, \{
-\}\>, \{
-\}\>
+`Address`
 
   ### <a id="buildBlockChainRenderComponent"></a>buildBlockChainRenderComponent
 
@@ -304,6 +318,26 @@ function buildBlockChainRenderComponent(BlockComponent, blockComponentProps): Pr
 
 `Promise`\<`BlockChainRenderComponent`\>
 
+  ### <a id="formatBalanceMagnitude"></a>formatBalanceMagnitude
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+function formatBalanceMagnitude(set): string;
+```
+
+## Parameters
+
+### set
+
+\[`AttoXL1`, `AttoXL1`\]
+
+## Returns
+
+`string`
+
   ### <a id="payloadCountsFromBlock"></a>payloadCountsFromBlock
 
 [**@xyo-network/react-chain-blockchain**](#../README)
@@ -338,7 +372,7 @@ function resolveDefinedHead(head, chainArchivist): Promise<Signed<BlockBoundWitn
 
 ### head
 
-`Brand`
+`Hash`
 
 ### chainArchivist
 
@@ -365,13 +399,13 @@ function useAnchorElement(): object;
 ### anchorEl
 
 ```ts
-anchorEl: null | HTMLElement;
+anchorEl: HTMLElement | null;
 ```
 
 ### anchorRef
 
 ```ts
-anchorRef: RefObject<null | HTMLButtonElement>;
+anchorRef: RefObject<HTMLButtonElement | null>;
 ```
 
 ### open
@@ -413,7 +447,7 @@ handleClose: () => void;
 ***
 
 ```ts
-function useBlockHeadingEvents<TElement>(...args): [RefObject<null | TElement>, EventDispatch<BlockHeaderEventNouns, EventVerb, string>];
+function useBlockHeadingEvents<TElement>(...args): [RefObject<TElement | null>, EventDispatch<BlockHeaderEventNouns, EventVerb, string>];
 ```
 
 ## Type Parameters
@@ -426,11 +460,11 @@ function useBlockHeadingEvents<TElement>(...args): [RefObject<null | TElement>,
 
 ### args
 
-...\[`EventDispatch`\<[`BlockHeaderEventNouns`](#../type-aliases/BlockHeaderEventNouns), `EventVerb`, `string`\>, `RefObject`\<`null` \| `TElement`\>\]
+...\[`EventDispatch`\<[`BlockHeaderEventNouns`](#../type-aliases/BlockHeaderEventNouns), `EventVerb`, `string`\>, `RefObject`\<`TElement` \| `null`\>\]
 
 ## Returns
 
-\[`RefObject`\<`null` \| `TElement`\>, `EventDispatch`\<[`BlockHeaderEventNouns`](#../type-aliases/BlockHeaderEventNouns), `EventVerb`, `string`\>\]
+\[`RefObject`\<`TElement` \| `null`\>, `EventDispatch`\<[`BlockHeaderEventNouns`](#../type-aliases/BlockHeaderEventNouns), `EventVerb`, `string`\>\]
 
   ### <a id="useBlockProducer"></a>useBlockProducer
 
@@ -439,11 +473,7 @@ function useBlockHeadingEvents<TElement>(...args): [RefObject<null | TElement>,
 ***
 
 ```ts
-function useBlockProducer(block?): 
-  | undefined
-  | Brand<Brand<Lowercase<string>, {
-}>, {
-}>;
+function useBlockProducer(block?): Address | undefined;
 ```
 
 ## Parameters
@@ -454,10 +484,7 @@ function useBlockProducer(block?):
 
 ## Returns
 
-  \| `undefined`
-  \| `Brand`\<`Brand`\<`Lowercase`\<`string`\>, \{
-\}\>, \{
-\}\>
+`Address` \| `undefined`
 
   ### <a id="useChainIteratorParams"></a>useChainIteratorParams
 
@@ -467,19 +494,24 @@ function useBlockProducer(block?):
 
 ```ts
 function useChainIteratorParams(__namedParameters): [
-  | undefined
   | {
-  chainArchivist: ArchivistInstance<ArchivistParams<AnyConfigSchema<ArchivistConfig>>, ArchivistModuleEventData, Payload>;
-  chainId: Chain;
+  chainMap: PayloadMapRead<WithStorageMeta<Payload>>;
+  chainId: ChainId;
   config: {
      api: {
         host: string;
+        initRewardsCache: boolean;
         mnemonic?: string;
         port: number;
      };
      app: {
         port: number;
      };
+     bridge: {
+        host: string;
+        mnemonic?: string;
+        port: number;
+     };
      chain: {
         id?: string;
      };
@@ -493,12 +525,14 @@ function useChainIteratorParams(__namedParameters): [
            url?: string;
         };
      };
+     mempool: {
+        enabled: boolean;
+        host: string;
+        mnemonic?: string;
+        port: number;
+     };
      producer: {
-        allowlist?: Brand<Brand<Lowercase<string>, {
-           __hex: true;
-         }>, {
-           __address: true;
-        }>[];
+        allowlist?: Address[];
         disableIntentRedeclaration?: boolean;
         healthCheckPort?: number;
         heartbeatInterval: number;
@@ -507,6 +541,12 @@ function useChainIteratorParams(__namedParameters): [
         port: number;
         rewardAddress?: string;
      };
+     rewardRedemptionApi: {
+        chainRpcApiUrl: string;
+        host: string;
+        mnemonic?: string;
+        port: number;
+     };
      storage: {
         mongo?: {
            connectionString?: string;
@@ -522,12 +562,17 @@ function useChainIteratorParams(__namedParameters): [
            otlpEndpoint?: string;
         };
      };
-     logLevel: "error" | "warn" | "info" | "log" | "debug" | "trace";
+     validation: {
+        allowedRewardRedeemers?: Address[];
+        allowedRewardEscrowAccountSigners?: Address[];
+     };
+     logLevel: "log" | "error" | "info" | "warn" | "debug" | "trace";
      silent: boolean;
   };
   head: SchemaFields & PayloadFields & object & Partial<PayloadMetaFields> & StorageMeta & BoundWitnessFields & BlockBoundWitnessFields & BlockBoundWitnessMeta & object & BoundWitnessMeta & object;
   name: CreatableName;
-}, undefined | Error, undefined | UsePromiseState];
+}
+  | undefined, Error | undefined, UsePromiseState | undefined];
 ```
 
 ## Parameters
@@ -539,19 +584,24 @@ function useChainIteratorParams(__namedParameters): [
 ## Returns
 
 \[
-  \| `undefined`
   \| \{
-  `chainArchivist`: `ArchivistInstance`\<`ArchivistParams`\<`AnyConfigSchema`\<`ArchivistConfig`\>\>, `ArchivistModuleEventData`, `Payload`\>;
-  `chainId`: `Chain`;
+  `chainMap`: `PayloadMapRead`\<`WithStorageMeta`\<`Payload`\>\>;
+  `chainId`: `ChainId`;
   `config`: \{
      `api`: \{
         `host`: `string`;
+        `initRewardsCache`: `boolean`;
         `mnemonic?`: `string`;
         `port`: `number`;
      \};
      `app`: \{
         `port`: `number`;
      \};
+     `bridge`: \{
+        `host`: `string`;
+        `mnemonic?`: `string`;
+        `port`: `number`;
+     \};
      `chain`: \{
         `id?`: `string`;
      \};
@@ -565,12 +615,14 @@ function useChainIteratorParams(__namedParameters): [
            `url?`: `string`;
         \};
      \};
+     `mempool`: \{
+        `enabled`: `boolean`;
+        `host`: `string`;
+        `mnemonic?`: `string`;
+        `port`: `number`;
+     \};
      `producer`: \{
-        `allowlist?`: `Brand`\<`Brand`\<`Lowercase`\<`string`\>, \{
-           `__hex`: `true`;
-         \}\>, \{
-           `__address`: `true`;
-        \}\>[];
+        `allowlist?`: `Address`[];
         `disableIntentRedeclaration?`: `boolean`;
         `healthCheckPort?`: `number`;
         `heartbeatInterval`: `number`;
@@ -579,6 +631,12 @@ function useChainIteratorParams(__namedParameters): [
         `port`: `number`;
         `rewardAddress?`: `string`;
      \};
+     `rewardRedemptionApi`: \{
+        `chainRpcApiUrl`: `string`;
+        `host`: `string`;
+        `mnemonic?`: `string`;
+        `port`: `number`;
+     \};
      `storage`: \{
         `mongo?`: \{
            `connectionString?`: `string`;
@@ -594,32 +652,17 @@ function useChainIteratorParams(__namedParameters): [
            `otlpEndpoint?`: `string`;
         \};
      \};
-     `logLevel`: `"error"` \| `"warn"` \| `"info"` \| `"log"` \| `"debug"` \| `"trace"`;
+     `validation`: \{
+        `allowedRewardRedeemers?`: `Address`[];
+        `allowedRewardEscrowAccountSigners?`: `Address`[];
+     \};
+     `logLevel`: `"log"` \| `"error"` \| `"info"` \| `"warn"` \| `"debug"` \| `"trace"`;
      `silent`: `boolean`;
   \};
   `head`: `SchemaFields` & `PayloadFields` & `object` & `Partial`\<`PayloadMetaFields`\> & `StorageMeta` & `BoundWitnessFields` & `BlockBoundWitnessFields` & `BlockBoundWitnessMeta` & `object` & `BoundWitnessMeta` & `object`;
   `name`: `CreatableName`;
-\}, `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
-
-  ### <a id="useChainIteratorStore"></a>useChainIteratorStore
-
-[**@xyo-network/react-chain-blockchain**](#../README)
-
-***
-
-```ts
-function useChainIteratorStore(chainIteratorParams?): Partial<ChainIteratorStoreValues>;
-```
-
-## Parameters
-
-### chainIteratorParams?
-
-`XyoChainIteratorParams`
-
-## Returns
-
-`Partial`\<[`ChainIteratorStoreValues`](#../type-aliases/ChainIteratorStoreValues)\>
+\}
+  \| `undefined`, `Error` \| `undefined`, `UsePromiseState` \| `undefined`\]
 
   ### <a id="useChainIteratorUpdatingHead"></a>useChainIteratorUpdatingHead
 
@@ -628,7 +671,7 @@ function useChainIteratorStore(chainIteratorParams?): Partial<ChainIteratorStore
 ***
 
 ```ts
-function useChainIteratorUpdatingHead(__namedParameters): undefined | Error;
+function useChainIteratorUpdatingHead(__namedParameters): Error | undefined;
 ```
 
 ## Parameters
@@ -639,7 +682,7 @@ function useChainIteratorUpdatingHead(__namedParameters): undefined | Error;
 
 ## Returns
 
-`undefined` \| `Error`
+`Error` \| `undefined`
 
   ### <a id="useChainPagination"></a>useChainPagination
 
@@ -694,7 +737,7 @@ page: number;
 ### paginatedBlockComponents
 
 ```ts
-paginatedBlockComponents: undefined | BlockChainRenderComponent[];
+paginatedBlockComponents: BlockChainRenderComponent[] | undefined;
 ```
 
   ### <a id="useDynamicBlockComponents"></a>useDynamicBlockComponents
@@ -744,7 +787,7 @@ onAddBlock: (block) => Promise<void>;
 
 #### block
 
-`undefined` | `HydratedBlock`
+`HydratedBlock` | `undefined`
 
 ### Returns
 
@@ -757,7 +800,7 @@ onAddBlock: (block) => Promise<void>;
 ***
 
 ```ts
-function useIterateChain(chainIteratorParams?, maxDepth?): [undefined | HydratedBlock[], undefined | Error, undefined | UsePromiseState];
+function useIterateChain(chainIteratorParams?, maxDepth?): [HydratedBlock[] | undefined, Error | undefined, UsePromiseState | undefined];
 ```
 
 ## Parameters
@@ -772,7 +815,7 @@ function useIterateChain(chainIteratorParams?, maxDepth?): [undefined | Hydrated
 
 ## Returns
 
-\[`undefined` \| `HydratedBlock`[], `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
+\[`HydratedBlock`[] \| `undefined`, `Error` \| `undefined`, `UsePromiseState` \| `undefined`\]
 
   ### <a id="useOnBlock"></a>useOnBlock
 
@@ -781,127 +824,2319 @@ function useIterateChain(chainIteratorParams?, maxDepth?): [undefined | Hydrated
 ***
 
 ```ts
-function useOnBlock(
-   initialHeadNumber?, 
-   onAddBlock?, 
-   liveHead?, 
-   pollingState?): HydratedBlock[];
+function useOnBlock(
+   initialHeadNumber?, 
+   onAddBlock?, 
+   liveHead?, 
+   pollingState?): HydratedBlock[];
+```
+
+## Parameters
+
+### initialHeadNumber?
+
+`number`
+
+### onAddBlock?
+
+(`block`) => `Promise`\<`void`\>
+
+### liveHead?
+
+`HydratedBlock`
+
+### pollingState?
+
+[`PollingState`](#../type-aliases/PollingState)
+
+## Returns
+
+`HydratedBlock`[]
+
+  ### <a id="usePayloadCountsFromBlock"></a>usePayloadCountsFromBlock
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+function usePayloadCountsFromBlock(block?): [number | undefined, number | undefined, Error | undefined];
+```
+
+## Parameters
+
+### block?
+
+`HydratedBlock`
+
+## Returns
+
+\[`number` \| `undefined`, `number` \| `undefined`, `Error` \| `undefined`\]
+
+  ### <a id="useStaticBlockComponents"></a>useStaticBlockComponents
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+function useStaticBlockComponents(
+   BlockComponent, 
+   params?, 
+   blocks?): object;
+```
+
+## Parameters
+
+### BlockComponent
+
+`ComponentType`\<`BlockComponentWithTxsProps`\>
+
+### params?
+
+`XyoChainIteratorParams`
+
+### blocks?
+
+`HydratedBlock`[]
+
+## Returns
+
+`object`
+
+### blockComponents
+
+```ts
+blockComponents: BlockChainRenderComponent[] | undefined;
+```
+
+### errors
+
+```ts
+errors: Error | undefined = blockComponentsError;
+```
+
+  ### <a id="useTxsFromBlock"></a>useTxsFromBlock
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+function useTxsFromBlock(block?): [
+  | [WithStorageMeta<Signed<TransactionBoundWitness>>, Hash][]
+  | undefined, Error | undefined, UsePromiseState | undefined];
+```
+
+## Parameters
+
+### block?
+
+`HydratedBlock`
+
+## Returns
+
+\[
+  \| \[`WithStorageMeta`\<`Signed`\<`TransactionBoundWitness`\>\>, `Hash`\][]
+  \| `undefined`, `Error` \| `undefined`, `UsePromiseState` \| `undefined`\]
+
+### interfaces
+
+  ### <a id="AccountBalanceHistoryFlexBoxProps"></a>AccountBalanceHistoryFlexBoxProps
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+## Extends
+
+- `FlexBoxProps`
+
+## Properties
+
+### border?
+
+```ts
+optional border: 
+  | ResponsiveStyleValue<
+  | number
+  | string & object
+  | "inset"
+  | "hidden"
+  | "-moz-initial"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
+  | "aliceblue"
+  | "antiquewhite"
+  | "aqua"
+  | "aquamarine"
+  | "azure"
+  | "beige"
+  | "bisque"
+  | "black"
+  | "blanchedalmond"
+  | "blue"
+  | "blueviolet"
+  | "brown"
+  | "burlywood"
+  | "cadetblue"
+  | "chartreuse"
+  | "chocolate"
+  | "coral"
+  | "cornflowerblue"
+  | "cornsilk"
+  | "crimson"
+  | "cyan"
+  | "darkblue"
+  | "darkcyan"
+  | "darkgoldenrod"
+  | "darkgray"
+  | "darkgreen"
+  | "darkgrey"
+  | "darkkhaki"
+  | "darkmagenta"
+  | "darkolivegreen"
+  | "darkorange"
+  | "darkorchid"
+  | "darkred"
+  | "darksalmon"
+  | "darkseagreen"
+  | "darkslateblue"
+  | "darkslategray"
+  | "darkslategrey"
+  | "darkturquoise"
+  | "darkviolet"
+  | "deeppink"
+  | "deepskyblue"
+  | "dimgray"
+  | "dimgrey"
+  | "dodgerblue"
+  | "firebrick"
+  | "floralwhite"
+  | "forestgreen"
+  | "fuchsia"
+  | "gainsboro"
+  | "ghostwhite"
+  | "gold"
+  | "goldenrod"
+  | "gray"
+  | "green"
+  | "greenyellow"
+  | "grey"
+  | "honeydew"
+  | "hotpink"
+  | "indianred"
+  | "indigo"
+  | "ivory"
+  | "khaki"
+  | "lavender"
+  | "lavenderblush"
+  | "lawngreen"
+  | "lemonchiffon"
+  | "lightblue"
+  | "lightcoral"
+  | "lightcyan"
+  | "lightgoldenrodyellow"
+  | "lightgray"
+  | "lightgreen"
+  | "lightgrey"
+  | "lightpink"
+  | "lightsalmon"
+  | "lightseagreen"
+  | "lightskyblue"
+  | "lightslategray"
+  | "lightslategrey"
+  | "lightsteelblue"
+  | "lightyellow"
+  | "lime"
+  | "limegreen"
+  | "linen"
+  | "magenta"
+  | "maroon"
+  | "mediumaquamarine"
+  | "mediumblue"
+  | "mediumorchid"
+  | "mediumpurple"
+  | "mediumseagreen"
+  | "mediumslateblue"
+  | "mediumspringgreen"
+  | "mediumturquoise"
+  | "mediumvioletred"
+  | "midnightblue"
+  | "mintcream"
+  | "mistyrose"
+  | "moccasin"
+  | "navajowhite"
+  | "navy"
+  | "oldlace"
+  | "olive"
+  | "olivedrab"
+  | "orange"
+  | "orangered"
+  | "orchid"
+  | "palegoldenrod"
+  | "palegreen"
+  | "paleturquoise"
+  | "palevioletred"
+  | "papayawhip"
+  | "peachpuff"
+  | "peru"
+  | "pink"
+  | "plum"
+  | "powderblue"
+  | "purple"
+  | "rebeccapurple"
+  | "red"
+  | "rosybrown"
+  | "royalblue"
+  | "saddlebrown"
+  | "salmon"
+  | "sandybrown"
+  | "seagreen"
+  | "seashell"
+  | "sienna"
+  | "silver"
+  | "skyblue"
+  | "slateblue"
+  | "slategray"
+  | "slategrey"
+  | "snow"
+  | "springgreen"
+  | "steelblue"
+  | "tan"
+  | "teal"
+  | "thistle"
+  | "tomato"
+  | "turquoise"
+  | "violet"
+  | "wheat"
+  | "white"
+  | "whitesmoke"
+  | "yellow"
+  | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
+  | "ActiveBorder"
+  | "ActiveCaption"
+  | "AppWorkspace"
+  | "Background"
+  | "ButtonHighlight"
+  | "ButtonShadow"
+  | "CaptionText"
+  | "InactiveBorder"
+  | "InactiveCaption"
+  | "InactiveCaptionText"
+  | "InfoBackground"
+  | "InfoText"
+  | "Menu"
+  | "MenuText"
+  | "Scrollbar"
+  | "ThreeDDarkShadow"
+  | "ThreeDFace"
+  | "ThreeDHighlight"
+  | "ThreeDLightShadow"
+  | "ThreeDShadow"
+  | "Window"
+  | "WindowFrame"
+  | "WindowText"
+  | "currentColor"
+  | undefined>
+  | (theme) => ResponsiveStyleValue<
+  | number
+  | string & object
+  | "inset"
+  | "hidden"
+  | "-moz-initial"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
+  | "aliceblue"
+  | "antiquewhite"
+  | "aqua"
+  | "aquamarine"
+  | "azure"
+  | "beige"
+  | "bisque"
+  | "black"
+  | "blanchedalmond"
+  | "blue"
+  | "blueviolet"
+  | "brown"
+  | "burlywood"
+  | "cadetblue"
+  | "chartreuse"
+  | "chocolate"
+  | "coral"
+  | "cornflowerblue"
+  | "cornsilk"
+  | "crimson"
+  | "cyan"
+  | "darkblue"
+  | "darkcyan"
+  | "darkgoldenrod"
+  | "darkgray"
+  | "darkgreen"
+  | "darkgrey"
+  | "darkkhaki"
+  | "darkmagenta"
+  | "darkolivegreen"
+  | "darkorange"
+  | "darkorchid"
+  | "darkred"
+  | "darksalmon"
+  | "darkseagreen"
+  | "darkslateblue"
+  | "darkslategray"
+  | "darkslategrey"
+  | "darkturquoise"
+  | "darkviolet"
+  | "deeppink"
+  | "deepskyblue"
+  | "dimgray"
+  | "dimgrey"
+  | "dodgerblue"
+  | "firebrick"
+  | "floralwhite"
+  | "forestgreen"
+  | "fuchsia"
+  | "gainsboro"
+  | "ghostwhite"
+  | "gold"
+  | "goldenrod"
+  | "gray"
+  | "green"
+  | "greenyellow"
+  | "grey"
+  | "honeydew"
+  | "hotpink"
+  | "indianred"
+  | "indigo"
+  | "ivory"
+  | "khaki"
+  | "lavender"
+  | "lavenderblush"
+  | "lawngreen"
+  | "lemonchiffon"
+  | "lightblue"
+  | "lightcoral"
+  | "lightcyan"
+  | "lightgoldenrodyellow"
+  | "lightgray"
+  | "lightgreen"
+  | "lightgrey"
+  | "lightpink"
+  | "lightsalmon"
+  | "lightseagreen"
+  | "lightskyblue"
+  | "lightslategray"
+  | "lightslategrey"
+  | "lightsteelblue"
+  | "lightyellow"
+  | "lime"
+  | "limegreen"
+  | "linen"
+  | "magenta"
+  | "maroon"
+  | "mediumaquamarine"
+  | "mediumblue"
+  | "mediumorchid"
+  | "mediumpurple"
+  | "mediumseagreen"
+  | "mediumslateblue"
+  | "mediumspringgreen"
+  | "mediumturquoise"
+  | "mediumvioletred"
+  | "midnightblue"
+  | "mintcream"
+  | "mistyrose"
+  | "moccasin"
+  | "navajowhite"
+  | "navy"
+  | "oldlace"
+  | "olive"
+  | "olivedrab"
+  | "orange"
+  | "orangered"
+  | "orchid"
+  | "palegoldenrod"
+  | "palegreen"
+  | "paleturquoise"
+  | "palevioletred"
+  | "papayawhip"
+  | "peachpuff"
+  | "peru"
+  | "pink"
+  | "plum"
+  | "powderblue"
+  | "purple"
+  | "rebeccapurple"
+  | "red"
+  | "rosybrown"
+  | "royalblue"
+  | "saddlebrown"
+  | "salmon"
+  | "sandybrown"
+  | "seagreen"
+  | "seashell"
+  | "sienna"
+  | "silver"
+  | "skyblue"
+  | "slateblue"
+  | "slategray"
+  | "slategrey"
+  | "snow"
+  | "springgreen"
+  | "steelblue"
+  | "tan"
+  | "teal"
+  | "thistle"
+  | "tomato"
+  | "turquoise"
+  | "violet"
+  | "wheat"
+  | "white"
+  | "whitesmoke"
+  | "yellow"
+  | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
+  | "ActiveBorder"
+  | "ActiveCaption"
+  | "AppWorkspace"
+  | "Background"
+  | "ButtonHighlight"
+  | "ButtonShadow"
+  | "CaptionText"
+  | "InactiveBorder"
+  | "InactiveCaption"
+  | "InactiveCaptionText"
+  | "InfoBackground"
+  | "InfoText"
+  | "Menu"
+  | "MenuText"
+  | "Scrollbar"
+  | "ThreeDDarkShadow"
+  | "ThreeDFace"
+  | "ThreeDHighlight"
+  | "ThreeDLightShadow"
+  | "ThreeDShadow"
+  | "Window"
+  | "WindowFrame"
+  | "WindowText"
+  | "currentColor"
+| undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.border
+```
+
+***
+
+### borderTop?
+
+```ts
+optional borderTop: 
+  | ResponsiveStyleValue<BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderTop<string | number> | readonly NonNullable<BorderTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderTop
+```
+
+***
+
+### borderRight?
+
+```ts
+optional borderRight: 
+  | ResponsiveStyleValue<BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderRight<string | number> | readonly NonNullable<BorderRight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderRight
+```
+
+***
+
+### borderBottom?
+
+```ts
+optional borderBottom: 
+  | ResponsiveStyleValue<BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderBottom<string | number> | readonly NonNullable<BorderBottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderBottom
+```
+
+***
+
+### borderLeft?
+
+```ts
+optional borderLeft: 
+  | ResponsiveStyleValue<BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderLeft<string | number> | readonly NonNullable<BorderLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderLeft
+```
+
+***
+
+### borderColor?
+
+```ts
+optional borderColor: 
+  | ResponsiveStyleValue<BorderColor | readonly string[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderColor | readonly string[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderColor
+```
+
+***
+
+### borderRadius?
+
+```ts
+optional borderRadius: 
+  | ResponsiveStyleValue<BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderRadius<string | number> | readonly NonNullable<BorderRadius<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.borderRadius
+```
+
+***
+
+### display?
+
+```ts
+optional display: 
+  | ResponsiveStyleValue<readonly string[] | Display | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Display | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.display
+```
+
+***
+
+### displayPrint?
+
+```ts
+optional displayPrint: 
+  | ResponsiveStyleValue<readonly string[] | Display | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Display | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.displayPrint
+```
+
+***
+
+### overflow?
+
+```ts
+optional overflow: 
+  | ResponsiveStyleValue<readonly string[] | Overflow | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Overflow | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.overflow
+```
+
+***
+
+### textOverflow?
+
+```ts
+optional textOverflow: 
+  | ResponsiveStyleValue<readonly string[] | TextOverflow | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | TextOverflow | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.textOverflow
+```
+
+***
+
+### visibility?
+
+```ts
+optional visibility: 
+  | ResponsiveStyleValue<Visibility | readonly NonNullable<Visibility | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Visibility | readonly NonNullable<Visibility | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.visibility
+```
+
+***
+
+### whiteSpace?
+
+```ts
+optional whiteSpace: 
+  | ResponsiveStyleValue<readonly string[] | WhiteSpace | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | WhiteSpace | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.whiteSpace
+```
+
+***
+
+### flexBasis?
+
+```ts
+optional flexBasis: 
+  | ResponsiveStyleValue<FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FlexBasis<string | number> | readonly NonNullable<FlexBasis<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flexBasis
+```
+
+***
+
+### flexDirection?
+
+```ts
+optional flexDirection: 
+  | ResponsiveStyleValue<FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FlexDirection | readonly NonNullable<FlexDirection | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flexDirection
+```
+
+***
+
+### flexWrap?
+
+```ts
+optional flexWrap: 
+  | ResponsiveStyleValue<FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FlexWrap | readonly NonNullable<FlexWrap | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flexWrap
+```
+
+***
+
+### justifyContent?
+
+```ts
+optional justifyContent: 
+  | ResponsiveStyleValue<readonly string[] | JustifyContent | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | JustifyContent | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.justifyContent
+```
+
+***
+
+### alignItems?
+
+```ts
+optional alignItems: 
+  | ResponsiveStyleValue<readonly string[] | AlignItems | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | AlignItems | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.alignItems
+```
+
+***
+
+### alignContent?
+
+```ts
+optional alignContent: 
+  | ResponsiveStyleValue<readonly string[] | AlignContent | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | AlignContent | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.alignContent
+```
+
+***
+
+### order?
+
+```ts
+optional order: 
+  | ResponsiveStyleValue<Order | readonly NonNullable<Order | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Order | readonly NonNullable<Order | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.order
+```
+
+***
+
+### flex?
+
+```ts
+optional flex: 
+  | ResponsiveStyleValue<Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Flex<string | number> | readonly NonNullable<Flex<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flex
+```
+
+***
+
+### flexGrow?
+
+```ts
+optional flexGrow: 
+  | ResponsiveStyleValue<FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FlexGrow | readonly NonNullable<FlexGrow | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flexGrow
+```
+
+***
+
+### flexShrink?
+
+```ts
+optional flexShrink: 
+  | ResponsiveStyleValue<FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FlexShrink | readonly NonNullable<FlexShrink | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.flexShrink
+```
+
+***
+
+### alignSelf?
+
+```ts
+optional alignSelf: 
+  | ResponsiveStyleValue<readonly string[] | AlignSelf | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | AlignSelf | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.alignSelf
+```
+
+***
+
+### justifyItems?
+
+```ts
+optional justifyItems: 
+  | ResponsiveStyleValue<readonly string[] | JustifyItems | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | JustifyItems | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.justifyItems
+```
+
+***
+
+### justifySelf?
+
+```ts
+optional justifySelf: 
+  | ResponsiveStyleValue<readonly string[] | JustifySelf | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | JustifySelf | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.justifySelf
+```
+
+***
+
+### gap?
+
+```ts
+optional gap: 
+  | ResponsiveStyleValue<Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Gap<string | number> | readonly NonNullable<Gap<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gap
+```
+
+***
+
+### columnGap?
+
+```ts
+optional columnGap: 
+  | ResponsiveStyleValue<ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<ColumnGap<string | number> | readonly NonNullable<ColumnGap<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.columnGap
+```
+
+***
+
+### rowGap?
+
+```ts
+optional rowGap: 
+  | ResponsiveStyleValue<RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<RowGap<string | number> | readonly NonNullable<RowGap<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.rowGap
+```
+
+***
+
+### gridColumn?
+
+```ts
+optional gridColumn: 
+  | ResponsiveStyleValue<GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridColumn | readonly NonNullable<GridColumn | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridColumn
+```
+
+***
+
+### gridRow?
+
+```ts
+optional gridRow: 
+  | ResponsiveStyleValue<GridRow | readonly NonNullable<GridRow | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridRow | readonly NonNullable<GridRow | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridRow
+```
+
+***
+
+### gridAutoFlow?
+
+```ts
+optional gridAutoFlow: 
+  | ResponsiveStyleValue<readonly string[] | GridAutoFlow | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | GridAutoFlow | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridAutoFlow
+```
+
+***
+
+### gridAutoColumns?
+
+```ts
+optional gridAutoColumns: 
+  | ResponsiveStyleValue<GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridAutoColumns<string | number> | readonly NonNullable<GridAutoColumns<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridAutoColumns
+```
+
+***
+
+### gridAutoRows?
+
+```ts
+optional gridAutoRows: 
+  | ResponsiveStyleValue<GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridAutoRows<string | number> | readonly NonNullable<GridAutoRows<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridAutoRows
+```
+
+***
+
+### gridTemplateColumns?
+
+```ts
+optional gridTemplateColumns: 
+  | ResponsiveStyleValue<GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridTemplateColumns<string | number> | readonly NonNullable<GridTemplateColumns<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridTemplateColumns
+```
+
+***
+
+### gridTemplateRows?
+
+```ts
+optional gridTemplateRows: 
+  | ResponsiveStyleValue<GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridTemplateRows<string | number> | readonly NonNullable<GridTemplateRows<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridTemplateRows
+```
+
+***
+
+### gridTemplateAreas?
+
+```ts
+optional gridTemplateAreas: 
+  | ResponsiveStyleValue<readonly string[] | GridTemplateAreas | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | GridTemplateAreas | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridTemplateAreas
+```
+
+***
+
+### gridArea?
+
+```ts
+optional gridArea: 
+  | ResponsiveStyleValue<GridArea | readonly NonNullable<GridArea | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<GridArea | readonly NonNullable<GridArea | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.gridArea
+```
+
+***
+
+### bgcolor?
+
+```ts
+optional bgcolor: 
+  | ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.bgcolor
+```
+
+***
+
+### color?
+
+```ts
+optional color: 
+  | ResponsiveStyleValue<readonly string[] | Color | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Color | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.color
+```
+
+***
+
+### zIndex?
+
+```ts
+optional zIndex: 
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.zIndex
+```
+
+***
+
+### position?
+
+```ts
+optional position: 
+  | ResponsiveStyleValue<Position | readonly NonNullable<Position | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Position | readonly NonNullable<Position | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.position
+```
+
+***
+
+### top?
+
+```ts
+optional top: 
+  | ResponsiveStyleValue<Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Top<string | number> | readonly NonNullable<Top<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.top
+```
+
+***
+
+### right?
+
+```ts
+optional right: 
+  | ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.right
+```
+
+***
+
+### bottom?
+
+```ts
+optional bottom: 
+  | ResponsiveStyleValue<Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Bottom<string | number> | readonly NonNullable<Bottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.bottom
+```
+
+***
+
+### left?
+
+```ts
+optional left: 
+  | ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.left
+```
+
+***
+
+### boxShadow?
+
+```ts
+optional boxShadow: 
+  | ResponsiveStyleValue<number | BoxShadow | undefined>
+| (theme) => ResponsiveStyleValue<number | BoxShadow | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.boxShadow
+```
+
+***
+
+### width?
+
+```ts
+optional width: 
+  | ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.width
+```
+
+***
+
+### maxWidth?
+
+```ts
+optional maxWidth: 
+  | ResponsiveStyleValue<MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MaxWidth<string | number> | readonly NonNullable<MaxWidth<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.maxWidth
+```
+
+***
+
+### minWidth?
+
+```ts
+optional minWidth: 
+  | ResponsiveStyleValue<MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MinWidth<string | number> | readonly NonNullable<MinWidth<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.minWidth
+```
+
+***
+
+### height?
+
+```ts
+optional height: 
+  | ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.height
+```
+
+***
+
+### maxHeight?
+
+```ts
+optional maxHeight: 
+  | ResponsiveStyleValue<MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MaxHeight<string | number> | readonly NonNullable<MaxHeight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.maxHeight
+```
+
+***
+
+### minHeight?
+
+```ts
+optional minHeight: 
+  | ResponsiveStyleValue<MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MinHeight<string | number> | readonly NonNullable<MinHeight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.minHeight
+```
+
+***
+
+### boxSizing?
+
+```ts
+optional boxSizing: 
+  | ResponsiveStyleValue<BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.boxSizing
+```
+
+***
+
+### m?
+
+```ts
+optional m: 
+  | ResponsiveStyleValue<Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.m
+```
+
+***
+
+### mt?
+
+```ts
+optional mt: 
+  | ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.mt
+```
+
+***
+
+### mr?
+
+```ts
+optional mr: 
+  | ResponsiveStyleValue<MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.mr
+```
+
+***
+
+### mb?
+
+```ts
+optional mb: 
+  | ResponsiveStyleValue<MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.mb
+```
+
+***
+
+### ml?
+
+```ts
+optional ml: 
+  | ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.ml
+```
+
+***
+
+### mx?
+
+```ts
+optional mx: 
+  | ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.mx
+```
+
+***
+
+### my?
+
+```ts
+optional my: 
+  | ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.my
+```
+
+***
+
+### p?
+
+```ts
+optional p: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.p
+```
+
+***
+
+### pt?
+
+```ts
+optional pt: 
+  | ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.pt
+```
+
+***
+
+### pr?
+
+```ts
+optional pr: 
+  | ResponsiveStyleValue<PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.pr
+```
+
+***
+
+### pb?
+
+```ts
+optional pb: 
+  | ResponsiveStyleValue<PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.pb
+```
+
+***
+
+### pl?
+
+```ts
+optional pl: 
+  | ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.pl
+```
+
+***
+
+### px?
+
+```ts
+optional px: 
+  | ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.px
+```
+
+***
+
+### py?
+
+```ts
+optional py: 
+  | ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.py
+```
+
+***
+
+### margin?
+
+```ts
+optional margin: 
+  | ResponsiveStyleValue<Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.margin
+```
+
+***
+
+### marginTop?
+
+```ts
+optional marginTop: 
+  | ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginTop
+```
+
+***
+
+### marginRight?
+
+```ts
+optional marginRight: 
+  | ResponsiveStyleValue<MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginRight
+```
+
+***
+
+### marginBottom?
+
+```ts
+optional marginBottom: 
+  | ResponsiveStyleValue<MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginBottom
+```
+
+***
+
+### marginLeft?
+
+```ts
+optional marginLeft: 
+  | ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginLeft
+```
+
+***
+
+### marginX?
+
+```ts
+optional marginX: 
+  | ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginX
+```
+
+***
+
+### marginY?
+
+```ts
+optional marginY: 
+  | ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginY
+```
+
+***
+
+### marginInline?
+
+```ts
+optional marginInline: 
+  | ResponsiveStyleValue<MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginInline<string | number> | readonly NonNullable<MarginInline<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginInline
+```
+
+***
+
+### marginInlineStart?
+
+```ts
+optional marginInlineStart: 
+  | ResponsiveStyleValue<MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginInlineStart<string | number> | readonly NonNullable<MarginInlineStart<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginInlineStart
+```
+
+***
+
+### marginInlineEnd?
+
+```ts
+optional marginInlineEnd: 
+  | ResponsiveStyleValue<MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginInlineEnd<string | number> | readonly NonNullable<MarginInlineEnd<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginInlineEnd
+```
+
+***
+
+### marginBlock?
+
+```ts
+optional marginBlock: 
+  | ResponsiveStyleValue<MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginBlock<string | number> | readonly NonNullable<MarginBlock<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginBlock
+```
+
+***
+
+### marginBlockStart?
+
+```ts
+optional marginBlockStart: 
+  | ResponsiveStyleValue<MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginBlockStart<string | number> | readonly NonNullable<MarginBlockStart<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginBlockStart
+```
+
+***
+
+### marginBlockEnd?
+
+```ts
+optional marginBlockEnd: 
+  | ResponsiveStyleValue<MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<MarginBlockEnd<string | number> | readonly NonNullable<MarginBlockEnd<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.marginBlockEnd
+```
+
+***
+
+### padding?
+
+```ts
+optional padding: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.padding
+```
+
+***
+
+### paddingTop?
+
+```ts
+optional paddingTop: 
+  | ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingTop
+```
+
+***
+
+### paddingRight?
+
+```ts
+optional paddingRight: 
+  | ResponsiveStyleValue<PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingRight<string | number> | readonly NonNullable<PaddingRight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingRight
+```
+
+***
+
+### paddingBottom?
+
+```ts
+optional paddingBottom: 
+  | ResponsiveStyleValue<PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingBottom<string | number> | readonly NonNullable<PaddingBottom<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingBottom
+```
+
+***
+
+### paddingLeft?
+
+```ts
+optional paddingLeft: 
+  | ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingLeft
+```
+
+***
+
+### paddingX?
+
+```ts
+optional paddingX: 
+  | ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingLeft<string | number> | readonly NonNullable<PaddingLeft<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingX
+```
+
+***
+
+### paddingY?
+
+```ts
+optional paddingY: 
+  | ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingTop<string | number> | readonly NonNullable<PaddingTop<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingY
+```
+
+***
+
+### paddingInline?
+
+```ts
+optional paddingInline: 
+  | ResponsiveStyleValue<PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingInline<string | number> | readonly NonNullable<PaddingInline<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingInline
+```
+
+***
+
+### paddingInlineStart?
+
+```ts
+optional paddingInlineStart: 
+  | ResponsiveStyleValue<PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingInlineStart<string | number> | readonly NonNullable<PaddingInlineStart<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingInlineStart
+```
+
+***
+
+### paddingInlineEnd?
+
+```ts
+optional paddingInlineEnd: 
+  | ResponsiveStyleValue<PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingInlineEnd<string | number> | readonly NonNullable<PaddingInlineEnd<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingInlineEnd
+```
+
+***
+
+### paddingBlock?
+
+```ts
+optional paddingBlock: 
+  | ResponsiveStyleValue<PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingBlock<string | number> | readonly NonNullable<PaddingBlock<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingBlock
+```
+
+***
+
+### paddingBlockStart?
+
+```ts
+optional paddingBlockStart: 
+  | ResponsiveStyleValue<PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingBlockStart<string | number> | readonly NonNullable<PaddingBlockStart<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingBlockStart
+```
+
+***
+
+### paddingBlockEnd?
+
+```ts
+optional paddingBlockEnd: 
+  | ResponsiveStyleValue<PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<PaddingBlockEnd<string | number> | readonly NonNullable<PaddingBlockEnd<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.paddingBlockEnd
+```
+
+***
+
+### typography?
+
+```ts
+optional typography: 
+  | ResponsiveStyleValue<string | undefined>
+| (theme) => ResponsiveStyleValue<string | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.typography
+```
+
+***
+
+### fontFamily?
+
+```ts
+optional fontFamily: 
+  | ResponsiveStyleValue<readonly string[] | FontFamily | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | FontFamily | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.fontFamily
+```
+
+***
+
+### fontSize?
+
+```ts
+optional fontSize: 
+  | ResponsiveStyleValue<FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<FontSize<string | number> | readonly NonNullable<FontSize<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.fontSize
+```
+
+***
+
+### fontStyle?
+
+```ts
+optional fontStyle: 
+  | ResponsiveStyleValue<readonly string[] | FontStyle | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | FontStyle | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.fontStyle
+```
+
+***
+
+### fontWeight?
+
+```ts
+optional fontWeight: 
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.fontWeight
+```
+
+***
+
+### letterSpacing?
+
+```ts
+optional letterSpacing: 
+  | ResponsiveStyleValue<LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<LetterSpacing<string | number> | readonly NonNullable<LetterSpacing<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.letterSpacing
+```
+
+***
+
+### lineHeight?
+
+```ts
+optional lineHeight: 
+  | ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.lineHeight
+```
+
+***
+
+### textAlign?
+
+```ts
+optional textAlign: 
+  | ResponsiveStyleValue<TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<TextAlign | readonly NonNullable<TextAlign | undefined>[] | undefined>;
 ```
 
-## Parameters
+### Inherited from
 
-### initialHeadNumber?
+```ts
+FlexBoxProps.textAlign
+```
 
-`number`
+***
 
-### onAddBlock?
+### textTransform?
 
-(`block`) => `Promise`\<`void`\>
+```ts
+optional textTransform: 
+  | ResponsiveStyleValue<readonly string[] | TextTransform | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | TextTransform | undefined>;
+```
 
-### liveHead?
+### Inherited from
 
-`HydratedBlock`
+```ts
+FlexBoxProps.textTransform
+```
 
-### pollingState?
+***
 
-[`PollingState`](#../type-aliases/PollingState)
+### address?
 
-## Returns
+```ts
+optional address: Address;
+```
 
-`HydratedBlock`[]
+***
 
-  ### <a id="usePayloadCountsFromBlock"></a>usePayloadCountsFromBlock
+### refresh?
 
-[**@xyo-network/react-chain-blockchain**](#../README)
+```ts
+optional refresh: number;
+```
 
 ***
 
+### viewer?
+
 ```ts
-function usePayloadCountsFromBlock(block?): [undefined | number, undefined | number, undefined | Error];
+optional viewer: XyoViewer;
 ```
 
-## Parameters
+  ### <a id="AccountBalanceHistoryTableExProps"></a>AccountBalanceHistoryTableExProps
 
-### block?
+[**@xyo-network/react-chain-blockchain**](#../README)
 
-`HydratedBlock`
+***
 
-## Returns
+## Extends
 
-\[`undefined` \| `number`, `undefined` \| `number`, `undefined` \| `Error`\]
+- `TableExProps`
 
-  ### <a id="useStaticBlockComponents"></a>useStaticBlockComponents
+## Properties
 
-[**@xyo-network/react-chain-blockchain**](#../README)
+### history?
+
+```ts
+optional history: AccountBalanceHistoryItemFormatted[];
+```
 
 ***
 
+### linked?
+
 ```ts
-function useStaticBlockComponents(
-   BlockComponent, 
-   params?, 
-   blocks?): object;
+optional linked: boolean;
 ```
 
-## Parameters
+  ### <a id="AddressTableCellProps"></a>AddressTableCellProps
 
-### BlockComponent
+[**@xyo-network/react-chain-blockchain**](#../README)
 
-`ComponentType`\<`BlockComponentWithTxsProps`\>
+***
 
-### params?
+## Extends
 
-`XyoChainIteratorParams`
+- `TableCellProps`
 
-### blocks?
+## Properties
 
-`HydratedBlock`[]
+### address?
 
-## Returns
+```ts
+optional address: string;
+```
 
-`object`
+***
 
-### blockComponents
+### linked?
 
 ```ts
-blockComponents: undefined | BlockChainRenderComponent[];
+optional linked: boolean;
 ```
 
-### errors
+***
+
+### toolTipTitle?
 
 ```ts
-errors: undefined | Error = blockComponentsError;
+optional toolTipTitle: string;
 ```
 
-  ### <a id="useTxsFromBlock"></a>useTxsFromBlock
+  ### <a id="BalanceHistoryTableRowProps"></a>BalanceHistoryTableRowProps
 
 [**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
-```ts
-function useTxsFromBlock(block?): [
-  | undefined
-  | [WithStorageMeta<Signed<TransactionBoundWitness>>, Brand<Brand<Lowercase<string>, {
-}>, {
-}>][], undefined | Error, undefined | UsePromiseState];
-```
+## Extends
 
-## Parameters
+- `TableRowProps`
 
-### block?
+## Properties
 
-`HydratedBlock`
+### linked?
 
-## Returns
+```ts
+optional linked: boolean;
+```
 
-\[
-  \| `undefined`
-  \| \[`WithStorageMeta`\<`Signed`\<`TransactionBoundWitness`\>\>, `Brand`\<`Brand`\<`Lowercase`\<`string`\>, \{
-\}\>, \{
-\}\>\][], `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
+***
 
-### interfaces
+### row
+
+```ts
+row: AccountBalanceHistoryItemFormatted;
+```
 
   ### <a id="BlockChainPaginationProps"></a>BlockChainPaginationProps
 
@@ -1138,7 +3373,7 @@ BlockTableCellProps.linked
 ### block
 
 ```ts
-block: Brand;
+block: Hash;
 ```
 
 ***
@@ -1263,6 +3498,86 @@ optional linked: boolean;
 
 ### Inherited from
 
+```ts
+BlockTableCellProps.linked
+```
+
+  ### <a id="BlockProducerTableCellInner"></a>BlockProducerTableCellInner
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+## Extends
+
+- `BlockTableCellProps`
+
+## Properties
+
+### address?
+
+```ts
+optional address: string;
+```
+
+***
+
+### handleClick()?
+
+```ts
+optional handleClick: (event) => void;
+```
+
+### Parameters
+
+#### event
+
+`MouseEvent`
+
+### Returns
+
+`void`
+
+***
+
+### notAvailableDialog?
+
+```ts
+optional notAvailableDialog: boolean;
+```
+
+***
+
+### producerChipProps?
+
+```ts
+optional producerChipProps: BlockProducerChipProps;
+```
+
+***
+
+### block?
+
+```ts
+optional block: HydratedBlock;
+```
+
+### Inherited from
+
+```ts
+BlockTableCellProps.block
+```
+
+***
+
+### linked?
+
+```ts
+optional linked: boolean;
+```
+
+### Inherited from
+
 ```ts
 BlockTableCellProps.linked
 ```
@@ -1278,7 +3593,7 @@ BlockTableCellProps.linked
 ### block
 
 ```ts
-block: Brand;
+block: Hash;
 ```
 
 ***
@@ -1457,217 +3772,132 @@ optional onSubmitTx: (chainTx) => Promise<void>;
 
 ## Properties
 
-### network?
-
-```ts
-optional network: URL;
-```
-
-***
-
-### onNetworkChange()?
-
-```ts
-optional onNetworkChange: (url) => void;
-```
-
-### Parameters
-
-#### url
-
-`URL`
-
-### Returns
-
-`void`
-
-  ### <a id="PayloadBuilderComponentProps"></a>PayloadBuilderComponentProps
-
-[**@xyo-network/react-chain-blockchain**](#../README)
-
-***
-
-## Extended by
-
-- [`PayloadBuilderFlexboxProps`](#PayloadBuilderFlexboxProps)
-- [`ProducerIntentBuilderFormProps`](#ProducerIntentBuilderFormProps)
-- [`TransferBuilderFormProps`](#TransferBuilderFormProps)
-
-## Properties
-
-### onBuild()?
-
-```ts
-optional onBuild: (payload) => void;
-```
-
-### Parameters
-
-#### payload
-
-`Payload`
-
-### Returns
-
-`void`
-
-  ### <a id="PayloadBuilderFlexboxProps"></a>PayloadBuilderFlexboxProps
-
-[**@xyo-network/react-chain-blockchain**](#../README)
-
-***
-
-## Extends
-
-- [`PayloadBuilderComponentProps`](#PayloadBuilderComponentProps).`FlexBoxProps`
-
-## Properties
-
-### height?
-
-```ts
-optional height: 
-  | ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
+### network?
 
 ```ts
-FlexBoxProps.height
+optional network: URL;
 ```
 
 ***
 
-### width?
+### onNetworkChange()?
 
 ```ts
-optional width: 
-  | ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>;
+optional onNetworkChange: (url) => void;
 ```
 
-### Inherited from
+### Parameters
 
-```ts
-FlexBoxProps.width
-```
+#### url
 
-***
+`URL`
 
-### p?
+### Returns
 
-```ts
-optional p: 
-  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
-```
+`void`
 
-### Inherited from
+  ### <a id="HashTableCellProps"></a>HashTableCellProps
 
-```ts
-FlexBoxProps.p
-```
+[**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
-### color?
+## Extends
 
-```ts
-optional color: 
-  | ResponsiveStyleValue<readonly string[] | Color | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | Color | undefined>;
-```
+- `TableCellProps`
 
-### Inherited from
+## Properties
+
+### hash?
 
 ```ts
-FlexBoxProps.color
+optional hash: Hash;
 ```
 
 ***
 
-### left?
-
-```ts
-optional left: 
-  | ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
+### linked?
 
 ```ts
-FlexBoxProps.left
+optional linked: boolean;
 ```
 
 ***
 
-### right?
+### toolTipTitle?
 
 ```ts
-optional right: 
-  | ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>;
+optional toolTipTitle: string;
 ```
 
-### Inherited from
+  ### <a id="PayloadBuilderComponentProps"></a>PayloadBuilderComponentProps
 
-```ts
-FlexBoxProps.right
-```
+[**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
-### padding?
+## Extended by
 
-```ts
-optional padding: 
-  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
-```
+- [`PayloadBuilderFlexboxProps`](#PayloadBuilderFlexboxProps)
+- [`ProducerIntentBuilderFormProps`](#ProducerIntentBuilderFormProps)
+- [`TransferBuilderFormProps`](#TransferBuilderFormProps)
 
-### Inherited from
+## Properties
+
+### onBuild()?
 
 ```ts
-FlexBoxProps.padding
+optional onBuild: (payload) => void;
 ```
 
-***
+### Parameters
 
-### bgcolor?
+#### payload
 
-```ts
-optional bgcolor: 
-  | ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>;
-```
+`Payload`
 
-### Inherited from
+### Returns
 
-```ts
-FlexBoxProps.bgcolor
-```
+`void`
+
+  ### <a id="PayloadBuilderFlexboxProps"></a>PayloadBuilderFlexboxProps
+
+[**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
+## Extends
+
+- [`PayloadBuilderComponentProps`](#PayloadBuilderComponentProps).`FlexBoxProps`
+
+## Properties
+
 ### border?
 
 ```ts
 optional border: 
   | ResponsiveStyleValue<
-  | undefined
   | number
-  | "hidden"
-  | "none"
   | string & object
-  | "inherit"
   | "inset"
+  | "hidden"
   | "-moz-initial"
+  | "inherit"
   | "initial"
   | "revert"
   | "revert-layer"
   | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
   | "aliceblue"
   | "antiquewhite"
   | "aqua"
@@ -1809,7 +4039,6 @@ optional border:
   | "teal"
   | "thistle"
   | "tomato"
-  | "transparent"
   | "turquoise"
   | "violet"
   | "wheat"
@@ -1817,18 +4046,33 @@ optional border:
   | "whitesmoke"
   | "yellow"
   | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
   | "ActiveBorder"
   | "ActiveCaption"
   | "AppWorkspace"
   | "Background"
-  | "ButtonFace"
   | "ButtonHighlight"
   | "ButtonShadow"
-  | "ButtonText"
   | "CaptionText"
-  | "GrayText"
-  | "Highlight"
-  | "HighlightText"
   | "InactiveBorder"
   | "InactiveCaption"
   | "InactiveCaptionText"
@@ -1845,30 +4089,30 @@ optional border:
   | "Window"
   | "WindowFrame"
   | "WindowText"
-  | "currentcolor"
-  | "medium"
-  | "thick"
-  | "thin"
-  | "dashed"
-  | "dotted"
-  | "double"
-  | "groove"
-  | "outset"
-  | "ridge"
-  | "solid">
+  | "currentColor"
+  | undefined>
   | (theme) => ResponsiveStyleValue<
-  | undefined
   | number
-  | "hidden"
-  | "none"
   | string & object
-  | "inherit"
   | "inset"
+  | "hidden"
   | "-moz-initial"
+  | "inherit"
   | "initial"
   | "revert"
   | "revert-layer"
   | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
   | "aliceblue"
   | "antiquewhite"
   | "aqua"
@@ -2010,7 +4254,6 @@ optional border:
   | "teal"
   | "thistle"
   | "tomato"
-  | "transparent"
   | "turquoise"
   | "violet"
   | "wheat"
@@ -2018,18 +4261,33 @@ optional border:
   | "whitesmoke"
   | "yellow"
   | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
   | "ActiveBorder"
   | "ActiveCaption"
   | "AppWorkspace"
   | "Background"
-  | "ButtonFace"
   | "ButtonHighlight"
   | "ButtonShadow"
-  | "ButtonText"
   | "CaptionText"
-  | "GrayText"
-  | "Highlight"
-  | "HighlightText"
   | "InactiveBorder"
   | "InactiveCaption"
   | "InactiveCaptionText"
@@ -2046,17 +4304,8 @@ optional border:
   | "Window"
   | "WindowFrame"
   | "WindowText"
-  | "currentcolor"
-  | "medium"
-  | "thick"
-  | "thin"
-  | "dashed"
-  | "dotted"
-  | "double"
-  | "groove"
-  | "outset"
-  | "ridge"
-| "solid">;
+  | "currentColor"
+| undefined>;
 ```
 
 ### Inherited from
@@ -2135,8 +4384,8 @@ FlexBoxProps.borderLeft
 
 ```ts
 optional borderColor: 
-  | ResponsiveStyleValue<readonly string[] | BorderColor | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | BorderColor | undefined>;
+  | ResponsiveStyleValue<BorderColor | readonly string[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderColor | readonly string[] | undefined>;
 ```
 
 ### Inherited from
@@ -2659,12 +4908,44 @@ FlexBoxProps.gridArea
 
 ***
 
+### bgcolor?
+
+```ts
+optional bgcolor: 
+  | ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.bgcolor
+```
+
+***
+
+### color?
+
+```ts
+optional color: 
+  | ResponsiveStyleValue<readonly string[] | Color | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Color | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.color
+```
+
+***
+
 ### zIndex?
 
 ```ts
 optional zIndex: 
-  | ResponsiveStyleValue<undefined | string | string & object | number & object>
-| (theme) => ResponsiveStyleValue<undefined | string | string & object | number & object>;
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
 ```
 
 ### Inherited from
@@ -2707,6 +4988,22 @@ FlexBoxProps.top
 
 ***
 
+### right?
+
+```ts
+optional right: 
+  | ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.right
+```
+
+***
+
 ### bottom?
 
 ```ts
@@ -2723,6 +5020,22 @@ FlexBoxProps.bottom
 
 ***
 
+### left?
+
+```ts
+optional left: 
+  | ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.left
+```
+
+***
+
 ### boxShadow?
 
 ```ts
@@ -2739,6 +5052,22 @@ FlexBoxProps.boxShadow
 
 ***
 
+### width?
+
+```ts
+optional width: 
+  | ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.width
+```
+
+***
+
 ### maxWidth?
 
 ```ts
@@ -2771,6 +5100,22 @@ FlexBoxProps.minWidth
 
 ***
 
+### height?
+
+```ts
+optional height: 
+  | ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.height
+```
+
+***
+
 ### maxHeight?
 
 ```ts
@@ -2931,6 +5276,22 @@ FlexBoxProps.my
 
 ***
 
+### p?
+
+```ts
+optional p: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.p
+```
+
+***
+
 ### pt?
 
 ```ts
@@ -3235,6 +5596,22 @@ FlexBoxProps.marginBlockEnd
 
 ***
 
+### padding?
+
+```ts
+optional padding: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.padding
+```
+
+***
+
 ### paddingTop?
 
 ```ts
@@ -3431,8 +5808,8 @@ FlexBoxProps.paddingBlockEnd
 
 ```ts
 optional typography: 
-  | ResponsiveStyleValue<undefined | string>
-| (theme) => ResponsiveStyleValue<undefined | string>;
+  | ResponsiveStyleValue<string | undefined>
+| (theme) => ResponsiveStyleValue<string | undefined>;
 ```
 
 ### Inherited from
@@ -3495,8 +5872,8 @@ FlexBoxProps.fontStyle
 
 ```ts
 optional fontWeight: 
-  | ResponsiveStyleValue<undefined | string | string & object | number & object>
-| (theme) => ResponsiveStyleValue<undefined | string | string & object | number & object>;
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
 ```
 
 ### Inherited from
@@ -3559,8 +5936,8 @@ FlexBoxProps.textAlign
 
 ```ts
 optional textTransform: 
-  | ResponsiveStyleValue<TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined>;
+  | ResponsiveStyleValue<readonly string[] | TextTransform | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | TextTransform | undefined>;
 ```
 
 ### Inherited from
@@ -3611,151 +5988,32 @@ BuilderComponent: ComponentType<PayloadBuilderComponentProps>;
 
 ## Properties
 
-### height?
-
-```ts
-optional height: 
-  | ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.height
-```
-
-***
-
-### width?
-
-```ts
-optional width: 
-  | ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.width
-```
-
-***
-
-### p?
-
-```ts
-optional p: 
-  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.p
-```
-
-***
-
-### color?
-
-```ts
-optional color: 
-  | ResponsiveStyleValue<readonly string[] | Color | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | Color | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.color
-```
-
-***
-
-### left?
-
-```ts
-optional left: 
-  | ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.left
-```
-
-***
-
-### right?
-
-```ts
-optional right: 
-  | ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.right
-```
-
-***
-
-### padding?
-
-```ts
-optional padding: 
-  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.padding
-```
-
-***
-
-### bgcolor?
-
-```ts
-optional bgcolor: 
-  | ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>;
-```
-
-### Inherited from
-
-```ts
-FlexBoxProps.bgcolor
-```
-
-***
-
 ### border?
 
 ```ts
 optional border: 
   | ResponsiveStyleValue<
-  | undefined
   | number
-  | "hidden"
-  | "none"
   | string & object
-  | "inherit"
   | "inset"
+  | "hidden"
   | "-moz-initial"
+  | "inherit"
   | "initial"
   | "revert"
   | "revert-layer"
   | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
   | "aliceblue"
   | "antiquewhite"
   | "aqua"
@@ -3897,7 +6155,6 @@ optional border:
   | "teal"
   | "thistle"
   | "tomato"
-  | "transparent"
   | "turquoise"
   | "violet"
   | "wheat"
@@ -3905,18 +6162,33 @@ optional border:
   | "whitesmoke"
   | "yellow"
   | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
   | "ActiveBorder"
   | "ActiveCaption"
   | "AppWorkspace"
   | "Background"
-  | "ButtonFace"
   | "ButtonHighlight"
   | "ButtonShadow"
-  | "ButtonText"
   | "CaptionText"
-  | "GrayText"
-  | "Highlight"
-  | "HighlightText"
   | "InactiveBorder"
   | "InactiveCaption"
   | "InactiveCaptionText"
@@ -3933,30 +6205,30 @@ optional border:
   | "Window"
   | "WindowFrame"
   | "WindowText"
-  | "currentcolor"
-  | "medium"
-  | "thick"
-  | "thin"
-  | "dashed"
-  | "dotted"
-  | "double"
-  | "groove"
-  | "outset"
-  | "ridge"
-  | "solid">
+  | "currentColor"
+  | undefined>
   | (theme) => ResponsiveStyleValue<
-  | undefined
   | number
-  | "hidden"
-  | "none"
   | string & object
-  | "inherit"
   | "inset"
+  | "hidden"
   | "-moz-initial"
+  | "inherit"
   | "initial"
   | "revert"
   | "revert-layer"
   | "unset"
+  | "medium"
+  | "thick"
+  | "thin"
+  | "dashed"
+  | "dotted"
+  | "double"
+  | "groove"
+  | "none"
+  | "outset"
+  | "ridge"
+  | "solid"
   | "aliceblue"
   | "antiquewhite"
   | "aqua"
@@ -4098,7 +6370,6 @@ optional border:
   | "teal"
   | "thistle"
   | "tomato"
-  | "transparent"
   | "turquoise"
   | "violet"
   | "wheat"
@@ -4106,18 +6377,33 @@ optional border:
   | "whitesmoke"
   | "yellow"
   | "yellowgreen"
+  | "transparent"
+  | "AccentColor"
+  | "AccentColorText"
+  | "ActiveText"
+  | "ButtonBorder"
+  | "ButtonFace"
+  | "ButtonText"
+  | "Canvas"
+  | "CanvasText"
+  | "Field"
+  | "FieldText"
+  | "GrayText"
+  | "Highlight"
+  | "HighlightText"
+  | "LinkText"
+  | "Mark"
+  | "MarkText"
+  | "SelectedItem"
+  | "SelectedItemText"
+  | "VisitedText"
   | "ActiveBorder"
   | "ActiveCaption"
   | "AppWorkspace"
   | "Background"
-  | "ButtonFace"
   | "ButtonHighlight"
   | "ButtonShadow"
-  | "ButtonText"
   | "CaptionText"
-  | "GrayText"
-  | "Highlight"
-  | "HighlightText"
   | "InactiveBorder"
   | "InactiveCaption"
   | "InactiveCaptionText"
@@ -4127,24 +6413,15 @@ optional border:
   | "MenuText"
   | "Scrollbar"
   | "ThreeDDarkShadow"
-  | "ThreeDFace"
-  | "ThreeDHighlight"
-  | "ThreeDLightShadow"
-  | "ThreeDShadow"
-  | "Window"
-  | "WindowFrame"
-  | "WindowText"
-  | "currentcolor"
-  | "medium"
-  | "thick"
-  | "thin"
-  | "dashed"
-  | "dotted"
-  | "double"
-  | "groove"
-  | "outset"
-  | "ridge"
-| "solid">;
+  | "ThreeDFace"
+  | "ThreeDHighlight"
+  | "ThreeDLightShadow"
+  | "ThreeDShadow"
+  | "Window"
+  | "WindowFrame"
+  | "WindowText"
+  | "currentColor"
+| undefined>;
 ```
 
 ### Inherited from
@@ -4223,8 +6500,8 @@ FlexBoxProps.borderLeft
 
 ```ts
 optional borderColor: 
-  | ResponsiveStyleValue<readonly string[] | BorderColor | undefined>
-| (theme) => ResponsiveStyleValue<readonly string[] | BorderColor | undefined>;
+  | ResponsiveStyleValue<BorderColor | readonly string[] | undefined>
+| (theme) => ResponsiveStyleValue<BorderColor | readonly string[] | undefined>;
 ```
 
 ### Inherited from
@@ -4747,12 +7024,44 @@ FlexBoxProps.gridArea
 
 ***
 
+### bgcolor?
+
+```ts
+optional bgcolor: 
+  | ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | BackgroundColor | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.bgcolor
+```
+
+***
+
+### color?
+
+```ts
+optional color: 
+  | ResponsiveStyleValue<readonly string[] | Color | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | Color | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.color
+```
+
+***
+
 ### zIndex?
 
 ```ts
 optional zIndex: 
-  | ResponsiveStyleValue<undefined | string | string & object | number & object>
-| (theme) => ResponsiveStyleValue<undefined | string | string & object | number & object>;
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
 ```
 
 ### Inherited from
@@ -4795,6 +7104,22 @@ FlexBoxProps.top
 
 ***
 
+### right?
+
+```ts
+optional right: 
+  | ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Right<string | number> | readonly NonNullable<Right<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.right
+```
+
+***
+
 ### bottom?
 
 ```ts
@@ -4811,6 +7136,22 @@ FlexBoxProps.bottom
 
 ***
 
+### left?
+
+```ts
+optional left: 
+  | ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Left<string | number> | readonly NonNullable<Left<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.left
+```
+
+***
+
 ### boxShadow?
 
 ```ts
@@ -4827,6 +7168,22 @@ FlexBoxProps.boxShadow
 
 ***
 
+### width?
+
+```ts
+optional width: 
+  | ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Width<string | number> | readonly NonNullable<Width<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.width
+```
+
+***
+
 ### maxWidth?
 
 ```ts
@@ -4859,6 +7216,22 @@ FlexBoxProps.minWidth
 
 ***
 
+### height?
+
+```ts
+optional height: 
+  | ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Height<string | number> | readonly NonNullable<Height<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.height
+```
+
+***
+
 ### maxHeight?
 
 ```ts
@@ -5019,6 +7392,22 @@ FlexBoxProps.my
 
 ***
 
+### p?
+
+```ts
+optional p: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.p
+```
+
+***
+
 ### pt?
 
 ```ts
@@ -5323,6 +7712,22 @@ FlexBoxProps.marginBlockEnd
 
 ***
 
+### padding?
+
+```ts
+optional padding: 
+  | ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>
+| (theme) => ResponsiveStyleValue<Padding<string | number> | readonly NonNullable<Padding<string | number> | undefined>[] | undefined>;
+```
+
+### Inherited from
+
+```ts
+FlexBoxProps.padding
+```
+
+***
+
 ### paddingTop?
 
 ```ts
@@ -5519,8 +7924,8 @@ FlexBoxProps.paddingBlockEnd
 
 ```ts
 optional typography: 
-  | ResponsiveStyleValue<undefined | string>
-| (theme) => ResponsiveStyleValue<undefined | string>;
+  | ResponsiveStyleValue<string | undefined>
+| (theme) => ResponsiveStyleValue<string | undefined>;
 ```
 
 ### Inherited from
@@ -5583,8 +7988,8 @@ FlexBoxProps.fontStyle
 
 ```ts
 optional fontWeight: 
-  | ResponsiveStyleValue<undefined | string | string & object | number & object>
-| (theme) => ResponsiveStyleValue<undefined | string | string & object | number & object>;
+  | ResponsiveStyleValue<string | string & object | number & object | undefined>
+| (theme) => ResponsiveStyleValue<string | string & object | number & object | undefined>;
 ```
 
 ### Inherited from
@@ -5647,8 +8052,8 @@ FlexBoxProps.textAlign
 
 ```ts
 optional textTransform: 
-  | ResponsiveStyleValue<TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined>
-| (theme) => ResponsiveStyleValue<TextTransform | readonly NonNullable<TextTransform | undefined>[] | undefined>;
+  | ResponsiveStyleValue<readonly string[] | TextTransform | undefined>
+| (theme) => ResponsiveStyleValue<readonly string[] | TextTransform | undefined>;
 ```
 
 ### Inherited from
@@ -5738,9 +8143,7 @@ optional onBuild: (payload) => void;
 ### transactions?
 
 ```ts
-optional transactions: Brand<Brand<Lowercase<string>, {
-}>, {
-}>[];
+optional transactions: Hash[];
 ```
 
   ### <a id="TransactionsDialogProps"></a>TransactionsDialogProps
@@ -5805,6 +8208,16 @@ optional onBuild: (payload) => void;
 
 ### type-aliases
 
+  ### <a id="BalanceHistoryEventNouns"></a>BalanceHistoryEventNouns
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+type BalanceHistoryEventNouns = ExtendEventNoun<"amount" | "blockNumber" | "tx-hash">;
+```
+
   ### <a id="BlockHeaderEventNouns"></a>BlockHeaderEventNouns
 
 [**@xyo-network/react-chain-blockchain**](#../README)
@@ -5883,10 +8296,87 @@ type Listener = (...args) => void;
 
 ```ts
 type PollingState = "paused" | "running";
+```
+
+  ### <a id="TableHeadingLabels"></a>TableHeadingLabels
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+type TableHeadingLabels = 
+  | "Tx Hash"
+  | "BlockNumber"
+  | "Timestamp"
+  | "From"
+  | "To"
+  | "Amount"
+  | "Debug";
+```
+
+  ### <a id="TableHeadings"></a>TableHeadings
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+type TableHeadings = { [key in keyof AccountBalanceHistoryItemFormatted]: TableHeadingLabels };
 ```
 
 ### variables
 
+  ### <a id="AccountBalanceHistoryFlexBox"></a>AccountBalanceHistoryFlexBox
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const AccountBalanceHistoryFlexBox: React.FC<AccountBalanceHistoryFlexBoxProps>;
+```
+
+  ### <a id="AccountBalanceHistoryTableEx"></a>AccountBalanceHistoryTableEx
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const AccountBalanceHistoryTableEx: React.FC<AccountBalanceHistoryTableExProps>;
+```
+
+  ### <a id="AddressTableCell"></a>AddressTableCell
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const AddressTableCell: React.FC<AddressTableCellProps>;
+```
+
+  ### <a id="BalanceHistoryTableRow"></a>BalanceHistoryTableRow
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const BalanceHistoryTableRow: React.FC<BalanceHistoryTableRowProps>;
+```
+
+  ### <a id="BlockAddressChip"></a>BlockAddressChip
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const BlockAddressChip: React.FC<BlockProducerChipProps & object>;
+```
+
   ### <a id="BlockChainPagination"></a>BlockChainPagination
 
 [**@xyo-network/react-chain-blockchain**](#../README)
@@ -5915,6 +8405,16 @@ const BlockChainTableRow: React.FC<BlockChainTableRowProps>;
 
 ```ts
 const BlockEpochTableCell: React.FC<BlockEpochTableCellProps>;
+```
+
+  ### <a id="BlockEpochTableCellInner"></a>BlockEpochTableCellInner
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const BlockEpochTableCellInner: React.FC<BlockEpochTableCellProps & object>;
 ```
 
   ### <a id="BlockHashTableCell"></a>BlockHashTableCell
@@ -5967,6 +8467,16 @@ const BlockListWrapperFlexBox: StyledComponent<Pick<BusyBoxProps, keyof BusyBoxP
 
 ```ts
 const BlockNumberTableCell: React.FC<BlockNumberTableCellProps>;
+```
+
+  ### <a id="BlockNumberTableCellInner"></a>BlockNumberTableCellInner
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+const BlockNumberTableCellInner: React.FC<BlockNumberTableCellProps & object>;
 ```
 
   ### <a id="BlockNumberTextField"></a>BlockNumberTextField
@@ -6007,6 +8517,16 @@ const BlockProducerChip: React.FC<BlockProducerChipProps>;
 
 ```ts
 BlockProducerTableCell: FC<BlockProducerTableCell>;
+```
+
+  ### <a id="BlockProducerTableCellInner"></a>BlockProducerTableCellInner
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+BlockProducerTableCellInner: FC<BlockProducerTableCell & BlockProducerTableCellInner>;
 ```
 
   ### <a id="BlockTransactionCountTableCell"></a>BlockTransactionCountTableCell
@@ -6119,44 +8639,24 @@ const ChainTransactionNetwork: React.FC<ChainTransactionNetworkProps>;
 const ChipSkeleton: React.FC<SkeletonProps>;
 ```
 
-  ### <a id="DynamicBlockchainRenderFlexbox"></a>DynamicBlockchainRenderFlexbox
+  ### <a id="FeatureNotAvailable"></a>FeatureNotAvailable
 
 [**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
 ```ts
-const DynamicBlockchainRenderFlexbox: object;
-```
-
-## Type Declaration
-
-### Base
-
-```ts
-Base: FC<BlockChainRenderFlexboxProps> = DynamicListBase;
-```
-
-### WithAnalysis
-
-```ts
-WithAnalysis: FC<BlockChainRenderFlexboxProps>;
-```
-
-### WithRemote
-
-```ts
-WithRemote: FC<RemoteBlockChainRenderFlexboxProps>;
+const FeatureNotAvailable: FC<DialogProps & object>;
 ```
 
-  ### <a id="FeatureNotAvailable"></a>FeatureNotAvailable
+  ### <a id="HashTableCell"></a>HashTableCell
 
 [**@xyo-network/react-chain-blockchain**](#../README)
 
 ***
 
 ```ts
-const FeatureNotAvailable: FC<DialogProps & object>;
+const HashTableCell: React.FC<HashTableCellProps>;
 ```
 
   ### <a id="MemoizedPollingControlsFlexbox"></a>MemoizedPollingControlsFlexbox
@@ -6245,11 +8745,11 @@ const StyledPulseSvgIcon: StyledComponent<SvgIconOwnProps & CommonProps & Omit<S
   | "className"
   | "style"
   | "classes"
-  | "children"
-  | "sx"
   | "color"
   | "fontSize"
   | "shapeRendering"
+  | "children"
+  | "sx"
   | "htmlColor"
   | "inheritViewBox"
   | "titleAccess"
@@ -6266,6 +8766,16 @@ const StyledPulseSvgIcon: StyledComponent<SvgIconOwnProps & CommonProps & Omit<S
 
 ```ts
 const SubmitChainTransaction: React.FC;
+```
+
+  ### <a id="TableHeadingLabels"></a>TableHeadingLabels
+
+[**@xyo-network/react-chain-blockchain**](#../README)
+
+***
+
+```ts
+TableHeadingLabels: TableHeadingLabels[];
 ```
 
   ### <a id="TransactionCountChip"></a>TransactionCountChip