npm - @cloudflare/component-button - Versions diffs - 8.5.20 → 8.5.22 - Mend

@cloudflare/component-button 8.5.20 → 8.5.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +8 -0
package/dist/Button.d.ts +1 -1
package/dist/Button.stories.d.ts +278 -0
package/es/Button.stories.js +216 -0
package/lib/Button.stories.js +231 -0
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # Change Log
+## 8.5.22
+## 8.5.21
+### Patch Changes
+- 6be54263cf: update storybook documenation for the button
 ## 8.5.20
 ## 8.5.19

package/dist/Button.d.ts CHANGED Viewed

@@ -150,7 +150,7 @@ declare const _default: React.ComponentType<{
     inverted?: boolean | undefined;
     spaced?: boolean | undefined;
     group?: "first" | "last" | "inbetween" | undefined;
-    iconType?: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "analytics-search" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-reorder2" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloud-security" | "cloudflare-access" | "cloudflare-browser-outline" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-ruleset-engine" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-api-outline" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack-outline" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drag-outline" | "drag-solid" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "filter-drawer-outline" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "machine-learning-contextual-outline" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "podcast-microphone-outline" | "podcast-microphone-solid" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2outline" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf-solid" | "security-waf" | "server-origin" | "share-arrow-outline" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo" | undefined;
+    iconType?: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "analytics-search" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-reorder2" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloud-security" | "cloudflare-access" | "cloudflare-browser-outline" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-pipelines" | "cloudflare-ruleset-engine" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-api-outline" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack-outline" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drag-outline" | "drag-solid" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "filter-drawer-outline" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "machine-learning-contextual-outline" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "podcast-microphone-outline" | "podcast-microphone-solid" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2outline" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf-solid" | "security-waf" | "server-origin" | "share-arrow-outline" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo" | undefined;
     iconLabel?: string | undefined;
     iconProps?: IconProps | undefined;
     iconSize?: number | undefined;

package/dist/Button.stories.d.ts ADDED Viewed

@@ -0,0 +1,278 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ComponentType<{
+    form?: string | undefined;
+    children?: React.ReactNode;
+    name?: string | undefined;
+    space?: number | undefined;
+    disabled?: boolean | undefined;
+    compact?: boolean | undefined;
+    className?: string | undefined;
+    id?: string | undefined;
+    tabIndex?: number | undefined;
+    type?: "default" | "success" | "warning" | "primary" | "danger" | "plain" | "plainMono" | "plainDestructive" | undefined;
+    direction?: "column" | "row" | undefined;
+    key?: React.Key | null | undefined;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    loading?: boolean | undefined;
+    stretch?: boolean | undefined;
+    submit?: boolean | undefined;
+    ariaLabel?: string | undefined;
+    testId?: string | undefined;
+    inverted?: boolean | undefined;
+    spaced?: boolean | undefined;
+    group?: "first" | "last" | "inbetween" | undefined;
+    iconType?: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "analytics-search" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-reorder2" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloud-security" | "cloudflare-access" | "cloudflare-browser-outline" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-pipelines" | "cloudflare-ruleset-engine" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-api-outline" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack-outline" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drag-outline" | "drag-solid" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "filter-drawer-outline" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "machine-learning-contextual-outline" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "podcast-microphone-outline" | "podcast-microphone-solid" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2outline" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf-solid" | "security-waf" | "server-origin" | "share-arrow-outline" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo" | undefined;
+    iconLabel?: string | undefined;
+    iconProps?: ({
+        type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "analytics-search" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-reorder2" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloud-security" | "cloudflare-access" | "cloudflare-browser-outline" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-pipelines" | "cloudflare-ruleset-engine" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-api-outline" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack-outline" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drag-outline" | "drag-solid" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "filter-drawer-outline" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "machine-learning-contextual-outline" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "podcast-microphone-outline" | "podcast-microphone-solid" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2outline" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf-solid" | "security-waf" | "server-origin" | "share-arrow-outline" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
+        className?: string | undefined;
+        ariaLabel?: string | undefined;
+        label?: string | boolean | undefined;
+        testId?: string | undefined;
+        p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+        color?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
+        borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
+        width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
+        cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
+        fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
+        textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+        marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+        marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+        padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+        paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+        paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+        gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
+        m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+        ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        mr?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+        mt?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        mb?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+        mx?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        my?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        pl?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        pr?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+        pt?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+        px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
+        minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
+        maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
+        maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
+        backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
+        borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
+        borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
+        borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
+        borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
+        borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
+        borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
+        borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
+        borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
+        borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
+        borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
+        borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
+        borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
+        borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
+        textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
+        verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
+        alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
+        boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
+        flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
+        flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
+        flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+        gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+        size?: number | undefined;
+        innerRef?: React.Ref<never> | undefined;
+        gridColumnSpan?: number | number[] | "end" | "all" | undefined;
+        gridColumnPad?: number | number[] | undefined;
+        gridRowSpan?: number | number[] | undefined;
+        gridRowPad?: number | number[] | undefined;
+        gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+        gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
+    } | ({
+        type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "analytics-search" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-reorder2" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloud-security" | "cloudflare-access" | "cloudflare-browser-outline" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-pipelines" | "cloudflare-ruleset-engine" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-api-outline" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack-outline" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drag-outline" | "drag-solid" | "drive" | "edge-log-delivery" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "filter-drawer-outline" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "machine-learning-contextual-outline" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "podcast-microphone-outline" | "podcast-microphone-solid" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2outline" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "router" | "security-bots" | "security-waf-solid" | "security-waf" | "server-origin" | "share-arrow-outline" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
+        className?: string | undefined;
+        ariaLabel?: string | undefined;
+        label?: string | boolean | undefined;
+        testId?: string | undefined;
+        p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+        color?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
+        borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
+        width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
+        cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
+        fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
+        textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+        marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+        marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+        padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+        paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+        paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+        gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
+        m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+        ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        mr?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+        mt?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        mb?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+        mx?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+        my?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+        pl?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        pr?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+        pt?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+        px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+        py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+        minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
+        minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
+        maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
+        maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
+        backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
+        borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
+        borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
+        borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
+        borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
+        borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
+        borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
+        borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
+        borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
+        borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
+        borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
+        borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
+        borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
+        borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
+        textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
+        verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
+        alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+        textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
+        boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
+        flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
+        flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
+        flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+        gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+        size?: number | undefined;
+        innerRef?: React.Ref<never> | undefined;
+        gridColumnSpan?: number | number[] | "end" | "all" | undefined;
+        gridColumnPad?: number | number[] | undefined;
+        gridRowSpan?: number | number[] | undefined;
+        gridRowPad?: number | number[] | undefined;
+        gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+        gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
+    } & {
+        children?: React.ReactNode;
+    })) | undefined;
+    iconSize?: number | undefined;
+    iconPosition?: "right" | "left" | undefined;
+    noWrapText?: boolean | undefined;
+    buttonState?: "focus" | "active" | "hover" | undefined;
+    p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
+    width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
+    cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
+    fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
+    textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    marginTop?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    marginBottom?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    padding?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
+    paddingLeft?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    paddingRight?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    paddingTop?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    paddingBottom?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    gap?: import("csstype").GapProperty<string | number> | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | [import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined, import("csstype").GapProperty<string | number> | undefined] | undefined;
+    m?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
+    ml?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    mr?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
+    mt?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    mb?: import("csstype").MarginBottomProperty<string | number> | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | [import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined, import("csstype").MarginBottomProperty<string | number> | undefined] | undefined;
+    mx?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
+    my?: import("csstype").MarginTopProperty<string | number> | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | [import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined, import("csstype").MarginTopProperty<string | number> | undefined] | undefined;
+    pl?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    pr?: import("csstype").PaddingRightProperty<string | number> | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | [import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined, import("csstype").PaddingRightProperty<string | number> | undefined] | undefined;
+    pt?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    pb?: import("csstype").PaddingBottomProperty<string | number> | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | [import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined, import("csstype").PaddingBottomProperty<string | number> | undefined] | undefined;
+    px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
+    py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
+    minWidth?: import("csstype").MinWidthProperty<string | number> | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | [import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined, import("csstype").MinWidthProperty<string | number> | undefined] | undefined;
+    minHeight?: import("csstype").MinHeightProperty<string | number> | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | [import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined, import("csstype").MinHeightProperty<string | number> | undefined] | undefined;
+    maxWidth?: import("csstype").MaxWidthProperty<string | number> | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | [import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined, import("csstype").MaxWidthProperty<string | number> | undefined] | undefined;
+    maxHeight?: import("csstype").MaxHeightProperty<string | number> | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | [import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined, import("csstype").MaxHeightProperty<string | number> | undefined] | undefined;
+    backgroundColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderLeftColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderRightColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderBottomColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderStyle?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    borderTopStyle?: import("csstype").BorderTopStyleProperty | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | [import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined, import("csstype").BorderTopStyleProperty | undefined] | undefined;
+    borderBottomStyle?: import("csstype").BorderBottomStyleProperty | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | [import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined, import("csstype").BorderBottomStyleProperty | undefined] | undefined;
+    borderLeftStyle?: import("csstype").BorderLeftStyleProperty | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | [import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined, import("csstype").BorderLeftStyleProperty | undefined] | undefined;
+    borderRightStyle?: import("csstype").BorderRightStyleProperty | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | [import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined, import("csstype").BorderRightStyleProperty | undefined] | undefined;
+    borderWidth?: import("csstype").BorderWidthProperty<string | number> | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | [import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined, import("csstype").BorderWidthProperty<string | number> | undefined] | undefined;
+    borderTopWidth?: import("csstype").BorderTopWidthProperty<string | number> | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | [import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined, import("csstype").BorderTopWidthProperty<string | number> | undefined] | undefined;
+    borderBottomWidth?: import("csstype").BorderBottomWidthProperty<string | number> | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | [import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined, import("csstype").BorderBottomWidthProperty<string | number> | undefined] | undefined;
+    borderLeftWidth?: import("csstype").BorderLeftWidthProperty<string | number> | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | [import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined, import("csstype").BorderLeftWidthProperty<string | number> | undefined] | undefined;
+    borderRightWidth?: import("csstype").BorderRightWidthProperty<string | number> | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | [import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined, import("csstype").BorderRightWidthProperty<string | number> | undefined] | undefined;
+    borderRadius?: import("csstype").BorderRadiusProperty<string | number> | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | [import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined, import("csstype").BorderRadiusProperty<string | number> | undefined] | undefined;
+    borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
+    textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
+    verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
+    alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    alignSelf?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    justifyContent?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
+    textTransform?: import("csstype").TextTransformProperty | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | [import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined, import("csstype").TextTransformProperty | undefined] | undefined;
+    boxSizing?: import("csstype").BoxSizingProperty | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | [import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined, import("csstype").BoxSizingProperty | undefined] | undefined;
+    flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
+    flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
+    flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+    gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
+    innerRef?: React.Ref<HTMLButtonElement> | undefined;
+    gridColumnSpan?: number | number[] | "end" | "all" | undefined;
+    gridColumnPad?: number | number[] | undefined;
+    gridRowSpan?: number | number[] | undefined;
+    gridRowPad?: number | number[] | undefined;
+    gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+    gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
+}>>;
+export default _default;
+export declare const ButtonTypes: () => JSX.Element;

package/es/Button.stories.js ADDED Viewed

@@ -0,0 +1,216 @@
+import React from 'react';
+import Button from './Button';
+export default {
+  title: 'Example/Button',
+  component: Button
+}; // Button Types
+export var ButtonTypes = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+      gap: '1rem',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", null), " ", /*#__PURE__*/React.createElement("div", null, "resting"), /*#__PURE__*/React.createElement("div", null, "disabled"), /*#__PURE__*/React.createElement("div", null, "hover"), /*#__PURE__*/React.createElement("div", null, "active"), /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(Button, null, "Default Button"), /*#__PURE__*/React.createElement(Button, {
+    disabled: true
+  }, "Default Button"), /*#__PURE__*/React.createElement(Button, {
+    buttonState: "hover"
+  }, "Default Button"), /*#__PURE__*/React.createElement(Button, {
+    buttonState: "active"
+  }, "Default Button"), /*#__PURE__*/React.createElement("div", null, "Default Inverted"), /*#__PURE__*/React.createElement(Button, {
+    inverted: true
+  }, "Default Inverted"), /*#__PURE__*/React.createElement(Button, {
+    inverted: true,
+    disabled: true
+  }, "Default Inverted"), /*#__PURE__*/React.createElement(Button, {
+    inverted: true,
+    buttonState: "hover"
+  }, "Default Inverted"), /*#__PURE__*/React.createElement(Button, {
+    inverted: true,
+    buttonState: "active"
+  }, "Default Inverted"), /*#__PURE__*/React.createElement("div", null, "Primary"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary"
+  }, "Primary Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    disabled: true
+  }, "Primary Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    buttonState: "hover"
+  }, "Primary Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    buttonState: "active"
+  }, "Primary Button"), /*#__PURE__*/React.createElement("div", null, "Primary Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    inverted: true
+  }, "Primary Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    inverted: true,
+    disabled: true
+  }, "Primary Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    inverted: true,
+    buttonState: "hover"
+  }, "Primary Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    inverted: true,
+    buttonState: "active"
+  }, "Primary Inverted"), /*#__PURE__*/React.createElement("div", null, "Success"), /*#__PURE__*/React.createElement(Button, {
+    type: "success"
+  }, "Success Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    disabled: true
+  }, "Success Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    buttonState: "hover"
+  }, "Success Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    buttonState: "active"
+  }, "Success Button"), /*#__PURE__*/React.createElement("div", null, "Success Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    inverted: true
+  }, "Success Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    inverted: true,
+    disabled: true
+  }, "Success Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    inverted: true,
+    buttonState: "hover"
+  }, "Success Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    inverted: true,
+    buttonState: "active"
+  }, "Success Inverted"), /*#__PURE__*/React.createElement("div", null, "Warning"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning"
+  }, "Warning Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    disabled: true
+  }, "Warning Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    buttonState: "hover"
+  }, "Warning Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    buttonState: "active"
+  }, "Warning Button"), /*#__PURE__*/React.createElement("div", null, "Warning Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    inverted: true
+  }, "Warning Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    inverted: true,
+    disabled: true
+  }, "Warning Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    inverted: true,
+    buttonState: "hover"
+  }, "Warning Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    inverted: true,
+    buttonState: "active"
+  }, "Warning Inverted"), /*#__PURE__*/React.createElement("div", null, "Danger"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger"
+  }, "Danger Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    disabled: true
+  }, "Danger Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    buttonState: "hover"
+  }, "Danger Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    buttonState: "active"
+  }, "Danger Button"), /*#__PURE__*/React.createElement("div", null, "Danger Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    inverted: true
+  }, "Danger Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    inverted: true,
+    disabled: true
+  }, "Danger Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    inverted: true,
+    buttonState: "hover"
+  }, "Danger Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    inverted: true,
+    buttonState: "active"
+  }, "Danger Inverted"), /*#__PURE__*/React.createElement("div", null, "Plain"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain"
+  }, "Plain Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    disabled: true
+  }, "Plain Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    buttonState: "hover"
+  }, "Plain Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    buttonState: "active"
+  }, "Plain Button"), /*#__PURE__*/React.createElement("div", null, "Plain Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    inverted: true
+  }, "Plain Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    inverted: true,
+    disabled: true
+  }, "Plain Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plain",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Inverted"), /*#__PURE__*/React.createElement("div", null, "Plain Mono"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono"
+  }, "Plain Mono Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    disabled: true
+  }, "Plain Mono Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    buttonState: "hover"
+  }, "Plain Mono Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    buttonState: "active"
+  }, "Plain Mono Button"), /*#__PURE__*/React.createElement("div", null, "Plain Mono Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    inverted: true
+  }, "Plain Mono Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    inverted: true,
+    disabled: true
+  }, "Plain Mono Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Mono Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainMono",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Mono Inverted"), /*#__PURE__*/React.createElement("div", null, "Plain Destructive"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive"
+  }, "Plain Destructive Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    disabled: true
+  }, "Plain Destructive Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    buttonState: "hover"
+  }, "Plain Destructive Button"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    buttonState: "active"
+  }, "Plain Destructive Button"), /*#__PURE__*/React.createElement("div", null, "Plain Destructive Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    inverted: true
+  }, "Plain Destructive Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    inverted: true,
+    disabled: true
+  }, "Plain Destructive Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Destructive Inverted"), /*#__PURE__*/React.createElement(Button, {
+    type: "plainDestructive",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Destructive Inverted"));
+};

package/lib/Button.stories.js ADDED Viewed

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonTypes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("./Button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Example/Button',
+  component: _Button.default
+}; // Button Types
+exports.default = _default;
+var ButtonTypes = function ButtonTypes() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+      gap: '1rem',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null), " ", /*#__PURE__*/_react.default.createElement("div", null, "resting"), /*#__PURE__*/_react.default.createElement("div", null, "disabled"), /*#__PURE__*/_react.default.createElement("div", null, "hover"), /*#__PURE__*/_react.default.createElement("div", null, "active"), /*#__PURE__*/_react.default.createElement("div", null, "Default"), /*#__PURE__*/_react.default.createElement(_Button.default, null, "Default Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    disabled: true
+  }, "Default Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonState: "hover"
+  }, "Default Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonState: "active"
+  }, "Default Button"), /*#__PURE__*/_react.default.createElement("div", null, "Default Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    inverted: true
+  }, "Default Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    inverted: true,
+    disabled: true
+  }, "Default Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    inverted: true,
+    buttonState: "hover"
+  }, "Default Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    inverted: true,
+    buttonState: "active"
+  }, "Default Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary"
+  }, "Primary Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    disabled: true
+  }, "Primary Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    buttonState: "hover"
+  }, "Primary Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    buttonState: "active"
+  }, "Primary Button"), /*#__PURE__*/_react.default.createElement("div", null, "Primary Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    inverted: true
+  }, "Primary Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    inverted: true,
+    disabled: true
+  }, "Primary Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    inverted: true,
+    buttonState: "hover"
+  }, "Primary Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "primary",
+    inverted: true,
+    buttonState: "active"
+  }, "Primary Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Success"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success"
+  }, "Success Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    disabled: true
+  }, "Success Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    buttonState: "hover"
+  }, "Success Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    buttonState: "active"
+  }, "Success Button"), /*#__PURE__*/_react.default.createElement("div", null, "Success Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    inverted: true
+  }, "Success Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    inverted: true,
+    disabled: true
+  }, "Success Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    inverted: true,
+    buttonState: "hover"
+  }, "Success Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "success",
+    inverted: true,
+    buttonState: "active"
+  }, "Success Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Warning"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning"
+  }, "Warning Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    disabled: true
+  }, "Warning Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    buttonState: "hover"
+  }, "Warning Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    buttonState: "active"
+  }, "Warning Button"), /*#__PURE__*/_react.default.createElement("div", null, "Warning Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    inverted: true
+  }, "Warning Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    inverted: true,
+    disabled: true
+  }, "Warning Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    inverted: true,
+    buttonState: "hover"
+  }, "Warning Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "warning",
+    inverted: true,
+    buttonState: "active"
+  }, "Warning Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Danger"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger"
+  }, "Danger Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    disabled: true
+  }, "Danger Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    buttonState: "hover"
+  }, "Danger Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    buttonState: "active"
+  }, "Danger Button"), /*#__PURE__*/_react.default.createElement("div", null, "Danger Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    inverted: true
+  }, "Danger Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    inverted: true,
+    disabled: true
+  }, "Danger Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    inverted: true,
+    buttonState: "hover"
+  }, "Danger Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "danger",
+    inverted: true,
+    buttonState: "active"
+  }, "Danger Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Plain"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain"
+  }, "Plain Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    disabled: true
+  }, "Plain Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    buttonState: "hover"
+  }, "Plain Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    buttonState: "active"
+  }, "Plain Button"), /*#__PURE__*/_react.default.createElement("div", null, "Plain Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    inverted: true
+  }, "Plain Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    inverted: true,
+    disabled: true
+  }, "Plain Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plain",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Plain Mono"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono"
+  }, "Plain Mono Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    disabled: true
+  }, "Plain Mono Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    buttonState: "hover"
+  }, "Plain Mono Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    buttonState: "active"
+  }, "Plain Mono Button"), /*#__PURE__*/_react.default.createElement("div", null, "Plain Mono Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    inverted: true
+  }, "Plain Mono Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    inverted: true,
+    disabled: true
+  }, "Plain Mono Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Mono Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainMono",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Mono Inverted"), /*#__PURE__*/_react.default.createElement("div", null, "Plain Destructive"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive"
+  }, "Plain Destructive Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    disabled: true
+  }, "Plain Destructive Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    buttonState: "hover"
+  }, "Plain Destructive Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    buttonState: "active"
+  }, "Plain Destructive Button"), /*#__PURE__*/_react.default.createElement("div", null, "Plain Destructive Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    inverted: true
+  }, "Plain Destructive Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    inverted: true,
+    disabled: true
+  }, "Plain Destructive Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    inverted: true,
+    buttonState: "hover"
+  }, "Plain Destructive Inverted"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "plainDestructive",
+    inverted: true,
+    buttonState: "active"
+  }, "Plain Destructive Inverted"));
+};
+exports.ButtonTypes = ButtonTypes;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "8.5.20",
+  "version": "8.5.22",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",