@oxide/design-system 2.0.0 → 2.0.1--canary.8209c27.0

package/icons/index.ts

@@ -15,6 +15,7 @@ export type Icon =
   | { name: 'add-roundel'; size: 12 }
   | { name: 'add-roundel'; size: 16 }
   | { name: 'add-roundel'; size: 24 }
+  | { name: 'auto-restart'; size: 12 }
   | { name: 'calendar'; size: 16 }
   | { name: 'calendar'; size: 24 }
   | { name: 'carat-down'; size: 12 }
@@ -33,6 +34,7 @@ export type Icon =
   | { name: 'cloud'; size: 16 }
   | { name: 'cloud'; size: 24 }
   | { name: 'compability'; size: 16 }
+  | { name: 'compass'; size: 16 }
   | { name: 'compatibility'; size: 24 }
   | { name: 'contrast'; size: 16 }
   | { name: 'contrast'; size: 24 }
@@ -46,6 +48,7 @@ export type Icon =
   | { name: 'dislike'; size: 24 }
   | { name: 'document'; size: 16 }
   | { name: 'document'; size: 24 }
+  | { name: 'document-api'; size: 16 }
   | { name: 'dots'; size: 16 }
   | { name: 'dots'; size: 24 }
   | { name: 'download'; size: 24 }

package/icons/react/Access16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Access16Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M5 13.29a6.32 6.32 0 0 1-3-5.354V3.541a.75.75 0 0 1 .513-.712l5.25-1.75a.75.75 0 0 1 .474 0l5.25 1.75a.75.75 0 0 1 .513.712v4.395c0 2.152-1.12 4.126-3 5.348l-.2.125-2.43 1.38a.75.75 0 0 1-.74 0L5.2 13.41a6 6 0 0 1-.2-.12m0-2.887c0 .175.06.347.18.474.29.307.63.576 1.011.795l.003.002 1.435.815c.23.13.512.13.742 0l1.416-.804q.592-.365 1.033-.835a.7.7 0 0 0 .18-.475V10a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2zM10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
       clipRule="evenodd"
-      d="M5 13.29a6.316 6.316 0 0 1-3-5.354V3.541a.75.75 0 0 1 .513-.712l5.25-1.75a.75.75 0 0 1 .474 0l5.25 1.75a.75.75 0 0 1 .513.712v4.395c0 2.152-1.12 4.126-3 5.348a7.33 7.33 0 0 1-.2.125l-2.43 1.38a.75.75 0 0 1-.74 0L5.2 13.41a6.375 6.375 0 0 1-.2-.12Zm0-2.887c0 .175.06.347.18.474.29.307.63.576 1.011.795l.003.002 1.435.815c.23.13.512.13.742 0l1.416-.804c.394-.242.74-.523 1.033-.835a.69.69 0 0 0 .18-.475V10a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v.402ZM10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Access24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Access24Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M3 4.72a1 1 0 0 1 .684-.948l8-2.667a1 1 0 0 1 .632 0l8 2.667a1 1 0 0 1 .684.949v8.572a8 8 0 0 1-4.115 6.993l-4.4 2.444a1 1 0 0 1-.97 0l-4.4-2.444A8 8 0 0 1 3 13.293zM7 15a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1.434a1 1 0 0 1-.485.857l-4 2.4a1 1 0 0 1-1.03 0l-4-2.4A1 1 0 0 1 7 16.434zm5-5a3 3 0 1 0 0-6 3 3 0 0 0 0 6"
       clipRule="evenodd"
-      d="M3 4.72a1 1 0 0 1 .684-.948l8-2.667a1 1 0 0 1 .632 0l8 2.667a1 1 0 0 1 .684.949v8.572a8 8 0 0 1-4.115 6.993l-4.4 2.444a1 1 0 0 1-.97 0l-4.4-2.444A8 8 0 0 1 3 13.293V4.72ZM7 15a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1.434a1 1 0 0 1-.485.857l-4 2.4a1 1 0 0 1-1.03 0l-4-2.4A1 1 0 0 1 7 16.434V15Zm5-5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Action16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,18 +17,18 @@ const Action16Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      d="M9 7h3.978a.5.5 0 0 1 .394.807L7.895 14.85A.5.5 0 0 1 7 14.543V9H3.022a.5.5 0 0 1-.394-.807L8.105 1.15A.5.5 0 0 1 9 1.457V7Z"
       fill="currentColor"
+      d="M9 7h3.978a.5.5 0 0 1 .394.807L7.895 14.85A.5.5 0 0 1 7 14.543V9H3.022a.5.5 0 0 1-.394-.807L8.105 1.15A.5.5 0 0 1 9 1.457z"
     />
   </svg>
 )

package/icons/react/Action24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,18 +17,18 @@ const Action24Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      d="M14 11h5.863a.5.5 0 0 1 .369.838l-9.363 10.214a.5.5 0 0 1-.869-.337V13H4.137a.5.5 0 0 1-.369-.838l9.363-10.214a.5.5 0 0 1 .869.337V11Z"
       fill="currentColor"
+      d="M14 11h5.863a.5.5 0 0 1 .369.838l-9.363 10.215a.5.5 0 0 1-.869-.338V13H4.137a.5.5 0 0 1-.369-.838l9.363-10.214a.5.5 0 0 1 .869.337z"
     />
   </svg>
 )

package/icons/react/Add12Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -13,20 +13,20 @@ interface SVGRProps {
 }
 const Add12Icon = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={12}
     height={12}
     viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M6.75.667A.667.667 0 0 0 6.083 0h-.166a.667.667 0 0 0-.667.667V5.25H.667A.667.667 0 0 0 0 5.917v.166c0 .368.299.667.667.667H5.25v4.583c0 .368.299.667.667.667h.166a.667.667 0 0 0 .667-.667V6.75h4.583A.667.667 0 0 0 12 6.083v-.166a.667.667 0 0 0-.667-.667H6.75z"
       clipRule="evenodd"
-      d="M6.75.667A.667.667 0 0 0 6.083 0h-.166a.667.667 0 0 0-.667.667V5.25H.667A.667.667 0 0 0 0 5.917v.166c0 .368.299.667.667.667H5.25v4.583c0 .368.299.667.667.667h.166a.667.667 0 0 0 .667-.667V6.75h4.583A.667.667 0 0 0 12 6.083v-.166a.667.667 0 0 0-.667-.667H6.75V.667Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/AddRoundel12Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const AddRoundel12Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={12}
     height={12}
     viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12m.083-9.5c.368 0 .667.299.667.667V5.25h2.083c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667H6.75v2.083a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667V6.75H3.167a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667H5.25V3.167c0-.368.299-.667.667-.667z"
       clipRule="evenodd"
-      d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm.083-9.5c.368 0 .667.299.667.667V5.25h2.083c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667H6.75v2.083a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667V6.75H3.167a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667H5.25V3.167c0-.368.299-.667.667-.667h.166Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/AddRoundel16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const AddRoundel16Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M7 4.75A.75.75 0 0 1 7.75 4h.5a.75.75 0 0 1 .75.75V7h2.25a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75H9v2.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75V9H4.75A.75.75 0 0 1 4 8.25v-.5A.75.75 0 0 1 4.75 7H7z"
       clipRule="evenodd"
-      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM7 4.75A.75.75 0 0 1 7.75 4h.5a.75.75 0 0 1 .75.75V7h2.25a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75H9v2.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75V9H4.75A.75.75 0 0 1 4 8.25v-.5A.75.75 0 0 1 4.75 7H7V4.75Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/AddRoundel24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const AddRoundel24Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m0-15a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1"
       clipRule="evenodd"
-      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm0-15a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/AutoRestart12Icon.tsx

@@ -0,0 +1,35 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import type { SVGProps } from 'react'
+
+interface SVGRProps {
+  title?: string
+  titleId?: string
+}
+const AutoRestart12Icon = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    viewBox="0 0 12 12"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fill="currentColor"
+      d="M6 10.5a4.5 4.5 0 0 0 1.277-.184c.32-.094.677.01.854.293l.098.157c.21.338.083.787-.294.915A6 6 0 1 1 12 6a6.14 6.14 0 0 1-1.035 3.392c-.225.337-.703.336-.97.031L7.972 7.111A.67.67 0 0 1 8.477 6H10.5A4.5 4.5 0 1 0 6 10.5"
+    />
+  </svg>
+)
+export default AutoRestart12Icon

package/icons/react/Calendar16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Calendar16Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M1.75 3a.75.75 0 0 0-.75.75V6h14V3.75a.75.75 0 0 0-.75-.75H13V1h-2v2H5V1H3v2zM1 7h14v7.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75zm2 2.75A.75.75 0 0 1 3.75 9h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75z"
       clipRule="evenodd"
-      d="M1.75 3a.75.75 0 0 0-.75.75V6h14V3.75a.75.75 0 0 0-.75-.75H13V1h-2v2H5V1H3v2H1.75ZM1 7h14v7.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V7Zm2 2.75A.75.75 0 0 1 3.75 9h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75v-2.5Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Calendar24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Calendar24Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M3 5a1 1 0 0 0-1 1v3h20V6a1 1 0 0 0-1-1h-2V2h-3v3H8V2H5v3zm-1 6h20v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm3 3h5v5H5z"
       clipRule="evenodd"
-      d="M3 5a1 1 0 0 0-1 1v3h20V6a1 1 0 0 0-1-1h-2V2h-3v3H8V2H5v3H3Zm-1 6h20v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V11Zm3 3h5v5H5v-5Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Chat16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -13,20 +13,20 @@ interface SVGRProps {
 }
 const Chat16Icon = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M1 8a7 7 0 1 1 7 7H1.746A.746.746 0 0 1 1 14.254zm3-1.25A.75.75 0 0 1 4.75 6h6.5a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 4 7.25zM4.75 9a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75h3.5a.75.75 0 0 0 .75-.75v-.5A.75.75 0 0 0 8.25 9z"
       clipRule="evenodd"
-      d="M1 8a7 7 0 1 1 7 7H1.746A.746.746 0 0 1 1 14.254V8Zm3-1.25A.75.75 0 0 1 4.75 6h6.5a.75.75 0 0 1 .75.75v.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 4 7.25v-.5ZM4.75 9a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75h3.5a.75.75 0 0 0 .75-.75v-.5A.75.75 0 0 0 8.25 9h-3.5Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Chat24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -13,20 +13,20 @@ interface SVGRProps {
 }
 const Chat24Icon = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M12 2C6.477 2 2 6.477 2 12v9.048c0 .526.426.952.952.952H12c5.523 0 10-4.477 10-10S17.523 2 12 2m-6 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"
       clipRule="evenodd"
-      d="M12 2C6.477 2 2 6.477 2 12v9.048c0 .526.426.952.952.952H12c5.523 0 10-4.477 10-10S17.523 2 12 2Zm-6 8a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Checkmark12Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Checkmark12Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={12}
     height={12}
     viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M10.492 2.651c.28.242.31.665.067.944L5.448 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068z"
       clipRule="evenodd"
-      d="M10.492 2.651c.28.242.31.665.067.944L5.447 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068l.253.218Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Clipboard12Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Clipboard12Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={12}
     height={12}
     viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M4.67 0C4.3 0 4 .3 4 .67v.66a.667.667 0 0 0 .67.67h2.66A.67.67 0 0 0 8 1.33V.67C8 .3 7.7 0 7.33 0zm-3 1h.83v.33A2.17 2.17 0 0 0 4.67 3.5h2.66A2.17 2.17 0 0 0 9.5 1.33V1h.83c.37 0 .67.3.67.67v9.66c0 .37-.3.67-.67.67H1.67a.67.67 0 0 1-.67-.67V1.67c0-.37.3-.67.67-.67"
       clipRule="evenodd"
-      d="M4.67 0C4.3 0 4 .3 4 .67v.66a.667.667 0 0 0 .67.67h2.66A.668.668 0 0 0 8 1.33V.67C8 .3 7.7 0 7.33 0H4.67Zm-3 1h.83v.33A2.17 2.17 0 0 0 4.67 3.5h2.66A2.17 2.17 0 0 0 9.5 1.33V1h.83c.37 0 .67.3.67.67v9.66c0 .37-.3.67-.67.67H1.67a.67.67 0 0 1-.67-.67V1.67c0-.37.3-.67.67-.67Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Clipboard16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Clipboard16Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M6.75 1a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75v-.5A.75.75 0 0 0 9.25 1zm-4 1H4v2.25c0 .414.336.75.75.75h6.5a.75.75 0 0 0 .75-.75V2h1.25a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75H2.75a.75.75 0 0 1-.75-.75V2.75A.75.75 0 0 1 2.75 2"
       clipRule="evenodd"
-      d="M6.75 1a.75.75 0 0 0-.75.75v.5c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75v-.5A.75.75 0 0 0 9.25 1h-2.5Zm-4 1H4v2.25c0 .414.336.75.75.75h6.5a.75.75 0 0 0 .75-.75V2h1.25a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75H2.75a.75.75 0 0 1-.75-.75V2.75A.75.75 0 0 1 2.75 2Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Clipboard24Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -17,20 +17,20 @@ const Clipboard24Icon = ({
   ...props
 }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}
     viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M10 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM4 3h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3h3a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"
       clipRule="evenodd"
-      d="M10 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-4ZM4 3h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3h3a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
-      fill="currentColor"
     />
   </svg>
 )

package/icons/react/Close12Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -13,18 +13,18 @@ interface SVGRProps {
 }
 const Close12Icon = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={12}
     height={12}
     viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      d="M10.301 2.76a.667.667 0 0 0 0-.944l-.117-.117a.667.667 0 0 0-.943 0L6 4.939 2.76 1.7a.667.667 0 0 0-.944 0l-.117.117a.667.667 0 0 0 0 .943L4.939 6 1.7 9.24a.667.667 0 0 0 0 .944l.117.117c.26.26.683.26.943 0L6 7.061l3.24 3.24c.261.26.683.26.944 0l.117-.117a.667.667 0 0 0 0-.943L7.061 6l3.24-3.24Z"
       fill="currentColor"
+      d="M10.301 2.76a.667.667 0 0 0 0-.944l-.117-.117a.667.667 0 0 0-.943 0L6 4.939 2.76 1.7a.667.667 0 0 0-.944 0l-.117.117a.667.667 0 0 0 0 .943L4.939 6 1.7 9.24a.667.667 0 0 0 0 .944l.117.117c.26.26.683.26.943 0L6 7.061l3.24 3.24c.261.26.683.26.944 0l.117-.117a.667.667 0 0 0 0-.943L7.061 6z"
     />
   </svg>
 )

package/icons/react/Close16Icon.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from 'react'
+import type { SVGProps } from 'react'
 
 interface SVGRProps {
   title?: string
@@ -13,20 +13,20 @@ interface SVGRProps {
 }
 const Close16Icon = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M2.22 2.644a.75.75 0 0 0 0 1.06L6.514 8 2.22 12.295a.75.75 0 0 0 0 1.06l.424.425a.75.75 0 0 0 1.06 0L8 9.484l4.295 4.296a.75.75 0 0 0 1.06 0l.425-.425a.75.75 0 0 0 0-1.06L9.484 8l4.295-4.296a.75.75 0 0 0 0-1.06l-.424-.424a.75.75 0 0 0-1.061 0L7.999 6.515 3.704 2.22a.75.75 0 0 0-1.06 0z"
       clipRule="evenodd"
-      d="M2.22 2.644a.75.75 0 0 0 0 1.06L6.514 8 2.22 12.295a.75.75 0 0 0 0 1.06l.424.425a.75.75 0 0 0 1.06 0L8 9.483l4.295 4.296a.75.75 0 0 0 1.06 0l.425-.425a.75.75 0 0 0 0-1.06L9.484 8l4.295-4.296a.75.75 0 0 0 0-1.06l-.424-.424a.75.75 0 0 0-1.061 0L7.999 6.515 3.704 2.22a.75.75 0 0 0-1.06 0l-.424.424Z"
-      fill="currentColor"
     />
   </svg>
 )