@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/src/components/charts/index.ts

@@ -1,8 +1,9 @@
-export {
-  HogTrendLineChart,
-  InsightDoughnutChart,
-  InsightHorizontalBarChart,
-  InsightPolarAreaChart,
-  InsightStackedBarChart,
-  InsightVerticalBarChart,
-} from "@/components/charts/ph-insight-charts";
+"use client";
+
+export { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart } from "./quill";
+export type { TimeSeriesLineChartProps, TimeSeriesLineChartSeries } from "./quill";
+export type { BarChartProps, BarChartSeries } from "./quill";
+export type { PieChartProps, PieChartSlice } from "./quill";
+export type { SparklineProps } from "./quill";
+export type { MetricCardProps } from "./quill";
+export type { FunnelChartProps, FunnelStep } from "./quill/FunnelChart";

package/src/components/charts/quill/BarChart.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface BarChartSeries {
+  key: string;
+  label: string;
+  data: number[];
+  color?: string;
+}
+
+export interface BarChartProps {
+  series: BarChartSeries[];
+  labels: string[];
+  className?: string;
+  height?: number;
+}
+
+export function BarChart({ series, labels, className, height = 280 }: BarChartProps) {
+  const tokens = useChartTokens();
+  const groupCount = labels.length;
+  const barCount = series.length;
+
+  const { maxVal, chartData } = useMemo(() => {
+    let mx = 0;
+    const flat = series.flatMap((s) => s.data);
+    for (const v of flat) if (v > mx) mx = v;
+    return {
+      maxVal: mx || 1,
+      chartData: series.map((s, i) => ({
+        label: s.label,
+        color: s.color ?? tokens.series[i % tokens.series.length],
+        values: s.data,
+      })),
+    };
+  }, [series, tokens.series]);
+
+  const padding = { top: 16, right: 8, bottom: 24, left: 8 };
+  const innerW = 400 - padding.left - padding.right;
+  const innerH = height - padding.top - padding.bottom;
+  const groupW = innerW / groupCount;
+  const barW = Math.max(4, (groupW * 0.7) / barCount);
+  const gap = groupW * 0.15;
+
+  return (
+    <div className={cn("relative w-full", className)} style={{ height }}>
+      <svg viewBox={`0 0 400 ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid meet" suppressHydrationWarning>
+        {chartData.map((bar, bi) =>
+          bar.values.map((v, li) => {
+            const x = padding.left + li * groupW + gap / 2 + bi * barW;
+            const barH = (v / maxVal) * (innerH - 4);
+            const y = padding.top + innerH - barH;
+            return (
+              <rect
+                key={`${bi}-${li}`}
+                x={x}
+                y={y}
+                width={barW}
+                height={barH}
+                fill={bar.color}
+                rx={2}
+              >
+                <title>{`${bar.label}: ${v}`}</title>
+              </rect>
+            );
+          })
+        )}
+        {labels.map((l, i) => (
+          <text
+            key={l}
+            x={padding.left + i * groupW + groupW / 2}
+            y={height - 4}
+            textAnchor="middle"
+            className="fill-ph-mutedtext"
+            fontSize="10"
+          >
+            {l}
+          </text>
+        ))}
+      </svg>
+    </div>
+  );
+}

package/src/components/charts/quill/FunnelChart.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface FunnelStep {
+  label: string;
+  count: number;
+}
+
+export interface FunnelChartProps {
+  steps: FunnelStep[];
+  className?: string;
+}
+
+export function FunnelChart({ steps, className }: FunnelChartProps) {
+  const tokens = useChartTokens();
+
+  const maxCount = useMemo(() => Math.max(...steps.map((s) => s.count)), [steps]);
+
+  return (
+    <div className={cn("space-y-2", className)} suppressHydrationWarning>
+      {steps.map((step, i) => {
+        const pct = (step.count / maxCount) * 100;
+        const prev = i > 0 ? steps[i - 1].count : step.count;
+        const dropoff = prev > 0 ? ((prev - step.count) / prev) * 100 : 0;
+
+        return (
+          <div key={step.label} className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <span className="font-medium text-ph-ink">{step.label}</span>
+              <span className="tabular-nums text-ph-subtle">{step.count.toLocaleString()}</span>
+            </div>
+            <div className="relative h-8 overflow-hidden rounded-md" style={{ background: tokens.muted }}>
+              <div
+                className="h-full rounded-md transition-all duration-500"
+                style={{ width: `${pct}%`, background: i === 0 ? tokens.series[0] : tokens.series[i % tokens.series.length] }}
+              />
+            </div>
+            {i > 0 && dropoff > 0 && (
+              <p className="text-xs text-ph-danger">-{dropoff.toFixed(1)}% dropoff</p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/charts/quill/InsightShell.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface InsightShellProps {
+  title: string;
+  subtitle?: string;
+  ribbonColor?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function InsightShell({ title, subtitle, ribbonColor, children, className }: InsightShellProps) {
+  return (
+    <div className={cn("ph-insight-shell", className)}>
+      <div className="flex items-start gap-3 px-4 pt-4">
+        {ribbonColor && <div className="ph-insight-shell__ribbon" style={{ background: ribbonColor }} />}
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold text-ph-ink truncate">{title}</h3>
+          {subtitle && <p className="text-xs text-ph-mutedtext mt-0.5">{subtitle}</p>}
+        </div>
+      </div>
+      <div className="p-4 pt-3">{children}</div>
+    </div>
+  );
+}

package/src/components/charts/quill/MetricCard.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import { Sparkline } from "@/components/charts/quill/Sparkline";
+import { Badge } from "@/components/ui/Badge";
+
+export interface MetricCardProps {
+  value: string | number;
+  label: string;
+  change?: { value: number; positive?: boolean };
+  sparklineData?: number[];
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function MetricCard({
+  value,
+  label,
+  change,
+  sparklineData,
+  icon,
+  className,
+}: MetricCardProps) {
+  return (
+    <div className={cn("ph-metric", className)}>
+      <div className="ph-metric__header">
+        {icon && <span className="ph-metric__icon">{icon}</span>}
+        <span className="ph-metric__label">{label}</span>
+        {change && (
+          <Badge variant={change.positive ?? change.value >= 0 ? "success" : "danger"}>
+            {change.value >= 0 ? "+" : ""}{change.value}%
+          </Badge>
+        )}
+      </div>
+      <div className="ph-metric__value">{value}</div>
+      {sparklineData && sparklineData.length > 0 && (
+        <div className="mt-2">
+          <Sparkline data={sparklineData} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/charts/quill/PieChart.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface PieChartSlice {
+  key: string;
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export interface PieChartProps {
+  slices: PieChartSlice[];
+  className?: string;
+  size?: number;
+}
+
+export function PieChart({ slices, className, size = 200 }: PieChartProps) {
+  const tokens = useChartTokens();
+
+  const { total, segments } = useMemo(() => {
+    const t = slices.reduce((s, sl) => s + Math.max(0, sl.value), 0);
+    let cum = 0;
+    const segs = slices.map((sl, i) => {
+      const start = cum;
+      const val = Math.max(0, sl.value);
+      cum += val;
+      return {
+        ...sl,
+        color: sl.color ?? tokens.series[i % tokens.series.length],
+        startAngle: (start / t) * 360,
+        endAngle: (cum / t) * 360,
+        pct: t > 0 ? (val / t) * 100 : 0,
+      };
+    });
+    return { total: t, segments: segs };
+  }, [slices, tokens.series]);
+
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.38;
+  const ir = r * 0.6;
+
+  const polarToCart = (angleDeg: number, radius: number) => {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+  };
+
+  const describeArc = (start: number, end: number) => {
+    if (end - start >= 359.9) {
+      const p1 = polarToCart(start, r);
+      const p2 = polarToCart(start + 179.9, r);
+      const p3 = polarToCart(start + 359.9, r);
+      return `M${p1.x},${p1.y} A${r},${r} 0 0,1 ${p2.x},${p2.y} A${r},${r} 0 0,1 ${p3.x},${p3.y} Z`;
+    }
+    const s = polarToCart(start, r);
+    const e = polarToCart(end, r);
+    const si = polarToCart(start, ir);
+    const ei = polarToCart(end, ir);
+    const large = end - start > 180 ? 1 : 0;
+    return `M${s.x},${s.y} A${r},${r} 0 ${large},1 ${e.x},${e.y} L${ei.x},${ei.y} A${ir},${ir} 0 ${large},0 ${si.x},${si.y} Z`;
+  };
+
+  return (
+    <div className={cn("relative", className)} style={{ width: size, height: size }}>
+      <svg viewBox={`0 0 ${size} ${size}`} className="h-full w-full" suppressHydrationWarning>
+        {segments.map((s) => (
+          <path key={s.key} d={describeArc(s.startAngle, s.endAngle)} fill={s.color}>
+            <title>{`${s.label}: ${s.pct.toFixed(1)}%`}</title>
+          </path>
+        ))}
+        <circle cx={cx} cy={cy} r={ir} fill="var(--ph-surface)" />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <span className="text-lg font-bold text-ph-ink tabular-nums">{slices.length}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/charts/quill/Sparkline.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useMemo } from "react";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export interface SparklineProps {
+  data: number[];
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+}
+
+export function Sparkline({
+  data,
+  color,
+  className,
+  width = 80,
+  height = 32,
+  strokeWidth = 2,
+}: SparklineProps) {
+  const tokens = useChartTokens();
+  const resolvedColor = color ?? tokens.series[0];
+
+  const path = useMemo(() => {
+    if (data.length < 2) return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const xStep = width / (data.length - 1);
+
+    return data
+      .map((v, i) => {
+        const x = i * xStep;
+        const y = height - ((v - min) / range) * (height - 4) - 2;
+        return `${i === 0 ? "M" : "L"}${x},${y}`;
+      })
+      .join(" ");
+  }, [data, width, height]);
+
+  if (data.length < 2) return null;
+
+  return (
+    <svg
+      className={cn("shrink-0", className)}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden
+      suppressHydrationWarning
+    >
+      <path d={path} fill="none" stroke={resolvedColor} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/components/charts/quill/TimeSeriesLineChart.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useMemo } from "react";
+import { CanvasTrendLineChart } from "@/lib/hog-charts-lite/CanvasTrendLineChart";
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { buildHogChartTheme } from "@/lib/hog-charts-lite/build-theme";
+import { cn } from "@/lib/cn";
+
+export interface TimeSeriesLineChartSeries {
+  key: string;
+  label: string;
+  data: number[];
+  color?: string;
+}
+
+export interface TimeSeriesLineChartProps {
+  series: TimeSeriesLineChartSeries[];
+  labels: string[];
+  className?: string;
+  showGrid?: boolean;
+  showCrosshair?: boolean;
+  height?: number;
+}
+
+export function TimeSeriesLineChart({
+  series,
+  labels,
+  className,
+  showGrid = true,
+  showCrosshair = true,
+  height = 280,
+}: TimeSeriesLineChartProps) {
+  const tokens = useChartTokens();
+  const theme = useMemo(() => buildHogChartTheme(tokens), [tokens]);
+
+  const resolved = useMemo(
+    () =>
+      series.map((s, i) => ({
+        key: s.key,
+        label: s.label,
+        data: s.data,
+        color: s.color ?? tokens.series[i % tokens.series.length],
+      })),
+    [series, tokens.series]
+  );
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      style={{ height, minHeight: 220 }}
+    >
+      <CanvasTrendLineChart
+        labels={labels}
+        series={resolved}
+        theme={theme}
+        showGrid={showGrid}
+        showCrosshair={showCrosshair}
+        className="h-full min-h-[220px]"
+      />
+    </div>
+  );
+}

package/src/components/charts/quill/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { TimeSeriesLineChart, type TimeSeriesLineChartProps, type TimeSeriesLineChartSeries } from "./TimeSeriesLineChart";
+export { BarChart, type BarChartProps, type BarChartSeries } from "./BarChart";
+export { PieChart, type PieChartProps, type PieChartSlice } from "./PieChart";
+export { Sparkline, type SparklineProps } from "./Sparkline";
+export { MetricCard, type MetricCardProps } from "./MetricCard";
+export { FunnelChart, type FunnelChartProps, type FunnelStep } from "./FunnelChart";
+export { InsightShell, type InsightShellProps } from "./InsightShell";

package/src/components/icons/icons.tsx

@@ -5,6 +5,8 @@ import { forwardRef } from "react";
 import type { IconProps } from "@/components/icons/IconBase";
 import { createIconBase, createIconBasePath } from "@/components/icons/createIconBase";
 import { cn } from "@/lib/cn";
+import * as LemonIcons from "@/components/icons/lemon-icons";
+import * as LemonBrandIcons from "@/components/icons/lemon-brand-icons";
 
 const fill = (d: string) => <path d={d} fill="currentColor" />;
 

package/src/components/icons/index.ts

@@ -1,3 +1,6 @@
 export { IconBase, type IconProps } from "@/components/icons/IconBase";
 export { createIconBase, createIconBasePath } from "@/components/icons/createIconBase";
 export * from "@/components/icons/icons";
+export * from "@/components/icons/lemon-icons";
+export * from "@/components/icons/lemon-brand-icons";
+export * from "@/components/icons/lemon-category-icons";

package/src/components/icons/lemon-brand-icons.tsx

@@ -0,0 +1,16 @@
+import { createIconBase } from "@/components/icons/createIconBase";
+
+const p = (d: string) => <path d={d} fill="currentColor" />;
+
+export const IconGitlab = createIconBase({ paths: <><path fill="#E24329" d="M23.4841 9.51355L23.4507 9.42452L20.2169 0.621934C20.1511 0.449408 20.0346 0.303054 19.8841 0.20387C19.7336 0.106371 19.5579 0.0594128 19.3809 0.0693348C19.204 0.0792569 19.0342 0.145582 18.8945 0.259354C18.7563 0.376393 18.6561 0.534985 18.6074 0.713547L16.4239 7.68129H7.58229L5.39878 0.713547C5.35143 0.534012 5.251 0.374625 5.11178 0.258063C4.97208 0.144291 4.80228 0.0779663 4.62529 0.0680442C4.44831 0.0581222 4.27267 0.105081 4.12208 0.20258C3.97193 0.302164 3.85553 0.44839 3.7893 0.620644L0.5493 9.41935L0.517135 9.50839C0.0516127 10.777 -0.00584844 12.1692 0.353415 13.4748C0.712679 14.7805 1.46919 15.929 2.50889 16.7471L2.52002 16.7561L2.54971 16.7781L7.4759 20.6258L9.91301 22.5497L11.3975 23.7187C11.5712 23.8562 11.7832 23.9307 12.0013 23.9307C12.2193 23.9307 12.4313 23.8562 12.605 23.7187L14.0895 22.5497L16.5266 20.6258L21.4825 16.7548L21.4949 16.7445C22.5322 15.9263 23.287 14.779 23.6457 13.4751C24.0044 12.1711 23.9477 10.781 23.4841 9.51355V9.51355Z" /><path fill="#FC6D26" d="M23.4841 9.51355L23.4507 9.42451C21.875 9.76186 20.3902 10.458 19.1023 11.4632L12 17.0645C14.4186 18.9729 16.5241 20.631 16.5241 20.631L21.48 16.76L21.4924 16.7497C22.5312 15.9315 23.2871 14.7834 23.6464 13.4784C24.0056 12.1734 23.9486 10.7819 23.4841 9.51355Z" /><path fill="#FCA326" d="M7.47589 20.631L9.91301 22.5548L11.3975 23.7239C11.5712 23.8614 11.7832 23.9358 12.0013 23.9358C12.2193 23.9358 12.4313 23.8614 12.605 23.7239L14.0895 22.5548L16.5266 20.631C16.5266 20.631 14.4186 18.9677 12 17.0645C9.58146 18.9677 7.47589 20.631 7.47589 20.631Z" /><path fill="#FC6D26" d="M4.89652 11.4632C3.60966 10.4559 2.12514 9.75798 0.5493 9.41936L0.517135 9.50839C0.0516127 10.777 -0.00584844 12.1692 0.353415 13.4748C0.712679 14.7805 1.46919 15.929 2.50889 16.7471L2.52002 16.7561L2.54971 16.7781L7.4759 20.6258C7.4759 20.6258 9.57899 18.9677 12 17.0594L4.89652 11.4632Z" /></> });
+export const IconGoogle = createIconBase({ paths: <><path fill="#4285F4" d="M23.52 12.2727C23.52 11.4218 23.4436 10.6036 23.3018 9.81818H12V14.4654H18.4582C18.1745 15.96 17.3236 17.2254 16.0473 18.0764V21.0982H19.9418C22.2109 19.0036 23.52 15.9273 23.52 12.2727V12.2727Z" /><path fill="#34A853" d="M12 24C15.24 24 17.9564 22.9309 19.9418 21.0982L16.0473 18.0764C14.9782 18.7964 13.6145 19.2327 12 19.2327C8.87999 19.2327 6.22908 17.1273 5.27999 14.2909H1.28726V17.3891C3.26181 21.3055 7.30908 24 12 24Z" /><path fill="#FBBC05" d="M5.28 14.28C5.04 13.56 4.89818 12.7964 4.89818 12C4.89818 11.2036 5.04 10.44 5.28 9.72001V6.62183H1.28727C0.469091 8.23637 0 10.0582 0 12C0 13.9418 0.469091 15.7636 1.28727 17.3782L4.39636 14.9564L5.28 14.28Z" /><path fill="#EA4335" d="M12 4.77818C13.7673 4.77818 15.3382 5.38909 16.5927 6.56727L20.0291 3.13091C17.9454 1.18909 15.24 0 12 0C7.30908 0 3.26181 2.69455 1.28726 6.62182L5.27999 9.72C6.22908 6.88364 8.87999 4.77818 12 4.77818Z" /></> });
+export const IconSlack = createIconBase({ viewBox: "0 0 2447.6 2452.5", paths: <><path fill="#36c5f0" fillRule="evenodd" clipRule="evenodd" d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" /><path fill="#2eb67d" fillRule="evenodd" clipRule="evenodd" d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" /><path fill="#ecb22e" fillRule="evenodd" clipRule="evenodd" d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" /><path fill="#e01e5a" fillRule="evenodd" clipRule="evenodd" d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" /></> });
+export const IconSlackExternal = createIconBase({ viewBox: "-2 -2 24 24", paths: <><path fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth={1.5} d="M13 4.75 18.25 10 13 15.25 7.75 10 13 4.75Z" /><path fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth={1.5} d="M8.01 5.76 7 4.75 1.75 10 7 15.25l1.01-1.01-2.872-3.037a1.75 1.75 0 0 1 0-2.406L8.01 5.76Z" /></> });
+export const IconMicrosoftTeams = createIconBase({ paths: <><path fill="#5059C9" d="M19.5 4.5h-3V3a1.5 1.5 0 0 0-1.5-1.5H9A1.5 1.5 0 0 0 7.5 3v1.5h-3A1.5 1.5 0 0 0 3 6v12a1.5 1.5 0 0 0 1.5 1.5h15A1.5 1.5 0 0 0 21 18V6a1.5 1.5 0 0 0-1.5-1.5zM9 3h6v1.5H9V3zm3 15a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z" /><circle cx="12" cy="13.5" r="3" fill="#7B83EB" /></> });
+export const IconChrome = createIconBase({ paths: p("M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z") });
+export const IconFirefox = createIconBase({ paths: p("M9.27 7.94C9.27 7.94 9.27 7.94 9.27 7.94M6.85 6.74C6.86 6.74 6.86 6.74 6.85 6.74M21.28 8.6C20.85 7.55 19.96 6.42 19.27 6.06C19.83 7.17 20.16 8.28 20.29 9.1L20.29 9.12C19.16 6.3 17.24 5.16 15.67 2.68C15.59 2.56 15.5 2.43 15.43 2.3C15.39 2.23 15.36 2.16 15.32 2.09C15.26 1.96 15.2 1.83 15.17 1.69C15.17 1.68 15.16 1.67 15.15 1.67H15.13L15.12 1.67L15.12 1.67L15.12 1.67C12.9 2.97 11.97 5.26 11.74 6.71C11.05 6.75 10.37 6.92 9.75 7.22C9.63 7.27 9.58 7.41 9.62 7.53C9.67 7.67 9.83 7.74 9.96 7.68C10.5 7.42 11.1 7.27 11.7 7.23L11.75 7.23C11.83 7.22 11.92 7.22 12 7.22C12.5 7.21 12.97 7.28 13.44 7.42L13.5 7.44C13.6 7.46 13.67 7.5 13.75 7.5C13.8 7.54 13.86 7.56 13.91 7.58L14.05 7.64C14.12 7.67 14.19 7.7 14.25 7.73C14.28 7.75 14.31 7.76 14.34 7.78C14.41 7.82 14.5 7.85 14.54 7.89C14.58 7.91 14.62 7.94 14.66 7.96C15.39 8.41 16 9.03 16.41 9.77C15.88 9.4 14.92 9.03 14 9.19C17.6 11 16.63 17.19 11.64 16.95C11.2 16.94 10.76 16.85 10.34 16.7C10.24 16.67 10.14 16.63 10.05 16.58C10 16.56 9.93 16.53 9.88 16.5C8.65 15.87 7.64 14.68 7.5 13.23C7.5 13.23 8 11.5 10.83 11.5C11.14 11.5 12 10.64 12.03 10.4C12.03 10.31 10.29 9.62 9.61 8.95C9.24 8.59 9.07 8.42 8.92 8.29C8.84 8.22 8.75 8.16 8.66 8.1C8.43 7.3 8.42 6.45 8.63 5.65C7.6 6.12 6.8 6.86 6.22 7.5H6.22C5.82 7 5.85 5.35 5.87 5C5.86 5 5.57 5.16 5.54 5.18C5.19 5.43 4.86 5.71 4.56 6C4.21 6.37 3.9 6.74 3.62 7.14C3 8.05 2.5 9.09 2.28 10.18C2.28 10.19 2.18 10.59 2.11 11.1L2.08 11.33C2.06 11.5 2.04 11.65 2 11.91L2 11.94L2 12.27L2 12.32C2 17.85 6.5 22.33 12 22.33C16.97 22.33 21.08 18.74 21.88 14C21.9 13.89 21.91 13.76 21.93 13.63C22.13 11.91 21.91 10.11 21.28 8.6Z") });
+export const IconSafari = createIconBase({ paths: p("M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,14.09 4.8,16 6.11,17.41L9.88,9.88L17.41,6.11C16,4.8 14.09,4 12,4M12,20A8,8 0 0,0 20,12C20,9.91 19.2,8 17.89,6.59L14.12,14.12L6.59,17.89C8,19.2 9.91,20 12,20M12,12L11.23,11.23L9.7,14.3L12.77,12.77L12,12M12,17.5H13V19H12V17.5M15.88,15.89L16.59,15.18L17.65,16.24L16.94,16.95L15.88,15.89M17.5,12V11H19V12H17.5M12,6.5H11V5H12V6.5M8.12,8.11L7.41,8.82L6.35,7.76L7.06,7.05L8.12,8.11M6.5,12V13H5V12H6.5Z") });
+export const IconFacebook = createIconBase({ viewBox: "0 0 24 24", paths: p("M17 3.5a.5.5 0 00-.5-.5H14a4.77 4.77 0 00-5 4.5v2.7H6.5a.5.5 0 00-.5.5v2.6a.5.5 0 00.5.5H9v6.7a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-6.7h2.62a.5.5 0 00.49-.37l.72-2.6a.5.5 0 00-.48-.63H13V7.5a1 1 0 011-.9h2.5a.5.5 0 00.5-.5V3.5z") });
+export const Icon123 = createIconBase({ paths: p("M7,15H5.5v-4.5H4V9h3V15z M13.5,13.5h-3v-1h2c0.55,0,1-0.45,1-1V10c0-0.55-0.45-1-1-1H9v1.5h3v1h-2c-0.55,0-1,0.45-1,1V15 h4.5V13.5z M19.5,14v-4c0-0.55-0.45-1-1-1H15v1.5h3v1h-2v1h2v1h-3V15h3.5C19.05,15,19.5,14.55,19.5,14z") });
+export const IconNodeJS = createIconBase({ viewBox: "0 0 256 282", paths: <><path fill="currentColor" d="M116.504 3.58c6.962-3.985 16.03-4.003 22.986 0 34.995 19.774 70.001 39.517 104.99 59.303 6.581 3.707 10.983 11.031 10.916 18.614v118.968c.049 7.897-4.788 15.396-11.731 19.019-34.88 19.665-69.742 39.354-104.616 59.019-7.106 4.063-16.356 3.75-23.24-.646-10.457-6.062-20.932-12.094-31.39-18.15-2.137-1.274-4.546-2.288-6.055-4.36 1.334-1.798 3.719-2.022 5.657-2.807 4.365-1.388 8.374-3.616 12.384-5.778 1.014-.694 2.252-.428 3.224.193 8.942 5.127 17.805 10.403 26.777 15.481 1.914 1.105 3.852-.362 5.488-1.274 34.228-19.345 68.498-38.617 102.72-57.968 1.268-.61 1.969-1.956 1.866-3.345.024-39.245.006-78.497.012-117.742.145-1.576-.767-3.025-2.192-3.67-34.759-19.575-69.5-39.18-104.253-58.76a3.621 3.621 0 0 0-4.094-.006C91.2 39.257 56.465 58.88 21.712 78.454c-1.42.646-2.373 2.071-2.204 3.653.006 39.245 0 78.497 0 117.748a3.329 3.329 0 0 0 1.89 3.303c9.274 5.259 18.56 10.481 27.84 15.722 5.228 2.814 11.647 4.486 17.407 2.33 5.083-1.823 8.646-7.01 8.549-12.407.048-39.016-.024-78.038.036-117.048-.127-1.732 1.516-3.163 3.2-3 4.456-.03 8.918-.06 13.374.012 1.86-.042 3.14 1.823 2.91 3.568-.018 39.263.048 78.527-.03 117.79.012 10.464-4.287 21.85-13.966 26.97-11.924 6.177-26.662 4.867-38.442-1.056-10.198-5.09-19.93-11.097-29.947-16.55C5.368 215.886.555 208.357.604 200.466V81.497c-.073-7.74 4.504-15.197 11.29-18.85C46.768 42.966 81.636 23.27 116.504 3.58z" /><path fill="currentColor" d="M146.928 85.99c15.21-.979 31.493-.58 45.18 6.913 10.597 5.742 16.472 17.793 16.659 29.566-.296 1.588-1.956 2.464-3.472 2.355-4.413-.006-8.827.06-13.24-.03-1.872.072-2.96-1.654-3.195-3.309-1.268-5.633-4.34-11.212-9.642-13.929-8.139-4.075-17.576-3.87-26.451-3.785-6.479.344-13.446.905-18.935 4.715-4.214 2.886-5.494 8.712-3.99 13.404 1.418 3.369 5.307 4.456 8.489 5.458 18.33 4.794 37.754 4.317 55.734 10.626 7.444 2.572 14.726 7.572 17.274 15.366 3.333 10.446 1.872 22.932-5.56 31.318-6.027 6.901-14.805 10.657-23.56 12.697-11.647 2.597-23.734 2.663-35.562 1.51-11.122-1.268-22.696-4.19-31.282-11.768-7.342-6.375-10.928-16.308-10.572-25.895.085-1.619 1.697-2.748 3.248-2.615 4.444-.036 8.888-.048 13.332.006 1.775-.127 3.091 1.407 3.182 3.08.82 5.367 2.837 11 7.517 14.182 9.032 5.827 20.365 5.428 30.707 5.591 8.568-.38 18.186-.495 25.178-6.158 3.689-3.23 4.782-8.634 3.785-13.283-1.08-3.925-5.186-5.754-8.712-6.95-18.095-5.724-37.736-3.647-55.656-10.12-7.275-2.571-14.31-7.432-17.105-14.906-3.9-10.578-2.113-23.662 6.098-31.765 8.006-8.06 19.563-11.164 30.551-12.275z" /></> });
+export const IconStamphog = createIconBase({ paths: <><path fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" d="M13.5 7.7 V7.5 A2.5 2.5 0 0 0 11 5 H5.5 A2.5 2.5 0 0 0 3 7.5 V11.5 A2.5 2.5 0 0 0 5.5 14 H8.39" /><path fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" d="M8.25 5V3.6" /><path fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" d="M6.1 8.4v1.5" /><path fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" d="M9.9 8.4v1.5" /><circle cx="8.25" cy="2.55" r="1.05" fill="currentColor" /><path fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" d="M13 14.9l1.9 1.9 3.6-4.2" /></> });

package/src/components/icons/lemon-category-icons.tsx

@@ -0,0 +1,72 @@
+import { createIconBase } from "@/components/icons/createIconBase";
+
+const p = (d: string) => <path d={d} fill="currentColor" />;
+
+export const IconPalette = createIconBase({ paths: p("M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10c1.38,0,2.5-1.12,2.5-2.5c0-0.61-0.23-1.2-0.64-1.67c-0.08-0.1-0.13-0.21-0.13-0.33c0-0.28,0.22-0.5,0.5-0.5H16c3.31,0,6-2.69,6-6C22,6.04,17.51,2,12,2z M17.5,9.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5S19,7.17,19,8S18.33,9.5,17.5,9.5z M14.5,7.5C13.67,7.5,13,6.83,13,6s0.67-1.5,1.5-1.5S16,5.17,16,6S15.33,7.5,14.5,7.5z M9.5,7.5C8.67,7.5,8,6.83,8,6s0.67-1.5,1.5-1.5S11,5.17,11,6S10.33,7.5,9.5,7.5z M6.5,9.5C5.67,9.5,5,8.83,5,8s0.67-1.5,1.5-1.5S8,7.17,8,8S7.33,9.5,6.5,9.5z") });
+export const IconMegaphone = createIconBase({ paths: p("M20,2V4L4,8V6H2V18H4V16L6.56,16.44C6.19,16.83,6,17.38,6,18C6,19.66,7.34,21,9,21C10.28,21,11.37,20.21,11.8,19H13V16H11.8C11.37,14.79,10.28,14,9,14C8.39,14,7.84,14.19,7.44,14.56L4,13.47V11.18L20,6.18V2M9,16C9.55,16,10,16.45,10,17C10,17.55,9.55,18,9,18C8.45,18,8,17.55,8,17C8,16.45,8.45,16,9,16M20,4.18L4,9.18V11.18L20,6.18V4.18Z") });
+export const IconMap = createIconBase({ paths: p("M15,19L9,16.89L5,18.05V5.38L10.12,4.12L15,7.44L20.12,6.12V17.45L15,19M10.12,5.38V15.12L15,17.46V7.44L10.12,5.38Z") });
+export const IconMapPin = createIconBase({ paths: p("M12,2C8.13,2,5,5.13,5,9c0,5.25,7,13,7,13s7-7.75,7-13C19,5.13,15.87,2,12,2z M12,11.5c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5S13.38,11.5,12,11.5z") });
+export const IconCoffee = createIconBase({ paths: p("M2,21V19H20V21H2M20,8V5H18V8H20M20,3C21.1,3,22,3.9,22,5V8C22,9.1,21.1,10,20,10H18V13C18,15.21,16.21,17,14,17H8C5.79,17,4,15.21,4,13V3H20M16,5H6V8H16V5Z") });
+export const IconBook = createIconBase({ paths: p("M18,2H6C4.9,2,4,2.9,4,4V20c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M6,4h5v8l-2.5-1.5L6,12V4z") });
+export const IconCalendar = createIconBase({ paths: p("M9,10H7v2h2V10z M13,10h-2v2h2V10z M17,10h-2v2h2V10z M19,3h-1V1h-2v2H8V1H6v2H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V8h14V19z") });
+export const IconClock = createIconBase({ paths: p("M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M12,20c-4.42,0-8-3.58-8-8s3.58-8,8-8s8,3.58,8,8S16.42,20,12,20z M12.5,7H11v6l5.25,3.15l0.75-1.23l-4.5-2.67V7z") });
+export const IconGlobe = createIconBase({ paths: p("M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M11,19.93c-3.95-0.49-7-3.85-7-7.93c0-0.62,0.08-1.21,0.21-1.79L9,15v1c0,1.1,0.9,2,2,2V19.93z M17.9,17.39c-0.26-0.81-1-1.39-1.9-1.39h-1v-3c0-0.55-0.45-1-1-1H8v-2h2c0.55,0,1-0.45,1-1V7h2c1.1,0,2-0.9,2-2v-0.41C17.92,5.77,20,8.65,20,12C20,14.08,19.2,15.97,17.9,17.39z") });
+export const IconCloud = createIconBase({ paths: p("M19.35,10.04C18.67,6.59,15.64,4,12,4C9.11,4,6.6,5.64,5.35,8.04C2.34,8.36,0,10.91,0,14c0,3.31,2.69,6,6,6h13c2.76,0,5-2.24,5-5C24,12.36,21.95,10.29,19.35,10.04z") });
+export const IconBug = createIconBase({ paths: p("M20,8h-2.81c-0.45-0.78-1.07-1.45-1.82-1.96L17,4.41L15.59,3l-2.17,2.17C12.96,5.06,12.49,5,12,5S11.04,5.06,10.59,5.17L8.41,3L7,4.41l1.62,1.63C7.88,6.55,7.26,7.22,6.81,8H4v2h2.09c-0.05,0.33-0.09,0.66-0.09,1v1H4v2h2v1c0,0.34,0.04,0.67,0.09,1H4v2h2.81C7.85,19.79,9.78,21,12,21s4.15-1.21,5.19-3H20v-2h-2.09c0.05-0.33,0.09-0.66,0.09-1v-1h2v-2h-2v-1c0-0.34-0.04-0.67-0.09-1H20V8z M14,16h-4v-2h4V16z M14,12h-4v-2h4V12z") });
+export const IconCrown = createIconBase({ paths: p("M12,2L15,7H9L12,2z M17,7L14,2l3,5z M7,7L10,2L7,7z M5,20l2-8h10l2,8H5z") });
+export const IconConfetti = createIconBase({ paths: p("M14.5,2C13.67,2,13,2.67,13,3.5S13.67,5,14.5,5S16,4.33,16,3.5S15.33,2,14.5,2z M6.5,5C5.67,5,5,5.67,5,6.5S5.67,8,6.5,8S8,7.33,8,6.5S7.33,5,6.5,5z M3,12c0-0.83,0.67-1.5,1.5-1.5S6,11.17,6,12c0,0.83-0.67,1.5-1.5,1.5S3,12.83,3,12z M9.5,8C8.67,8,8,8.67,8,9.5S8.67,11,9.5,11S11,10.33,11,9.5S10.33,8,9.5,8z M7,15c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S8.66,15,7,15z M18,13c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S19.66,13,18,13z M15,7c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S16.66,7,15,7z") });
+export const IconLightBulb = createIconBase({ paths: p("M9,21c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1v-1H9V21z M12,2C8.14,2,5,5.14,5,9c0,2.38,1.19,4.47,3,5.74V17c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1v-2.26c1.81-1.27,3-3.36,3-5.74C19,5.14,15.86,2,12,2z M14,14h-4v-2h4V14z") });
+export const IconHourglass = createIconBase({ paths: p("M6,2H18V6H6V2z M6,18H18v4H6V18z M16.5,12c0-1.47-0.91-2.84-2.3-3.5L14,8.5V6h-4v2.5l-0.2,0.1C7.91,9.16,7,10.53,7,12s0.91,2.84,2.3,3.5L10,15.5V18h4v-2.5l0.2-0.1C15.59,14.84,16.5,13.47,16.5,12z") });
+export const IconStore = createIconBase({ paths: p("M20,4H4V2H20V4z M21,9H3l-1,4h0.44l1.22,5H19.34l1.22-5H22L21,9z M6,16c-1.1,0-2-0.9-2-2h4C8,15.1,7.1,16,6,16z M18,16c-1.1,0-2-0.9-2-2h4C20,15.1,19.1,16,18,16z") });
+export const IconCart = createIconBase({ paths: p("M7,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S8.1,18,7,18z M1,2v2h2l3.6,7.59L5.25,14H19v-2H7.42l0.94-2H17l3-6H5.21L4.27,2H1z M17,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S18.1,18,17,18z") });
+export const IconEye = createIconBase({ paths: p("M12,4.5C7,4.5,2.73,7.61,1,12c1.73,4.39,6,7.5,11,7.5s9.27-3.11,11-7.5C21.27,7.61,17,4.5,12,4.5z M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5s5,2.24,5,5S14.76,17,12,17z M12,9c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S13.66,9,12,9z") });
+export const IconPeople = createIconBase({ paths: p("M16,11c1.66,0,2.99-1.34,2.99-3S17.66,5,16,5c-1.66,0-3,1.34-3,3S14.34,11,16,11z M8,11c1.66,0,2.99-1.34,2.99-3S9.66,5,8,5C6.34,5,5,6.34,5,8S6.34,11,8,11z M8,13c-2.33,0-7,1.17-7,3.5V19h14v-2.5C15,14.17,10.33,13,8,13z M16,13c-0.29,0-0.62,0.02-0.97,0.05c1.16,0.84,1.97,1.97,1.97,3.45V19h6v-2.5C23,14.17,18.33,13,16,13z") });
+export const IconGroups = createIconBase({ paths: p("M12,12.75c1.63,0,3.07,0.39,4.24,0.9c1.08,0.48,1.76,1.56,1.76,2.73V18H6v-1.61c0-1.18,0.68-2.26,1.76-2.73C8.93,13.14,10.37,12.75,12,12.75z M4,13c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18h4.5v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18H24V16.43z M12,6c1.66,0,3,1.34,3,3s-1.34,3-3,3s-3-1.34-3-3S10.34,6,12,6z") });
+export const IconDocument = createIconBase({ paths: p("M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M6,20V4h7v5h5v11H6z") });
+export const IconAI = createIconBase({ paths: p("M21 11c0 4.97-4.03 9-9 9s-9-4.03-9-9s4.03-9 9-9s9 4.03 9 9z M12 7v4l3 2M9 13h6M9 16h6M12 4v2M12 18v2M6.5 6.5l1 1M16.5 16.5l1 1M4 12h2M18 12h2M6.5 17.5l1-1M16.5 7.5l1-1") });
+export const IconArchive = createIconBase({ paths: p("M21,3H3v6h1.73L5,20h14l1.27-11H21V3z M19,4v2H5V4H19z M17.17,10l-0.91,8H7.74l-0.91-8H17.17z M10,12h4v2h-4V12z") });
+export const IconAtSign = createIconBase({ paths: p("M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10h5v-2h-5c-4.34,0-8-3.66-8-8s3.66-8,8-8s8,3.66,8,8v1.43c0,0.79-0.71,1.57-1.5,1.57s-1.5-0.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5,2.24-5,5s2.24,5,5,5c1.38,0,2.64-0.56,3.54-1.47c0.65,0.89,1.77,1.47,2.96,1.47c1.97,0,3.5-1.6,3.5-3.57V12C22,6.48,17.52,2,12,2z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3s3,1.34,3,3S13.66,15,12,15z") });
+export const IconBadge = createIconBase({ paths: p("M12,2L15,7H9L12,2z M17,7L14,2l3,5z M7,7L10,2L7,7z M5,20l2-8h10l2,8H5z") });
+export const IconBinary = createIconBase({ paths: p("M8,4h4v16H8V4z M12,4h1v16h-1V4z M3,8h1v12H3V8z M20,8h1v12h-1V8z M6,4h2v2H6V4z M16,4h2v2h-2V4z M4,4h2v2H4V4z M18,4h2v2h-2V4z") });
+export const IconGear = createIconBase({ paths: p("M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z") });
+export const IconCalendarDay = createIconBase({ paths: p("M19,3h-1V1h-2v2H8V1H6v2H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V8h14V19z M7,10h5v5H7V10z") });
+export const IconChat = createIconBase({ paths: p("M20,2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M6,9h12v2H6V9z M10,13h8v2h-8V13z M6,5h12v2H6V5z") });
+export const IconCheckboxChecked = createIconBase({ paths: p("M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z M17.99,9l-1.41-1.42L10,14.17l-2.59-2.58L6,13l4,4L17.99,9z") });
+export const IconDownloadCloud = createIconBase({ paths: p("M19.35,10.04C18.67,6.59,15.64,4,12,4C9.11,4,6.6,5.64,5.35,8.04C2.34,8.36,0,10.91,0,14c0,3.31,2.69,6,6,6h13c2.76,0,5-2.24,5-5C24,12.36,21.95,10.29,19.35,10.04z M17,13l-5,5l-5-5h3V9h4v4H17z") });
+export const IconExternalLink = createIconBase({ paths: p("M19,19H5V5h7V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7h-2V19z M14,3v2h3.59l-9.83,9.83l1.41,1.41L19,6.41V10h2V3H14z") });
+export const IconFile = createIconBase({ paths: p("M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M6,20V4h7v5h5v11H6z") });
+export const IconFilter = createIconBase({ paths: p("M10,18h4v-2h-4V18z M3,6v2h18V6H3z M6,13h12v-2H6V13z") });
+export const IconFolder = createIconBase({ paths: p("M10,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z") });
+export const IconForward = createIconBase({ paths: p("M12,8V4l8,8l-8,8v-4H4V8H12z") });
+export const IconHash = createIconBase({ paths: p("M19.21,12.26l-0.45,1.74h-4.47l-0.89,3.74H11.9l0.89-3.74H8.21L7.32,17.74H5.42l0.89-3.74H2v-1.74h4.76L7.65,10.5H3.5V8.76h4.59l0.89-3.74h1.91L10,8.76h4.47l0.89-3.74h1.91L16.38,8.76H20v1.74h-4.06l-0.45,1.76H20v1.74H19.21z M15.09,10.5l-0.45,1.74h-4.47l0.45-1.74H15.09z") });
+export const IconHeadphones = createIconBase({ paths: p("M12,2C7.03,2,3,6.03,3,11v4c0,1.1,0.9,2,2,2h2v-6H5v-1c0-3.87,3.13-7,7-7s7,3.13,7,7v1h-2v6h2c1.1,0,2-0.9,2-2v-4C21,6.03,16.97,2,12,2z") });
+export const IconHeart = createIconBase({ paths: p("M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z") });
+export const IconHomeFilled = createIconBase({ paths: p("M10,20v-6h4v6h5v-8h3L12,3L2,12h3v8H10z") });
+export const IconImage = createIconBase({ paths: p("M21,19V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14C20.1,21,21,20.1,21,19z M8.5,13.5l2.5,3.01L14.5,12l4.5,6H5L8.5,13.5z") });
+export const IconInbox = createIconBase({ paths: p("M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,15h-4c0,1.66-1.34,3-3,3s-3-1.34-3-3H5V5h14V15z") });
+export const IconInfoFilled = createIconBase({ paths: p("M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z") });
+export const IconKeyFilled = createIconBase({ paths: p("M12.65,10C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H17v4h4v-4h2v-4H12.65z M7,14c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.1,14,7,14z") });
+export const IconLaptop = createIconBase({ paths: p("M20,18c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2H4C2.9,4,2,4.9,2,6v10c0,1.1,0.9,2,2,2H0v2h24v-2H20z M4,6h16v10H4V6z") });
+export const IconLayout = createIconBase({ paths: p("M21,3H3C1.9,3,1,3.9,1,5v14c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V5C23,3.9,22.1,3,21,3z M8,5v14H3V5H8z M10,5h11v14H10V5z") });
+export const IconLifeBuoy = createIconBase({ paths: p("M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3s3,1.34,3,3S13.66,15,12,15z M19.93,11h-2.14c-0.16-1.06-0.6-2.02-1.24-2.82l1.52-1.52C18.69,7.94,19.65,9.38,19.93,11z M7.45,8.18l1.52,1.52C8.34,10.49,7.9,11.45,7.74,12.5H5.57C5.86,10.84,6.5,9.41,7.45,8.18z M5.07,13h2.14c0.16,1.06,0.6,2.02,1.24,2.82l-1.52,1.52C5.31,16.06,4.35,14.62,4.07,13z M16.55,17.82l-1.52-1.52c0.64-0.8,1.08-1.76,1.24-2.82h2.14C18.14,15.16,17.5,16.59,16.55,17.82z") });
+export const IconLinkBreak = createIconBase({ paths: p("M17,7h-4v2h4c1.65,0,3,1.35,3,3s-1.35,3-3,3h-4v2h4c2.76,0,5-2.24,5-5S19.76,7,17,7z M11,15H7c-1.65,0-3-1.35-3-3s1.35-3,3-3h4V7H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h4V15z M14,11H6v2h8V11z") });
+export const IconLocation = createIconBase({ paths: p("M12,2C8.13,2,5,5.13,5,9c0,5.25,7,13,7,13s7-7.75,7-13C19,5.13,15.87,2,12,2z M12,11.5c-1.38,0-2.5-1.12-2.5-2.5s1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5S13.38,11.5,12,11.5z") });
+export const IconLock = createIconBase({ paths: p("M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.71,1.39-3.1,3.1-3.1s3.1,1.39,3.1,3.1V8z") });
+export const IconMaximize = createIconBase({ paths: p("M3,3h8v2H5v6H3V3z M13,3h8v8h-2V5h-6V3z M3,13h2v6h6v2H3V13z M19,13v6h-6v2h8v-8H19z") });
+export const IconMic = createIconBase({ paths: p("M12,14c1.66,0,3-1.34,3-3V5c0-1.66-1.34-3-3-3S9,3.34,9,5v6C9,12.66,10.34,14,12,14z M17,11c0,2.76-2.24,5-5,5s-5-2.24-5-5H5c0,3.53,2.61,6.43,6,6.92V21h2v-3.08c3.39-0.49,6-3.39,6-6.92H17z") });
+export const IconMinimize = createIconBase({ paths: p("M6,19h5v-2H7v-4H5v5C5,18.1,5.9,19,6,19z M19,5h-5v2h4v4h2V6C20,5.9,19.1,5,19,5z M5,10h2v4h4v2H5V10z M13,13h2v-4h4V7h-6V13z") });
+export const IconMinus = createIconBase({ paths: p("M19,13H5v-2h14V13z") });
+export const IconMoonFilled = createIconBase({ paths: p("M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3z") });
+export const IconMoreHorizontal = createIconBase({ paths: p("M6,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S7.1,10,6,10z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M18,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.1,10,18,10z") });
+export const IconMoreVertical = createIconBase({ paths: p("M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z") });
+export const IconMusic = createIconBase({ paths: p("M12,3v10.55c-0.59-0.34-1.27-0.55-2-0.55C7.79,13,6,14.79,6,17s1.79,4,4,4s4-1.79,4-4V7h4V3H12z") });
+export const IconNavigation = createIconBase({ paths: p("M12,2L4.5,20.29l0.71,0.71L12,18l6.79,3l0.71-0.71L12,2z") });
+export const IconPaperclip = createIconBase({ paths: p("M16.5,6v11.5c0,2.21-1.79,4-4,4s-4-1.79-4-4V5c0-1.38,1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5v10.5c0,0.55-0.45,1-1,1s-1-0.45-1-1V6H10v9.5c0,1.38,1.12,2.5,2.5,2.5s2.5-1.12,2.5-2.5V5c0-2.21-1.79-4-4-4S7,2.79,7,5v12.5c0,3.04,2.46,5.5,5.5,5.5s5.5-2.46,5.5-5.5V6H16.5z") });
+export const IconPercent = createIconBase({ paths: p("M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M7.5,9C6.67,9,6,8.33,6,7.5S6.67,6,7.5,6S9,6.67,9,7.5S8.33,9,7.5,9z M6,16.5l9-9l1.5,1.5l-9,9L6,16.5z M16.5,18c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S17.33,18,16.5,18z") });
+export const IconPhone = createIconBase({ paths: p("M6.62,10.79c1.44,2.83,3.76,5.14,6.59,6.59l2.2-2.2c0.27-0.27,0.67-0.36,1.02-0.24c1.12,0.37,2.33,0.57,3.57,0.57c0.55,0,1,0.45,1,1V20c0,0.55-0.45,1-1,1c-9.39,0-17-7.61-17-17c0-0.55,0.45-1,1-1h3.5c0.55,0,1,0.45,1,1c0,1.25,0.2,2.45,0.57,3.57C5.1,9.04,5.01,9.44,4.74,9.71L6.62,10.79z") });
+export const IconPin = createIconBase({ paths: p("M16,9V4l1-1V2H7v1l1,1v5c-2.21,1.58-3,4.06-3,7h5v7l1,1l1-1v-7h5C16,13.06,15.21,11.58,14,9z") });
+export const IconPrinter = createIconBase({ paths: p("M19,8H5c-1.66,0-3,1.34-3,3v6h4v4h12v-4h4v-6C22,9.34,20.66,8,19,8z M16,19H8v-5h8V19z M19,12c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S19.55,12,19,12z M18,3H6v4h12V3z") });
+export const IconRedo = createIconBase({ paths: p("M18.4,10.6C16.55,8.99,14.15,8,11.5,8c-4.65,0-8.58,3.03-9.96,7.22L3.9,16c1.05-3.19,4.05-5.5,7.6-5.5c1.95,0,3.73,0.72,5.12,1.88L13,16h9V7L18.4,10.6z") });
+export const IconRefresh = createIconBase({ paths: p("M17.65,6.35C16.2,4.9,14.21,4,12,4c-4.42,0-7.99,3.58-7.99,8s3.57,8,7.99,8c3.73,0,6.84-2.55,7.73-6h-2.08C16.92,17.28,14.67,19,12,19c-3.86,0-7-3.14-7-7s3.14-7,7-7c1.93,0,3.68,0.79,4.95,2.05L14,10h7V3L17.65,6.35z") });
+export const IconReply = createIconBase({ paths: p("M10,9V5l-7,7l7,7v-4.1c5,0,8.5,1.6,11,5.1c-1-5-4-10-11-11z") });
+export const IconReport = createIconBase({ paths: p("M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9,17H7v-7h2V17z M13,17h-2V7h2V17z M17,17h-2v-4h2V17z") });