@infonomic/uikit 1.5.0 → 2.1.0

package/src/icons/chevron-left-icon.tsx

@@ -0,0 +1,58 @@
+/**
+ * Byline CMS
+ *
+ * Copyright © 2025 Anthony Bouch and contributors.
+ *
+ * This file is part of Byline CMS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronLeftIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-left-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={1}
+      >
+        <path
+          d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronLeftIcon.displayName = 'ChevronLeftIcon'

package/src/icons/chevron-right-double-icon.tsx

@@ -0,0 +1,58 @@
+/**
+ * Byline CMS
+ *
+ * Copyright © 2025 Anthony Bouch and contributors.
+ *
+ * This file is part of Byline CMS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronRightDoubleIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-right-double-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={1}
+      >
+        <path
+          d="M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronRightDoubleIcon.displayName = 'ChevronRightDoubleIcon'

package/src/icons/chevron-right-icon.tsx

@@ -0,0 +1,58 @@
+/**
+ * Byline CMS
+ *
+ * Copyright © 2025 Anthony Bouch and contributors.
+ *
+ * This file is part of Byline CMS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronRightIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-right-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={1}
+      >
+        <path
+          d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronRightIcon.displayName = 'ChevronRightIcon'

package/src/icons/chevrons-up-down.tsx

@@ -0,0 +1,37 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronsUpDown = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevrons-up-down', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronsUpDown.displayName = 'ChevronsUpDown'

package/src/icons/close-icon.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['close-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-contrast'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+    {...rest}
+  >
+    <path
+      d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>

package/src/icons/close-icon.tsx

@@ -0,0 +1,30 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const CloseIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('close-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+      >
+        <path
+          d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+CloseIcon.displayName = 'CloseIcon'

package/src/icons/copy-icon.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-gray'], svgClassName)
+
+  return (
+    <IconElement className={cx('copy-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth="0"
+      >
+        <path
+          d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
+          // fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    </IconElement>
+  )
+}
+
+CopyIcon.displayName = 'CopyIcon'

package/src/icons/danger-icon.tsx

@@ -0,0 +1,18 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const DangerIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-danger'], svgClassName)
+
+  return (
+    <IconElement className={cx('danger-icon', className)} {...rest}>
+      <svg className={applied} focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+      </svg>
+    </IconElement>
+  )
+}

package/src/icons/dashboard-icon.tsx

@@ -0,0 +1,41 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.jsx'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const DashboardIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('dashboard-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+      >
+        {' '}
+        <path d="M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1"></path>{' '}
+        <path d="M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1"></path>{' '}
+        <path d="M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1"></path>{' '}
+        <path d="M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1"></path>{' '}
+      </svg>
+    </IconElement>
+  )
+}
+
+DashboardIcon.displayName = 'DashboardIcon'

package/src/icons/delete-icon.tsx

@@ -0,0 +1,34 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const DeleteIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-danger'], svgClassName)
+
+  return (
+    <IconElement className={cx('delete-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.5}
+      >
+        <path d="M4 7l16 0"></path> <path d="M10 11l0 6"></path> <path d="M14 11l0 6"></path>
+        <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+        <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+DeleteIcon.displayName = 'DeleteIcon'

package/src/icons/document-icon.tsx

@@ -0,0 +1,38 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const DocumentIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('document-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+        <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+DocumentIcon.displayName = 'DocumentIcon'

package/src/icons/download-icon.tsx

@@ -0,0 +1,39 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const DownloadIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('download-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth="0"
+      >
+        <path
+          d="M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+DownloadIcon.displayName = 'DownloadIcon'

package/src/icons/edit-icon.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const EditIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('edit-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+        <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+        <path d="M16 5l3 3" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EditIcon.displayName = 'EditIcon'

package/src/icons/ellipsis-icon.tsx

@@ -0,0 +1,38 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const EllipsisIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('ellipsis-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        strokeWidth={2}
+      >
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="19" cy="12" r="1" />
+        <circle cx="5" cy="12" r="1" />
+      </svg>
+    </IconElement>
+  )
+}
+
+EllipsisIcon.displayName = 'EllipsisIcon'

package/src/icons/email-icon.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const EmailIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('email-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.5}
+      >
+        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
+        <path d="M3 7l9 6l9 -6"></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+EmailIcon.displayName = 'UserIcon'

package/src/icons/external-link-icon.tsx

@@ -0,0 +1,39 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const ExternalLinkIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('external-link-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth="0"
+      >
+        <path
+          d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon'

package/src/icons/github-icon.tsx

@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const GithubIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('github-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className={applied}
+        focusable="false"
+        aria-hidden="true"
+        strokeWidth={1.75}
+      >
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+GithubIcon.displayName = 'GithubIcon'