@striae-org/striae 3.0.4

package/app/components/form/form.module.css

@@ -0,0 +1,427 @@
+/* Form Layout */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.label {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+/* Input Styling */
+.input,
+.textarea,
+.select {
+  padding: var(--spaceM);
+  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  font-family: inherit;
+}
+
+.input:focus,
+.textarea:focus,
+.select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 25%, transparent);
+}
+
+.input:disabled,
+.textarea:disabled,
+.select:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  cursor: not-allowed;
+}
+
+/* Select Specific */
+.select {
+  background-color: var(--background);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right var(--spaceM) center;
+  background-size: 16px;
+  padding-right: calc(var(--spaceM) + 24px);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
+.select:hover:not(:disabled) {
+  border-color: color-mix(in lab, var(--primary) 60%, transparent);
+}
+
+.select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Textarea Specific */
+.textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+/* Button Styling */
+.button {
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  border: none;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+}
+
+.buttonPrimary {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+.buttonPrimary:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.buttonSecondary {
+  background-color: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+}
+
+.buttonSecondary:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.buttonSuccess {
+  background-color: var(--success);
+  color: var(--white);
+}
+
+.buttonSuccess:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--success) 85%, var(--black));
+}
+
+.buttonError {
+  background-color: var(--error);
+  color: var(--white);
+}
+
+.buttonError:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--error) 85%, var(--black));
+}
+
+.button:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+/* Toggle/Checkbox Styling */
+.toggleWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spaceM);
+  margin: var(--spaceM) 0;
+  cursor: pointer;
+}
+
+.toggle input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--text);
+  border-radius: 3px;
+  margin: 0;
+  cursor: pointer;
+  position: relative;
+  background: var(--background);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.toggle input[type="checkbox"]:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.toggle input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--white);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.toggle input[type="checkbox"]:hover {
+  border-color: var(--primary);
+}
+
+.toggle input[type="checkbox"]:disabled {
+  background: var(--backgroundLight);
+  border-color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.toggle span {
+  font-size: var(--fontSizeBodyXS);
+  line-height: var(--lineHeightBody);
+  color: var(--textBody);
+}
+
+/* Message Styling */
+.errorMessage,
+.successMessage {
+  text-align: left;
+  padding: var(--spaceL) var(--spaceL) calc(var(--spaceL) + var(--spaceS));
+  border-radius: var(--spaceS);
+  margin: var(--spaceM) 0;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 16px color-mix(in lab, var(--text) 10%, transparent);
+  backdrop-filter: blur(8px);
+  animation: slideIn var(--durationM) var(--bezierFastoutSlowin);
+  transform-origin: top;
+  border-left: 4px solid;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.errorMessage {
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--error) 12%, transparent),
+    color-mix(in lab, var(--error) 8%, transparent)
+  );
+  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
+  border-left-color: var(--error);
+  color: color-mix(in lab, var(--error) 90%, var(--black));
+}
+
+.errorMessage::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--error),
+    color-mix(in lab, var(--error) 60%, transparent)
+  );
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.successMessage {
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--success) 12%, transparent),
+    color-mix(in lab, var(--success) 8%, transparent)
+  );
+  border: 1px solid color-mix(in lab, var(--success) 30%, transparent);
+  border-left-color: var(--success);
+  color: color-mix(in lab, var(--success) 90%, var(--black));
+  box-shadow: 0 4px 20px color-mix(in lab, var(--success) 20%, transparent);
+}
+
+.successMessage::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--success),
+    color-mix(in lab, var(--success) 60%, transparent)
+  );
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.errorMessage h2,
+.successMessage h2 {
+  font-size: var(--fontSizeH4);
+  font-weight: var(--fontWeightSemibold);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+}
+
+.errorMessage h2::before {
+  content: "⚠️";
+  font-size: var(--fontSizeH5);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.successMessage h2::before {
+  content: "✅";
+  font-size: var(--fontSizeH5);
+  animation: bounce 1s ease-in-out;
+}
+
+.errorMessage p,
+.successMessage p {
+  font-size: var(--fontSizeBodyS);
+  line-height: var(--lineHeightBody);
+  margin: 0;
+  opacity: 0.9;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.successMessage p {
+  color: color-mix(in lab, var(--success) 85%, var(--black));
+}
+
+/* Field Error Styling */
+.error {
+  color: var(--error);
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: color-mix(in lab, var(--error) 8%, transparent);
+  border-radius: var(--spaceXS);
+  border-left: 3px solid var(--error);
+  animation: slideIn var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+}
+
+.error::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--error);
+  animation: errorPulse 1.5s ease-in-out infinite;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceL);
+    padding-bottom: calc(var(--spaceL) + var(--spaceS));
+    margin-top: var(--spaceM);
+    margin-bottom: var(--spaceM);
+  }
+}
+
+@keyframes shimmer {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: translateX(-100%);
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  40%,
+  43% {
+    transform: translate3d(0, -4px, 0) scale(1.1);
+  }
+  70% {
+    transform: translate3d(0, -2px, 0) scale(1.05);
+  }
+  90% {
+    transform: translate3d(0, -1px, 0) scale(1.02);
+  }
+}
+
+@keyframes errorPulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--error) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--error) 20%, transparent);
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .errorMessage,
+  .successMessage,
+  .error {
+    animation: none;
+  }
+
+  .errorMessage::before,
+  .successMessage::before,
+  .error::before {
+    animation: none;
+  }
+
+  .errorMessage h2::before,
+  .successMessage h2::before {
+    animation: none;
+  }
+}

package/app/components/form/index.ts

@@ -0,0 +1,6 @@
+// Export all form components for easy importing
+export { FormField } from './form-field';
+export { FormMessage } from './form-message';
+export { BaseForm } from './base-form';
+export { FormButton } from './form-button';
+export { FormToggle } from './form-toggle';

package/app/components/icon/icon.module.css

@@ -0,0 +1,3 @@
+  .icon {
+    fill: currentColor;
+  }

package/app/components/icon/icon.tsx

@@ -0,0 +1,27 @@
+import { classes } from '~/utils/style';
+import styles from './icon.module.css';
+import { forwardRef } from 'react';
+import sprites from './icons.svg';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  icon: string;
+  className?: string;
+  size?: number;
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(({ icon, className, size, ...rest }, ref) => {
+  return (
+    <svg
+      aria-hidden
+      ref={ref}
+      className={classes(styles.icon, className)}
+      width={size || 24}
+      height={size || 24}
+      {...rest}
+    >
+      <use href={`${sprites}#${icon}`} />
+    </svg>
+  );
+});
+
+Icon.displayName = 'Icon';

package/app/components/icon/icons.svg

@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <defs>
+    <symbol id="send" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2 .01 7Z"/>
+    </symbol>
+    <symbol id="arrow-right" width="24" height="24" viewBox="0 0 24 24">
+      <path d="m14.2 4.8 6.5 6.5.71.7-.7.7-6.5 6.5-1.42-1.4 4.8-4.8H3v-2h14.59l-4.8-4.8 1.42-1.4Z"/>
+    </symbol>
+    <symbol id="chevron-right" width="24" height="24" viewBox="0 0 24 24">
+      <path d="m13.59 12-5.8-5.8 1.42-1.4 6.5 6.5.7.7-.7.7-6.5 6.5-1.42-1.4 5.8-5.8Z"/>
+    </symbol>
+    <symbol id="github" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M12 2a10 10 0 0 0-3.16 19.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02a9.42 9.42 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5a10.03 10.03 0 0 0 3.9-16.57A10 10 0 0 0 12 2Z"/>
+    </symbol>
+    <symbol id="google" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="var(--primary)"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="var(--primary)"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="var(--primary)"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="var(--primary)"/><path d="M1 1h22v22H1z" fill="none"/>  
+    </symbol>
+    <symbol id="menu" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M22 6H2V4h20v2ZM2 13h16v-2H2v2Zm0 7h20v-2H2v2Z"/>
+    </symbol>
+    <symbol id="figma" width="24" height="24" viewBox="0 0 24 24">
+      <path fill-rule="evenodd" d="M15 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-2 5.46A4 4 0 0 0 17.65 9a4.01 4.01 0 0 0 .18-5.83A4 4 0 0 0 15 2H9a4 4 0 0 0-2.65 7 4.01 4.01 0 0 0 0 6A3.98 3.98 0 0 0 5 18a4 4 0 1 0 8 0v-2.54ZM11 16H9a2 2 0 1 0 2 2v-2ZM9 8h2V4H9a2 2 0 1 0 0 4Zm0 2a2 2 0 1 0 0 4h2v-4H9Zm4-2V4h2a2 2 0 0 1 0 4h-2Z"/>
+    </symbol>
+    <symbol id="copy" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M3 2h12v4H7v10H3V2Zm6 20V8h12v11l-3 3H9Z"/>
+    </symbol>
+    <symbol id="error" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M19.7 19H4.3L12 5.07 19.7 19ZM11.12 2.52l-9.39 17L2.61 21h18.78l.88-1.48-9.4-17h-1.75ZM11 14v-4h2v4h-2Zm0 3v-2h2v2h-2Z"/>
+    </symbol>
+    <symbol id="arrow-left" width="24" height="24" viewBox="0 0 24 24">
+      <path d="m9.8 19.2-6.5-6.5-.71-.7.7-.7 6.5-6.5 1.42 1.4L6.4 11H21v2H6.41l4.8 4.8-1.42 1.4Z"/>
+    </symbol>
+    <symbol id="check" width="24" height="24" viewBox="0 0 24 24">
+      <path d="m20.2 7.2-10 10-.7.71-.7-.7-5-5 1.4-1.42 4.3 4.3 9.3-9.3 1.4 1.42Z"/>
+    </symbol>
+    <symbol id="link" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M9 4 8 5v2h2V6h10v7H10v-2H8v3l1 1h12l1-1V5l-1-1H9Zm2 4H3L2 9v9l1 1h12l1-1v-2h-2v1H4v-7h10v2h2V9l-1-1h-4Z"/>
+    </symbol>
+    <symbol id="close" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/>
+    </symbol>
+    <symbol id="pause" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M6 19h4V5H6v14Zm8-14v14h4V5h-4Z"/>
+    </symbol>
+    <symbol id="play" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M8 5v14l11-7L8 5Z"/>
+    </symbol>
+    <symbol id="bluesky" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M6.34 3.78C8.63 5.51 11.09 9.01 12 10.9v4.96c0-.1-.04.02-.13.27-.47 1.4-2.32 6.83-6.54 2.49-2.22-2.29-1.19-4.58 2.86-5.27-2.32.4-4.92-.26-5.63-2.82C2.35 9.8 2 5.25 2 4.64c0-3.07 2.68-2.1 4.34-.86Zm11.32 0C15.37 5.51 12.91 9.01 12 10.9v4.96c0-.1.04.02.13.27.47 1.4 2.32 6.83 6.54 2.49 2.22-2.29 1.19-4.58-2.86-5.27 2.32.4 4.92-.26 5.63-2.82.21-.73.56-5.27.56-5.88 0-3.07-2.68-2.1-4.34-.86Z"/>
+    </symbol>
+    <symbol id="linkedin" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M22.49,0H1.51C.68,0,0,.68,0,1.51v20.97c0,.84.68,1.51,1.51,1.51h20.97c.84,0,1.51-.68,1.51-1.51V1.51c0-.84-.68-1.51-1.51-1.51ZM7.12,20.25h-3.38v-10.5h3.38v10.5ZM5.44,7.4c-1.14,0-2.07-.88-2.07-1.96s.93-1.96,2.07-1.96,2.07.88,2.07,1.96-.93,1.96-2.07,1.96ZM20.21,14.62s-.11,4.75-.02,5.63h-3.38c0-1.17,0-2.35-.01-3.54,0-.96-.02-1.92-.04-2.87-.11-.19-.32-.51-.71-.77-.23-.15-.45-.24-.62-.29-.28-.07-.51-.08-.66-.07-.19.01-.33.05-.4.07-.02,0-.26.07-.5.22-.45.27-.72.71-.81.87v6.38h-3.38v-10.5h3.38v1.12c.48-.37,1.79-2.21,4.5-1.12,1.02.53,1.76,1.25,2.25,2.25.15.31.39,1.41.39,1.41v1.21Z"/>
+    </symbol>
+    <symbol id="soundcloud" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M23.9986 14.7331C23.95 15.6191 23.5689 16.4516 22.9349 17.0567C22.3009 17.6618 21.4631 17.9927 20.5964 17.9803H12.419C12.239 17.9786 12.0669 17.9044 11.9399 17.7738C11.8129 17.6432 11.7413 17.4667 11.7405 17.2824V8.2681C11.7345 8.11342 11.7745 7.96051 11.855 7.8295C11.9355 7.6985 12.0529 7.59552 12.1917 7.53411C12.1917 7.53411 12.9439 7 14.5281 7C15.496 6.99882 16.446 7.26605 17.2774 7.77331C17.9263 8.16418 18.489 8.68867 18.9297 9.31361C19.3704 9.93855 19.6797 10.6503 19.8379 11.4039C20.12 11.3222 20.412 11.2814 20.7052 11.2827C21.145 11.2799 21.5808 11.3678 21.9867 11.5412C22.3926 11.7146 22.7602 11.9699 23.0676 12.2919C23.3749 12.6139 23.6158 12.9961 23.7757 13.4155C23.9357 13.8349 24.0115 14.283 23.9986 14.7331Z"/>
+      <path d="M10.7195 8.83825C10.7236 8.80025 10.7198 8.76179 10.7084 8.72538C10.697 8.68898 10.6782 8.65545 10.6533 8.62697C10.6284 8.59849 10.5979 8.57572 10.5638 8.56012C10.5297 8.54453 10.4928 8.53647 10.4554 8.53647C10.4181 8.53647 10.3812 8.54453 10.3471 8.56012C10.313 8.57572 10.2825 8.59849 10.2576 8.62697C10.2327 8.65545 10.2139 8.68898 10.2025 8.72538C10.1911 8.76179 10.1873 8.80025 10.1914 8.83825C9.96735 11.8692 9.79452 14.7102 10.1914 17.7313C10.1986 17.7979 10.2295 17.8594 10.2782 17.9041C10.3269 17.9488 10.39 17.9735 10.4554 17.9735C10.5209 17.9735 10.584 17.9488 10.6327 17.9041C10.6814 17.8594 10.7123 17.7979 10.7195 17.7313C11.1452 14.6839 10.9659 11.8954 10.7195 8.83825Z"/>
+      <path d="M9.06799 9.8868C9.06064 9.81689 9.0283 9.75222 8.9772 9.70523C8.9261 9.65824 8.85983 9.63225 8.79114 9.63225C8.72246 9.63225 8.65619 9.65824 8.60509 9.70523C8.55398 9.75222 8.52165 9.81689 8.5143 9.8868C8.21825 12.494 8.21825 15.1274 8.5143 17.7346C8.52436 17.8019 8.55765 17.8634 8.60814 17.9078C8.65864 17.9522 8.72299 17.9766 8.78954 17.9766C8.8561 17.9766 8.92045 17.9522 8.97094 17.9078C9.02144 17.8634 9.05473 17.8019 9.06479 17.7346C9.39552 15.1297 9.39659 12.492 9.06799 9.8868Z"/>
+      <path d="M7.40691 9.62139C7.39969 9.55398 7.36843 9.49168 7.31911 9.44642C7.26979 9.40116 7.20589 9.37613 7.13966 9.37613C7.07343 9.37613 7.00953 9.40116 6.96021 9.44642C6.91089 9.49168 6.87963 9.55398 6.87242 9.62139C6.61957 12.387 6.49155 14.969 6.87242 17.728C6.87242 17.8002 6.9004 17.8693 6.95022 17.9203C7.00004 17.9713 7.06761 18 7.13806 18C7.20851 18 7.27608 17.9713 7.3259 17.9203C7.37572 17.8693 7.40371 17.8002 7.40371 17.728C7.79738 14.933 7.67575 12.423 7.40691 9.62139Z"/>
+      <path d="M5.75542 10.4111C5.75542 10.3363 5.72642 10.2647 5.6748 10.2118C5.62318 10.159 5.55317 10.1293 5.48017 10.1293C5.40717 10.1293 5.33716 10.159 5.28554 10.2118C5.23392 10.2647 5.20492 10.3363 5.20492 10.4111C4.89926 12.8433 4.89926 15.3056 5.20492 17.7378C5.21219 17.8061 5.24381 17.8692 5.29372 17.915C5.34363 17.9609 5.40832 17.9862 5.47537 17.9862C5.54242 17.9862 5.60711 17.9609 5.65702 17.915C5.70693 17.8692 5.73856 17.8061 5.74582 17.7378C6.07706 15.3076 6.08029 12.8422 5.75542 10.4111Z"/>
+      <path d="M4.08793 12.2428C4.08793 12.1689 4.05927 12.0981 4.00825 12.0458C3.95723 11.9936 3.88804 11.9642 3.81588 11.9642C3.74373 11.9642 3.67454 11.9936 3.62352 12.0458C3.5725 12.0981 3.54384 12.1689 3.54384 12.2428C3.15017 14.1302 3.3358 15.8472 3.55984 17.7575C3.56951 17.8199 3.60061 17.8767 3.64754 17.9178C3.69447 17.9588 3.75417 17.9814 3.81588 17.9814C3.8776 17.9814 3.93729 17.9588 3.98423 17.9178C4.03116 17.8767 4.06226 17.8199 4.07193 17.7575C4.31837 15.821 4.5072 14.1433 4.08793 12.2428Z"/>
+      <path d="M2.43324 11.9544C2.42584 11.8837 2.39315 11.8182 2.34145 11.7706C2.28975 11.7231 2.2227 11.6968 2.15319 11.6968C2.08369 11.6968 2.01663 11.7231 1.96494 11.7706C1.91324 11.8182 1.88054 11.8837 1.87314 11.9544C1.52428 13.8811 1.6395 15.5785 1.88275 17.5019C1.90835 17.7936 2.39163 17.7903 2.42364 17.5019C2.69249 15.549 2.81731 13.9008 2.43324 11.9544Z"/>
+      <path d="M0.762552 12.8981C0.755153 12.8274 0.72246 12.7619 0.670761 12.7143C0.619063 12.6668 0.55201 12.6405 0.482504 12.6405C0.412997 12.6405 0.345944 12.6668 0.294246 12.7143C0.242547 12.7619 0.209854 12.8274 0.202455 12.8981C-0.117601 14.1924 -0.0183835 15.2639 0.224859 16.5615C0.231981 16.6272 0.26253 16.688 0.310657 16.7321C0.358784 16.7762 0.42111 16.8006 0.485704 16.8006C0.550298 16.8006 0.612624 16.7762 0.660751 16.7321C0.708879 16.688 0.739427 16.6272 0.746549 16.5615C1.0282 15.2377 1.16582 14.1892 0.762552 12.8981Z"/>
+    </symbol>
+    <symbol id="tictactoe" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M23.94,15.68c-.11-.32-1.37-.2-1.85-.2h-5.85v-6.98h7.45c.1-.03.17-.11.24-.16.03-.14.05-.2.04-.36-.05-.05-.12-.14-.16-.2-.26-.06-.65-.04-.98-.04h-6.6V.76c0-.18.03-.45-.04-.56-.06-.19-.26-.21-.47-.2-.05.05-.12.1-.18.13-.17.66-.07,1.77-.07,2.56v5.05h-6.98V1.83c0-.4.09-1.46-.07-1.69C8.35,0,8.18,0,8,0c-.08.08-.21.13-.24.24v7.49H.77c-.18,0-.45-.03-.56.04-.17.05-.29.35-.16.51.11.32,1.37.2,1.85.2h5.85v6.98H.3c-.1.03-.17.11-.24.16-.03.14-.05.2-.04.36.05.05.12.14.16.2.26.06.65.04.98.04h6.6v6.98c0,.18-.03.45.04.56.06.19.26.21.47.2.05-.05.12-.1.18-.13.17-.66.07-1.77.07-2.56v-5.05h6.98v5.92c0,.4-.09,1.46.07,1.69.09.14.26.14.44.13.08-.08.21-.13.24-.24v-7.49h6.98c.18,0,.45.03.56-.04.17-.05.29-.35.16-.51ZM15.49,15.48h-6.98v-6.98h6.98v6.98Z"/>
+    </symbol>
+    <symbol id="number" viewBox="0 0 24 24">
+      <path d="M1,9h24M1,17h24M10,1l-3,24M19,1l-3,24" style="stroke:#1e1e1e; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;" />
+    </symbol>
+    <symbol id="class" viewBox="0 0 24 24">
+      <path d="M12,24c-1.66,0-3.22-.31-4.68-.95-1.46-.63-2.73-1.48-3.81-2.56s-1.94-2.35-2.57-3.81c-.63-1.46-.94-3.02-.94-4.68s.31-3.22.94-4.68,1.49-2.73,2.57-3.81,2.35-1.94,3.81-2.57,3.02-.94,4.68-.94,3.22.31,4.68.94c1.46.63,2.73,1.49,3.81,2.57s1.94,2.35,2.56,3.81c.63,1.46.95,3.02.95,4.68s-.31,3.22-.95,4.68c-.63,1.46-1.48,2.73-2.56,3.81s-2.35,1.94-3.81,2.56c-1.46.63-3.02.95-4.68.95ZM12,21.6c2.68,0,4.95-.93,6.81-2.79s2.79-4.13,2.79-6.81-.93-4.95-2.79-6.81-4.13-2.79-6.81-2.79-4.95.93-6.81,2.79-2.79,4.13-2.79,6.81.93,4.95,2.79,6.81,4.13,2.79,6.81,2.79Z" />
+      <path d="M12.29,15.89c-.5,0-.97-.09-1.4-.28-.44-.19-.82-.45-1.14-.77-.32-.32-.58-.71-.77-1.14-.19-.44-.28-.91-.28-1.4s.09-.97.28-1.4c.19-.44.45-.82.77-1.14.32-.32.7-.58,1.14-.77.44-.19.91-.28,1.4-.28s.97.09,1.4.28c.44.19.82.45,1.14.77.32.32.58.7.77,1.14.19.44.28.91.28,1.4s-.09.97-.28,1.4c-.19.44-.45.82-.77,1.14-.32.32-.71.58-1.14.77-.44.19-.91.28-1.4.28ZM12.29,15.17c.8,0,1.49-.28,2.04-.84s.84-1.24.84-2.04-.28-1.48-.84-2.04-1.24-.84-2.04-.84-1.48.28-2.04.84-.84,1.24-.84,2.04.28,1.49.84,2.04,1.24.84,2.04.84Z" />
+    </symbol>
+    <symbol id="notes" viewBox="0 0 24 24">
+      <path d="M2.67,21.33h1.9l13.03-13.03-1.9-1.9L2.67,19.43v1.9ZM0,24v-5.67L17.6.77c.27-.24.56-.43.88-.57.32-.13.66-.2,1.02-.2s.7.07,1.03.2c.33.13.62.33.87.6l1.83,1.87c.27.24.46.53.58.87.12.33.18.67.18,1,0,.36-.06.69-.18,1.02-.12.32-.32.62-.58.88L5.67,24H0ZM16.63,7.37l-.93-.97,1.9,1.9-.97-.93Z" />
+    </symbol>
+    <symbol id="print" viewBox="0 0 28 28">
+      <path d="M5.8,9.4V1h14.4v8.4M5.8,20.2h-2.4c-.64,0-1.25-.25-1.7-.7s-.7-1.06-.7-1.7v-6c0-.64.25-1.25.7-1.7s1.06-.7,1.7-.7h19.2c.64,0,1.25.25,1.7.7s.7,1.06.7,1.7v6c0,.64-.25,1.25-.7,1.7s-1.06.7-1.7.7h-2.4M5.8,15.4h14.4v9.6H5.8v-9.6Z" style="stroke:#1e1e1e; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;" />
+    </symbol>
+    <symbol id="id" viewBox="0 0 24 24">
+      <path d="M3.65,0v24H0V0h3.65ZM14.36,24h-4.52l.03-3.28h4.49c1.31,0,2.4-.32,3.29-.97.89-.65,1.56-1.58,2.01-2.79.46-1.21.68-2.65.68-4.32v-1.3c0-1.3-.13-2.45-.39-3.45-.25-1-.63-1.84-1.13-2.52-.49-.68-1.11-1.2-1.83-1.55-.72-.35-1.55-.53-2.49-.53h-4.74V0h4.74c1.41,0,2.69.27,3.85.81,1.16.53,2.17,1.29,3.01,2.29.85,1,1.51,2.2,1.96,3.59s.68,2.96.68,4.68v1.27c0,1.73-.23,3.29-.68,4.68s-1.11,2.59-1.96,3.59c-.85.99-1.87,1.75-3.05,2.29-1.17.53-2.49.79-3.94.79ZM11.86,0v24h-3.65V0h3.65Z"/>
+    </symbol>
+    <symbol id="index" viewBox="0 0 24 24">
+      <path d="M24,24c0-6.59-5.37-11.93-12-11.93S0,17.41,0,24M2.71,24c0-5.1,4.16-9.24,9.29-9.24s9.29,4.14,9.29,9.24" style="fill-rule:evenodd;"/>
+      <polygon points="18.3 .8 5.7 .8 12 7.93 18.3 .8" style="fill-rule:evenodd;"/>
+      <polyline points="0 23.75 0 0 24 0 24 23.75" style="fill:none; fill-rule:evenodd;"/>
+    </symbol>
+    <symbol id="eye" viewBox="0 0 24 24">
+    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="#1E1E1E" stroke-width="2.5" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#1E1E1E" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="eye-off" viewBox="0 0 24 24">
+      <path d="M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.6819 3.96914 7.65661 6.06 6.06M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1962C9.51897 13.9113 9.29439 13.5719 9.14351 13.1984C8.99262 12.8248 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34884 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23" stroke="#1E1E1E" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="globe" viewBox="0 0 24 24">
+      <path d="M12,24c-1.64,0-3.19-.32-4.65-.95s-2.74-1.49-3.82-2.58-1.95-2.36-2.58-3.83c-.63-1.46-.95-3.01-.95-4.65s.31-3.22.95-4.66c.63-1.45,1.49-2.72,2.58-3.81s2.36-1.95,3.82-2.58c1.46-.63,3.01-.95,4.65-.95s3.22.31,4.66.95c1.45.63,2.72,1.49,3.81,2.58s1.95,2.36,2.58,3.81c.63,1.45.95,3.01.95,4.66s-.32,3.19-.95,4.65-1.49,2.74-2.58,3.83-2.36,1.95-3.81,2.58c-1.45.63-3.01.95-4.66.95ZM12,21.54c.52-.72.97-1.47,1.35-2.25.38-.78.69-1.61.93-2.49h-4.56c.24.88.55,1.71.93,2.49.38.78.83,1.53,1.35,2.25ZM8.88,21.06c-.36-.66-.68-1.34-.94-2.05-.27-.71-.5-1.45-.67-2.2h-3.54c.58,1,1.31,1.87,2.18,2.61.87.74,1.87,1.29,2.99,1.65ZM15.12,21.06c1.12-.36,2.11-.91,2.98-1.65.87-.74,1.6-1.61,2.18-2.61h-3.54c-.18.76-.4,1.49-.67,2.2-.27.71-.59,1.4-.94,2.05ZM2.7,14.4h4.08c-.06-.4-.11-.8-.14-1.19s-.04-.79-.04-1.21.01-.82.04-1.21.07-.79.14-1.19H2.7c-.1.4-.17.8-.23,1.19s-.07.79-.07,1.21.02.82.07,1.21.13.79.23,1.19ZM9.18,14.4h5.64c.06-.4.1-.8.13-1.19.03-.39.05-.79.05-1.21s-.01-.82-.05-1.21c-.03-.39-.08-.79-.13-1.19h-5.64c-.06.4-.11.8-.14,1.19s-.04.79-.04,1.21.01.82.04,1.21.07.79.14,1.19ZM17.22,14.4h4.08c.1-.4.17-.8.22-1.19s.08-.79.08-1.21-.02-.82-.08-1.21-.13-.79-.22-1.19h-4.08c.06.4.1.8.13,1.19.03.39.05.79.05,1.21s-.01.82-.05,1.21c-.03.39-.08.79-.13,1.19ZM16.74,7.2h3.54c-.58-1-1.3-1.87-2.18-2.61-.87-.74-1.87-1.29-2.98-1.65.36.66.67,1.34.94,2.05.27.71.5,1.45.67,2.21ZM9.72,7.2h4.56c-.24-.88-.55-1.71-.93-2.49s-.83-1.53-1.35-2.25c-.52.72-.97,1.47-1.35,2.25s-.69,1.61-.93,2.49ZM3.72,7.2h3.54c.18-.76.4-1.49.67-2.21.27-.71.58-1.39.94-2.05-1.12.36-2.12.91-2.99,1.65-.87.74-1.6,1.61-2.18,2.61Z"/>
+    </symbol>
+    <symbol id="box" viewBox="0 0 24 24">
+      <path d="M2.67,24c-.73,0-1.36-.26-1.88-.78-.52-.52-.78-1.15-.78-1.88V2.67c0-.73.26-1.36.78-1.88s1.15-.78,1.88-.78h18.67c.73,0,1.36.26,1.88.78.52.52.78,1.15.78,1.88v18.67c0,.73-.26,1.36-.78,1.88-.52.52-1.15.78-1.88.78H2.67ZM2.67,21.33h18.67V2.67H2.67v18.67Z"/>
+    </symbol>
+  </defs>
+</svg>

package/app/components/icon/manifest.json

@@ -0,0 +1,110 @@
+{
+  "send": {
+    "width": 24,
+    "height": 24
+  },
+  "arrow-right": {
+    "width": 24,
+    "height": 24
+  },
+  "chevron-right": {
+    "width": 24,
+    "height": 24
+  },
+  "github": {
+    "width": 24,
+    "height": 24
+  },
+  "google": {
+    "width": 24,
+    "height": 24
+  },
+  "menu": {
+    "width": 24,
+    "height": 24
+  },
+  "figma": {
+    "width": 24,
+    "height": 24
+  },
+  "copy": {
+    "width": 24,
+    "height": 24
+  },
+  "error": {
+    "width": 24,
+    "height": 24
+  },
+  "arrow-left": {
+    "width": 24,
+    "height": 24
+  },
+  "check": {
+    "width": 24,
+    "height": 24
+  },
+  "link": {
+    "width": 24,
+    "height": 24
+  },
+  "close": {
+    "width": 24,
+    "height": 24
+  },
+  "pause": {
+    "width": 24,
+    "height": 24
+  },
+  "play": {
+    "width": 24,
+    "height": 24
+  },
+  "bluesky": {
+    "width": 24,
+    "height": 24
+  },
+  "linkedin": {
+    "width": 24,
+    "height": 24
+  },
+  "soundcloud": {
+    "width": 24,
+    "height": 24
+  },
+  "number": {
+    "width": 24,
+    "height": 24
+  },
+  "class": {
+    "width": 24,
+    "height": 24
+  },
+  "notes": {
+    "width": 24,
+    "height": 24
+  },
+  "print": {
+    "width": 24,
+    "height": 24
+  },
+  "id": {
+    "width": 24,
+    "height": 24
+  },
+  "index": {
+    "width": 24,
+    "height": 24
+  },
+  "tictactoe": {
+    "width": 24,
+    "height": 24
+  },
+  "eye": {
+    "width": 24,
+    "height": 24
+  },
+  "eye-off": {
+    "width": 24,
+    "height": 24
+  }
+}