@cloudflare/component-icon 12.3.0 → 12.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 12.4.1
+
+### Patch Changes
+
+- 04083908a0: Fix key warning in Icon example
+
+## 12.4.0
+
+### Minor Changes
+
+- 829b74e8cc: Adds new "CloudInternet" and "CloudMulti" icons
+
 ## 12.3.0
 
 ### Minor Changes

package/dist/Icon.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import IconComponents from './reactsvgs';
 export declare type IconType = keyof typeof IconComponents;
 declare const _default: React.ComponentType<{
-    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "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";
+    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "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;

package/dist/Icon.stories.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ComponentType<{
+    type: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "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?: ([never, never] | [never, never, never]) | 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;
+}>>;
+export default _default;
+export declare const CloudMulti: {
+    (): JSX.Element;
+    decorators: ((Story: any) => JSX.Element)[];
+};
+export declare const CloudInternet: {
+    (): JSX.Element;
+    decorators: ((Story: any) => JSX.Element)[];
+};
+export declare const Spectrum: {
+    (): JSX.Element;
+    decorators: ((Story: any) => JSX.Element)[];
+};

package/dist/reactsvgs/CloudInternet.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgCloudInternet: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgCloudInternet;

package/dist/reactsvgs/CloudMulti.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgCloudMulti: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgCloudMulti;

package/dist/reactsvgs/index.d.ts

@@ -23,6 +23,8 @@ declare const _default: {
     'case-study': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     chart: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     clipboard: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'cloud-internet': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'cloud-multi': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'cloudflare-access': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'cloudflare-dex': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     'cloudflare-magic-wan': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;

package/es/Example.js

@@ -21,7 +21,8 @@ export var Example = () => /*#__PURE__*/React.createElement(Div, {
   justifyContent: "center",
   alignItems: "center",
   px: 0,
-  py: 2
+  py: 2,
+  key: t
 }, /*#__PURE__*/React.createElement(Icon, {
   size: 32,
   type: t

package/es/Icon.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleProvider, createRenderer } from '@cloudflare/style-provider';
+import Icon from './Icon';
+var renderer = createRenderer({
+  dev: process.env.NODE_ENV === 'development',
+  selectorPrefix: 'c_'
+}); // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+
+export default {
+  title: 'Example/Icon',
+  component: Icon
+};
+
+var withStyleProvider = Story => /*#__PURE__*/React.createElement(StyleProvider, {
+  renderer: renderer
+}, /*#__PURE__*/React.createElement(Story, null));
+
+export var CloudMulti = () => /*#__PURE__*/React.createElement(Icon, {
+  type: "cloud-multi",
+  size: 36
+});
+CloudMulti.decorators = [withStyleProvider];
+export var CloudInternet = () => /*#__PURE__*/React.createElement(Icon, {
+  type: "cloud-internet",
+  size: 36
+});
+CloudInternet.decorators = [withStyleProvider];
+export var Spectrum = () => /*#__PURE__*/React.createElement(Icon, {
+  type: "spectrum",
+  size: 36
+});
+Spectrum.decorators = [withStyleProvider];

package/es/reactsvgs/CloudInternet.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+
+var SvgCloudInternet = props => /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  "aria-hidden": !props['aria-label'],
+  focusable: "false"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#cloud-internet_svg__a)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M13.015 12.825h-9.46A3.563 3.563 0 0 1 0 9.27a3.65 3.65 0 0 1 1.3-2.757 3.403 3.403 0 0 1 2.423-.797 4.822 4.822 0 0 1 9.244 1.147 2.903 2.903 0 0 1 2 .68 3.01 3.01 0 0 1-1.95 5.282h-.002ZM3.498 6.708c-.57-.002-1.121.2-1.555.57A2.64 2.64 0 0 0 1 9.27a2.559 2.559 0 0 0 2.547 2.555h9.468A1.988 1.988 0 0 0 15 9.84a2.029 2.029 0 0 0-.682-1.536 2.07 2.07 0 0 0-1.729-.404l-.563.09-.016-.57a3.822 3.822 0 0 0-7.47-1.015l-.13.422-.434-.077a2.764 2.764 0 0 0-.477-.042Z"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "cloud-internet_svg__a"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h16v16H0z"
+}))));
+
+export default SvgCloudInternet;

package/es/reactsvgs/CloudMulti.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+
+var SvgCloudMulti = props => /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  "aria-hidden": !props['aria-label'],
+  focusable: "false"
+}), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#cloud-multi_svg__a)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M15.13 6.94a2.468 2.468 0 0 0-1.597-.571 3.99 3.99 0 0 0-6.726-2.227c-.03 0-.057-.004-.086-.004a3.972 3.972 0 0 0-3.677 2.429 2.865 2.865 0 0 0-1.958.67A3.047 3.047 0 0 0 0 9.54a2.977 2.977 0 0 0 2.97 2.97h7.65a2.51 2.51 0 0 0 2.095-1.13h.775a2.531 2.531 0 0 0 1.64-4.44Zm-4.509 4.57H2.965A1.973 1.973 0 0 1 1 9.54a2.037 2.037 0 0 1 .729-1.537 1.84 1.84 0 0 1 1.196-.44c.123.001.246.012.368.034l.434.075.13-.422a2.995 2.995 0 0 1 5.857.796l.015.57.564-.09a1.582 1.582 0 0 1 1.32.305A1.544 1.544 0 0 1 12.132 10a1.512 1.512 0 0 1-1.51 1.51Zm2.868-1.13H13.1a2.532 2.532 0 0 0-.838-2.31 2.469 2.469 0 0 0-1.596-.572 3.965 3.965 0 0 0-2.54-3.109 2.995 2.995 0 0 1 4.455 2.528l.016.57.564-.09a1.584 1.584 0 0 1 1.32.305 1.546 1.546 0 0 1 .076 2.236 1.512 1.512 0 0 1-1.068.443Z"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "cloud-multi_svg__a"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h16v16H0z"
+}))));
+
+export default SvgCloudMulti;

package/es/reactsvgs/Spectrum.js

@@ -8,23 +8,23 @@ var SvgSpectrum = props => /*#__PURE__*/React.createElement("svg", _extends({},
   "aria-hidden": !props['aria-label'],
   focusable: "false"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M8.222 14.947h-.445l-.18-.09c-.197-.1-4.88-2.5-4.88-7.38V3.942l.43-.5L3.5 3.4a6.98 6.98 0 003.832-1.9l.295-.33h.75l.293.33a6.955 6.955 0 003.842 1.9l.34.047.43.5v3.53c0 4.886-4.682 7.273-4.88 7.38l-.18.09zm-4.5-10.572v3.102c0 4.085 3.795 6.208 4.283 6.463.5-.25 4.282-2.377 4.282-6.463V4.375A8 8 0 018 2.25a8 8 0 01-4.283 2.125h.005z"
+  d: "M8.222 14.947h-.445l-.18-.09c-.197-.1-4.88-2.5-4.88-7.38V3.942l.43-.5L3.5 3.4a6.98 6.98 0 0 0 3.832-1.9l.295-.33h.75l.293.33a6.955 6.955 0 0 0 3.842 1.9l.34.047.43.5v3.53c0 4.886-4.682 7.273-4.88 7.38l-.18.09Zm-4.5-10.572v3.102c0 4.085 3.795 6.208 4.283 6.463.5-.25 4.282-2.377 4.282-6.463V4.375A8 8 0 0 1 8 2.25a8 8 0 0 1-4.283 2.125h.005Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M8.5 4.755h-1V6.96h1V4.755z"
+  d: "M8.5 4.755h-1V6.96h1V4.755Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M9.94 5.352L8.38 6.91l.708.707 1.559-1.56-.707-.706z"
+  d: "M9.94 5.352 8.38 6.91l.708.707 1.559-1.56-.707-.706Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M11.245 7.5H9.04v1h2.205v-1z"
+  d: "M11.245 7.5H9.04v1h2.205v-1Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M9.09 8.38l-.707.706 1.56 1.56.706-.708L9.09 8.38z"
+  d: "m9.09 8.38-.707.706 1.56 1.56.706-.707-1.559-1.56Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M8.5 9.04h-1v2.205h1V9.04z"
+  d: "M8.5 9.04h-1v2.205h1V9.04Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M6.912 8.382L5.353 9.94l.707.707L7.62 9.09l-.708-.707z"
+  d: "m6.912 8.382-1.559 1.56.707.706L7.62 9.09l-.708-.707Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M6.96 7.5H4.755v1H6.96v-1z"
+  d: "M6.96 7.5H4.755v1H6.96v-1Z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M6.058 5.352l-.708.707 1.56 1.56.707-.708-1.56-1.56z"
+  d: "m6.058 5.352-.708.707 1.56 1.56.707-.708-1.56-1.56Z"
 }));
 
 export default SvgSpectrum;

package/es/reactsvgs/index.js

@@ -21,6 +21,8 @@ import CaretUp from './CaretUp';
 import CaseStudy from './CaseStudy';
 import Chart from './Chart';
 import Clipboard from './Clipboard';
+import CloudInternet from './CloudInternet';
+import CloudMulti from './CloudMulti';
 import CloudflareAccess from './CloudflareAccess';
 import CloudflareDex from './CloudflareDex';
 import CloudflareMagicWan from './CloudflareMagicWan';
@@ -181,6 +183,8 @@ export default {
   'case-study': CaseStudy,
   chart: Chart,
   clipboard: Clipboard,
+  'cloud-internet': CloudInternet,
+  'cloud-multi': CloudMulti,
   'cloudflare-access': CloudflareAccess,
   'cloudflare-dex': CloudflareDex,
   'cloudflare-magic-wan': CloudflareMagicWan,

package/lib/Example.js

@@ -37,7 +37,8 @@ var Example = function Example() {
       justifyContent: "center",
       alignItems: "center",
       px: 0,
-      py: 2
+      py: 2,
+      key: t
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       size: 32,
       type: t

package/lib/Icon.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Spectrum = exports.CloudMulti = exports.CloudInternet = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styleProvider = require("@cloudflare/style-provider");
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var renderer = (0, _styleProvider.createRenderer)({
+  dev: process.env.NODE_ENV === 'development',
+  selectorPrefix: 'c_'
+}); // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+
+var _default = {
+  title: 'Example/Icon',
+  component: _Icon.default
+};
+exports.default = _default;
+
+var withStyleProvider = function withStyleProvider(Story) {
+  return /*#__PURE__*/_react.default.createElement(_styleProvider.StyleProvider, {
+    renderer: renderer
+  }, /*#__PURE__*/_react.default.createElement(Story, null));
+};
+
+var CloudMulti = function CloudMulti() {
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "cloud-multi",
+    size: 36
+  });
+};
+
+exports.CloudMulti = CloudMulti;
+CloudMulti.decorators = [withStyleProvider];
+
+var CloudInternet = function CloudInternet() {
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "cloud-internet",
+    size: 36
+  });
+};
+
+exports.CloudInternet = CloudInternet;
+CloudInternet.decorators = [withStyleProvider];
+
+var Spectrum = function Spectrum() {
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "spectrum",
+    size: 36
+  });
+};
+
+exports.Spectrum = Spectrum;
+Spectrum.decorators = [withStyleProvider];

package/lib/reactsvgs/CloudInternet.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgCloudInternet = function SvgCloudInternet(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-hidden": !props['aria-label'],
+    focusable: "false"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#cloud-internet_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.015 12.825h-9.46A3.563 3.563 0 0 1 0 9.27a3.65 3.65 0 0 1 1.3-2.757 3.403 3.403 0 0 1 2.423-.797 4.822 4.822 0 0 1 9.244 1.147 2.903 2.903 0 0 1 2 .68 3.01 3.01 0 0 1-1.95 5.282h-.002ZM3.498 6.708c-.57-.002-1.121.2-1.555.57A2.64 2.64 0 0 0 1 9.27a2.559 2.559 0 0 0 2.547 2.555h9.468A1.988 1.988 0 0 0 15 9.84a2.029 2.029 0 0 0-.682-1.536 2.07 2.07 0 0 0-1.729-.404l-.563.09-.016-.57a3.822 3.822 0 0 0-7.47-1.015l-.13.422-.434-.077a2.764 2.764 0 0 0-.477-.042Z"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "cloud-internet_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h16v16H0z"
+  }))));
+};
+
+var _default = SvgCloudInternet;
+exports.default = _default;

package/lib/reactsvgs/CloudMulti.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgCloudMulti = function SvgCloudMulti(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-hidden": !props['aria-label'],
+    focusable: "false"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#cloud-multi_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.13 6.94a2.468 2.468 0 0 0-1.597-.571 3.99 3.99 0 0 0-6.726-2.227c-.03 0-.057-.004-.086-.004a3.972 3.972 0 0 0-3.677 2.429 2.865 2.865 0 0 0-1.958.67A3.047 3.047 0 0 0 0 9.54a2.977 2.977 0 0 0 2.97 2.97h7.65a2.51 2.51 0 0 0 2.095-1.13h.775a2.531 2.531 0 0 0 1.64-4.44Zm-4.509 4.57H2.965A1.973 1.973 0 0 1 1 9.54a2.037 2.037 0 0 1 .729-1.537 1.84 1.84 0 0 1 1.196-.44c.123.001.246.012.368.034l.434.075.13-.422a2.995 2.995 0 0 1 5.857.796l.015.57.564-.09a1.582 1.582 0 0 1 1.32.305A1.544 1.544 0 0 1 12.132 10a1.512 1.512 0 0 1-1.51 1.51Zm2.868-1.13H13.1a2.532 2.532 0 0 0-.838-2.31 2.469 2.469 0 0 0-1.596-.572 3.965 3.965 0 0 0-2.54-3.109 2.995 2.995 0 0 1 4.455 2.528l.016.57.564-.09a1.584 1.584 0 0 1 1.32.305 1.546 1.546 0 0 1 .076 2.236 1.512 1.512 0 0 1-1.068.443Z"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "cloud-multi_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h16v16H0z"
+  }))));
+};
+
+var _default = SvgCloudMulti;
+exports.default = _default;

package/lib/reactsvgs/Spectrum.js

@@ -22,23 +22,23 @@ var SvgSpectrum = function SvgSpectrum(props) {
     "aria-hidden": !props['aria-label'],
     focusable: "false"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8.222 14.947h-.445l-.18-.09c-.197-.1-4.88-2.5-4.88-7.38V3.942l.43-.5L3.5 3.4a6.98 6.98 0 003.832-1.9l.295-.33h.75l.293.33a6.955 6.955 0 003.842 1.9l.34.047.43.5v3.53c0 4.886-4.682 7.273-4.88 7.38l-.18.09zm-4.5-10.572v3.102c0 4.085 3.795 6.208 4.283 6.463.5-.25 4.282-2.377 4.282-6.463V4.375A8 8 0 018 2.25a8 8 0 01-4.283 2.125h.005z"
+    d: "M8.222 14.947h-.445l-.18-.09c-.197-.1-4.88-2.5-4.88-7.38V3.942l.43-.5L3.5 3.4a6.98 6.98 0 0 0 3.832-1.9l.295-.33h.75l.293.33a6.955 6.955 0 0 0 3.842 1.9l.34.047.43.5v3.53c0 4.886-4.682 7.273-4.88 7.38l-.18.09Zm-4.5-10.572v3.102c0 4.085 3.795 6.208 4.283 6.463.5-.25 4.282-2.377 4.282-6.463V4.375A8 8 0 0 1 8 2.25a8 8 0 0 1-4.283 2.125h.005Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8.5 4.755h-1V6.96h1V4.755z"
+    d: "M8.5 4.755h-1V6.96h1V4.755Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M9.94 5.352L8.38 6.91l.708.707 1.559-1.56-.707-.706z"
+    d: "M9.94 5.352 8.38 6.91l.708.707 1.559-1.56-.707-.706Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M11.245 7.5H9.04v1h2.205v-1z"
+    d: "M11.245 7.5H9.04v1h2.205v-1Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M9.09 8.38l-.707.706 1.56 1.56.706-.708L9.09 8.38z"
+    d: "m9.09 8.38-.707.706 1.56 1.56.706-.707-1.559-1.56Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M8.5 9.04h-1v2.205h1V9.04z"
+    d: "M8.5 9.04h-1v2.205h1V9.04Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M6.912 8.382L5.353 9.94l.707.707L7.62 9.09l-.708-.707z"
+    d: "m6.912 8.382-1.559 1.56.707.706L7.62 9.09l-.708-.707Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M6.96 7.5H4.755v1H6.96v-1z"
+    d: "M6.96 7.5H4.755v1H6.96v-1Z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M6.058 5.352l-.708.707 1.56 1.56.707-.708-1.56-1.56z"
+    d: "m6.058 5.352-.708.707 1.56 1.56.707-.708-1.56-1.56Z"
   }));
 };
 

package/lib/reactsvgs/index.js

@@ -51,6 +51,10 @@ var _Chart = _interopRequireDefault(require("./Chart"));
 
 var _Clipboard = _interopRequireDefault(require("./Clipboard"));
 
+var _CloudInternet = _interopRequireDefault(require("./CloudInternet"));
+
+var _CloudMulti = _interopRequireDefault(require("./CloudMulti"));
+
 var _CloudflareAccess = _interopRequireDefault(require("./CloudflareAccess"));
 
 var _CloudflareDex = _interopRequireDefault(require("./CloudflareDex"));
@@ -349,6 +353,8 @@ var _default = {
   'case-study': _CaseStudy.default,
   chart: _Chart.default,
   clipboard: _Clipboard.default,
+  'cloud-internet': _CloudInternet.default,
+  'cloud-multi': _CloudMulti.default,
   'cloudflare-access': _CloudflareAccess.default,
   'cloudflare-dex': _CloudflareDex.default,
   'cloudflare-magic-wan': _CloudflareMagicWan.default,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-icon",
   "description": "Cloudflare Icon Component",
-  "version": "12.3.0",
+  "version": "12.4.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "Frontend Team <frontend@cloudflare.com>",