@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-illustrated-empty-state/ErrorStateIllustratedEmptyState.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Illustrated Empty State.
+ *
+ * An in-product empty state: the "Illustration 404" artwork over a heading,
+ * a line of help and two small buttons, centred in a pane of fixed height.
+ * The artwork is one inline SVG painted entirely with theme tokens (`muted`,
+ * `border`, `muted-foreground`, `foreground`, `destructive`, as Figma binds
+ * them), so it follows light and dark. It is artwork, not a directional
+ * glyph, so it is never mirrored.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Direction is the page's `dir`; every
+ * side is a logical one, so the buttons swap ends in Arabic on their own.
+ */
+
+export interface ErrorStateIllustratedEmptyStateAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateIllustratedEmptyStateCopy {
+  /** The pane's heading, an `h1`. Name what is missing. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, a link. */
+  primaryAction: ErrorStateIllustratedEmptyStateAction
+  /** The outline button's label. It calls `onBack`, or goes back in history. Hidden when empty. */
+  backLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateIllustratedEmptyStateCopy> = {
+  en: {
+    heading: "There is no report at this address",
+    description: "The report may have been deleted or moved. Check the link, or try searching from the Reports page.",
+    primaryAction: { label: "Go to Reports", href: "/reports" },
+    backLabel: "Back",
+  },
+  ar: {
+    heading: "لا يوجد تقرير على هذا العنوان",
+    description: "ربما تم حذف التقرير أو نقله. تحقق من الرابط، أو جرّب البحث من صفحة التقارير.",
+    primaryAction: { label: "الذهاب إلى التقارير", href: "/reports" },
+    backLabel: "رجوع",
+  },
+}
+
+export interface ErrorStateIllustratedEmptyStateProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateIllustratedEmptyStateCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * Called by the back button.
+   * @default goes back one page in the browser's history
+   */
+  onBack?: () => void
+  /**
+   * Shows the artwork. Off, the copy and buttons stay centred in the pane.
+   * @default true
+   */
+  showIllustration?: boolean
+}
+
+/**
+ * Figma's "Illustration 404", 336 × 223. Every shape takes its colour from a
+ * theme token through a `fill-*` class, in Figma's paint order. Decorative:
+ * the heading says what the picture shows.
+ */
+function Illustration404({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 336 223.112"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <g className="fill-muted">
+        <path d="M170.215 62.708C167.219 57.7529 163.669 52.4624 158.109 50.8445C151.671 48.9708 145.057 52.6929 139.446 56.366C122.669 67.3507 106.512 79.2551 91.049 92.0246L91.066 92.217C103.104 91.3868 115.143 90.5566 127.181 89.7264C135.879 89.1266 144.875 88.4441 152.561 84.3295C155.478 82.7682 158.321 80.6826 161.626 80.5373C165.733 80.3567 169.313 83.2246 172.127 86.2208C188.771 103.944 193.587 131.048 212.26 146.62C200.486 117.581 186.426 89.5229 170.215 62.708Z" />
+      </g>
+      <g className="fill-border">
+        <path d="M272.523 213.037C270.683 210.712 269.931 210.168 268.115 207.822C253.332 188.703 239.437 168.938 226.431 148.527C217.596 134.664 209.2 120.536 201.242 106.141C197.453 99.2972 193.768 92.4 190.187 85.4491C187.408 80.0595 184.691 74.6377 182.036 69.1837C181.277 67.6259 180.539 66.061 179.805 64.4925C178.075 60.8039 176.378 57.0975 174.555 53.4591C172.478 49.3122 169.95 44.9647 166.136 42.1786C164.4 40.8587 162.325 40.06 160.152 39.876C157.047 39.6755 154.182 40.9575 151.489 42.3577C131.786 52.6319 113.34 65.5131 96.6555 80.1706C79.9284 94.8609 64.9771 111.458 52.1065 129.622C51.7127 130.184 50.7815 129.647 51.179 129.081C52.744 126.868 54.34 124.679 55.967 122.513C76.1976 95.6073 101.003 72.4693 129.251 54.1574C134.003 51.0777 138.844 48.1424 143.776 45.3515C146.261 43.9441 148.757 42.5546 151.296 41.2511C153.785 39.9727 156.428 38.8231 159.271 38.7802C168.947 38.6298 173.957 49.5879 177.399 56.9614C178.48 59.282 179.575 61.5954 180.682 63.9016C184.869 72.6574 189.216 81.3332 193.725 89.929C196.507 95.2362 199.351 100.512 202.255 105.758C211.294 122.091 220.9 138.094 231.076 153.766C244.555 174.525 257.927 192.864 273.283 212.277C273.705 212.815 272.95 213.581 272.523 213.037Z" />
+        <path d="M95.6992 74.7595C95.137 74.1328 94.5784 73.5061 94.0125 72.8794C89.5505 67.9447 84.7627 63.0672 78.6353 60.2381C75.7137 58.8466 72.5244 58.1073 69.2886 58.0716C65.9439 58.0823 62.6744 58.9597 59.5839 60.188C58.1228 60.7717 56.6939 61.4342 55.2866 62.1397C53.6786 62.949 52.0993 63.8121 50.5273 64.6823C47.5764 66.3153 44.6638 68.0199 41.7895 69.7961C36.0704 73.3306 30.5304 77.135 25.1695 81.2091C22.3905 83.3219 19.6688 85.504 17.0045 87.7553C14.5264 89.8467 12.0984 91.9941 9.72059 94.1977C9.2121 94.6668 8.45286 93.9077 8.96135 93.4385C9.58804 92.8548 10.2219 92.2747 10.8558 91.7017C12.6463 90.083 14.4655 88.4954 16.3135 86.9388C19.6831 84.0954 23.1401 81.3619 26.6843 78.7381C32.1957 74.6556 37.8968 70.8501 43.7876 67.3216C46.7313 65.5597 49.7156 63.8718 52.7403 62.2579C53.6536 61.7708 54.5776 61.2946 55.5122 60.8433C57.6329 59.7736 59.8365 58.8766 62.1014 58.1611C65.3097 57.1232 68.7043 56.7897 72.0533 57.1835C75.2868 57.6538 78.4023 58.7316 81.2353 60.3599C87.2514 63.7226 91.9175 68.9223 96.4584 73.9967C96.9169 74.5124 96.1612 75.2752 95.6992 74.7595Z" />
+        <path d="M218.969 125.897L233.385 120.624L240.543 118.006C242.874 117.153 245.2 116.183 247.61 115.572C249.704 114.974 251.928 115.002 254.006 115.654C255.859 116.34 257.556 117.391 258.995 118.746C260.465 120.1 261.832 121.56 263.087 123.116C264.645 124.989 266.18 126.881 267.723 128.767C274.088 136.552 280.411 144.37 286.693 152.222C292.975 160.074 299.215 167.959 305.413 175.877C311.625 183.815 317.796 191.786 323.923 199.79C324.674 200.771 325.424 201.752 326.173 202.734C326.587 203.276 327.521 202.741 327.101 202.191C320.928 194.107 314.712 186.055 308.454 178.036C302.18 169.999 295.862 161.995 289.501 154.026C283.141 146.056 276.737 138.121 270.29 130.221C268.684 128.253 267.075 126.287 265.464 124.323C264.105 122.666 262.761 120.992 261.27 119.45C258.534 116.62 255.115 114.119 251.022 114.051C248.616 114.011 246.287 114.774 244.051 115.583C241.641 116.455 239.237 117.343 236.83 118.224L222.313 123.533L218.684 124.861C218.039 125.096 218.318 126.135 218.969 125.897Z" />
+      </g>
+      <g className="fill-muted">
+        <path d="M76.7381 66.4476C69.4121 62.6823 60.03 63.4198 53.2979 68.1239C66.1389 70.3393 78.8395 73.3035 91.3345 77.0014C86.1458 73.9607 82.087 69.1966 76.7381 66.4476Z" />
+        <path d="M53.2258 68.1109L51.8154 69.2573C52.2925 68.856 52.7884 68.4799 53.2979 68.1239C53.2738 68.1197 53.2498 68.115 53.2258 68.1109Z" />
+        <path d="M258.452 125.949C257.033 124.222 255.499 122.413 253.376 121.712L251.394 121.79C266.48 148.446 286.854 171.739 311.266 190.238C293.661 168.808 276.057 147.379 258.452 125.949Z" />
+        <path d="M135.219 111.699C136.136 115.031 138.202 117.931 141.052 119.886C142.154 120.637 143.457 121.356 143.834 122.634C144.032 123.449 143.91 124.309 143.493 125.037C143.076 125.755 142.569 126.417 141.984 127.006L141.931 127.206C139.197 125.586 136.596 123.537 135.086 120.741C133.576 117.945 133.365 114.28 135.219 111.699Z" />
+        <path d="M226.238 190.999C227.155 194.331 229.221 197.231 232.07 199.186C233.172 199.936 234.476 200.656 234.852 201.934C235.051 202.749 234.929 203.609 234.511 204.336C234.095 205.055 233.588 205.716 233.003 206.306L232.949 206.506C230.216 204.886 227.615 202.836 226.105 200.04C224.594 197.244 224.384 193.579 226.238 190.999Z" />
+        <path d="M44.5912 185.53C45.5082 188.862 47.5743 191.762 50.4238 193.717C51.5255 194.467 52.8289 195.187 53.2058 196.465C53.404 197.28 53.2819 198.14 52.8645 198.867C52.4479 199.586 51.941 200.247 51.3562 200.837L51.3028 201.037C48.5689 199.417 45.9681 197.367 44.4579 194.571C42.9477 191.775 42.7369 188.111 44.5912 185.53Z" />
+      </g>
+      <g className="fill-destructive">
+        <path d="M253.621 39.8451C264.624 39.8451 273.544 30.9255 273.544 19.9225C273.544 8.91962 264.624 0 253.621 0C242.618 0 233.699 8.91962 233.699 19.9225C233.699 30.9255 242.618 39.8451 253.621 39.8451Z" />
+      </g>
+      <g className="fill-muted">
+        <path d="M289.574 4.63702C279.918 3.33192 268.895 8.5507 266.393 17.967C265.762 16.2928 264.616 14.8624 263.119 13.8825C261.622 12.9026 259.852 12.4239 258.066 12.5156C256.279 12.6072 254.568 13.2646 253.179 14.3925C251.79 15.5205 250.796 17.0607 250.34 18.7907L251.446 19.5824C272.137 24.0569 293.555 23.96 314.205 19.2987C307.489 12.2402 299.229 5.9421 289.574 4.63702Z" />
+        <path d="M248.166 31.2004C238.511 29.8953 227.488 35.1141 224.985 44.5304C224.355 42.8561 223.208 41.4258 221.711 40.4459C220.214 39.466 218.445 38.9873 216.658 39.0789C214.871 39.1706 213.16 39.8279 211.771 40.9559C210.383 42.0839 209.388 43.6241 208.932 45.3541L210.038 46.1458C230.729 50.6203 252.148 50.5234 272.797 45.862C266.081 38.8036 257.821 32.5055 248.166 31.2004Z" />
+      </g>
+      <g className="fill-muted-foreground">
+        <path d="M332.437 36.2232C332.397 36.2233 332.358 36.2171 332.319 36.2049C229.032 3.54043 137.999 7.81188 79.8189 17.1471C71.9012 18.4171 63.9624 19.8839 56.2229 21.5071C54.247 21.921 52.1971 22.3647 50.1302 22.8266C47.6618 23.3764 45.2263 23.9425 42.8908 24.5086C41.8822 24.7474 40.8933 24.9881 39.924 25.2308C38.4559 25.5932 36.9662 25.9708 35.3693 26.3859C33.5849 26.8459 31.7719 27.3285 29.9795 27.8202C29.973 27.8226 29.9663 27.8245 29.9595 27.826L29.9597 27.8264C27.9352 28.3791 25.9213 28.9479 23.9739 29.5159C22.9198 29.8204 21.902 30.1206 20.9272 30.417C20.8182 30.4471 20.7217 30.4761 20.6239 30.5059L20.4144 30.5696C20.2931 30.6066 20.1734 30.6428 20.0536 30.6772L20.0459 30.6795L20.0461 30.6799L19.7291 30.7783C19.3511 30.8928 18.9822 31.0045 18.6194 31.1159C9.0312 34.0716 3.76026 36.1744 3.70819 36.195C3.66057 36.2141 3.60966 36.2236 3.55837 36.223C3.50707 36.2224 3.45639 36.2117 3.40922 36.1915C3.36206 36.1714 3.31932 36.1421 3.28347 36.1054C3.24761 36.0687 3.21933 36.0253 3.20024 35.9777C3.18116 35.9301 3.17164 35.8792 3.17223 35.8279C3.17282 35.7766 3.1835 35.7259 3.20368 35.6787C3.22385 35.6316 3.25311 35.5888 3.2898 35.553C3.32649 35.5171 3.36988 35.4889 3.4175 35.4698C3.46995 35.4492 8.76665 33.3358 18.3897 30.369C18.7539 30.2572 19.1237 30.1454 19.5029 30.0306L19.7974 29.939C19.8075 29.9352 19.8176 29.9322 19.8279 29.9291C19.9471 29.8952 20.0662 29.8589 20.1871 29.8223L20.3969 29.7586C20.5014 29.7269 20.6044 29.6956 20.7099 29.6667C21.6781 29.3722 22.6993 29.0712 23.756 28.7656C25.7043 28.1972 27.72 27.6284 29.7461 27.0749C29.7524 27.0726 29.7589 27.071 29.7652 27.0691C31.5638 26.5759 33.3835 26.091 35.1736 25.6294C36.773 25.214 38.2655 24.8356 39.7362 24.4724C40.7095 24.2301 41.7003 23.9889 42.7087 23.7487C45.0468 23.1818 47.4873 22.6149 49.9601 22.0641C52.0302 21.6017 54.0835 21.1569 56.0627 20.7426C63.8142 19.1168 71.7654 17.6477 79.6951 16.3758C137.958 7.02719 229.122 2.74884 332.555 35.4602C332.644 35.4883 332.72 35.5472 332.769 35.6265C332.818 35.7057 332.837 35.7999 332.823 35.8921C332.809 35.9842 332.762 36.0683 332.692 36.129C332.621 36.1898 332.531 36.2232 332.437 36.2232Z" />
+      </g>
+      <g className="fill-foreground">
+        <path d="M102.733 164.005C102.598 163.61 102.37 163.252 102.069 162.962C101.958 162.859 101.838 162.767 101.71 162.685C100.69 162.005 99.1669 161.853 98.1981 162.685C98.1005 162.77 98.0103 162.863 97.9286 162.962C97.6395 163.318 97.3426 163.666 97.0379 164.005C96.5379 164.576 96.0262 165.127 95.491 165.662C95.3386 165.81 95.1863 165.963 95.03 166.111C94.9402 166.201 94.8503 166.287 94.7605 166.373C94.4167 166.701 94.0652 167.017 93.7097 167.33C93.5222 167.498 93.3347 167.662 93.1432 167.822C92.8581 168.06 92.5729 168.299 92.2838 168.529C92.2565 168.549 92.2292 168.568 92.2018 168.592C92.194 168.595 92.1901 168.603 92.1823 168.607C92.1784 168.607 92.1745 168.607 92.1706 168.615C92.16 168.619 92.1506 168.626 92.1432 168.635C92.0573 168.693 91.9987 168.732 91.9557 168.767C91.9713 168.76 91.987 168.748 92.0026 168.74C91.9323 168.795 91.858 168.849 91.7877 168.904C91.1041 169.408 90.4049 169.892 89.69 170.346C87.9213 171.477 86.0636 172.464 84.1351 173.295C84.0062 173.346 83.8734 173.4 83.7406 173.451C78.6914 175.52 73.2143 176.327 67.783 175.803C67.2283 175.76 66.6736 175.701 66.1189 175.627C65.4783 175.533 64.8415 175.42 64.2087 175.291C61.7995 174.81 59.4421 174.099 57.1694 173.166C54.3264 171.864 51.6224 170.278 49.0988 168.431C48.7082 168.154 48.3136 167.877 47.9191 167.607C48.3683 166.506 48.8097 165.404 49.2394 164.295C49.4543 163.759 49.6613 163.224 49.8645 162.685C51.4622 158.533 52.9622 154.341 54.3998 150.134C55.8529 145.872 57.2241 141.585 58.5132 137.274C58.646 136.837 58.7749 136.399 58.8999 135.962C59.5757 133.684 60.2242 131.402 60.8453 129.114C60.9039 128.891 60.9664 128.672 61.0211 128.45C61.2008 127.793 61.3766 127.137 61.5484 126.481C61.9391 125 61.0562 123.231 59.5015 122.875C58.7529 122.683 57.9591 122.789 57.2872 123.171C56.6154 123.553 56.118 124.181 55.8998 124.922C55.7318 125.555 55.5639 126.184 55.392 126.817C54.5677 129.875 53.7005 132.924 52.7903 135.962C52.6575 136.399 52.5247 136.837 52.3919 137.274C50.384 143.892 48.1795 150.443 45.7784 156.927C45.4893 157.712 45.1963 158.495 44.8994 159.275C44.7549 159.658 44.6104 160.04 44.4619 160.423C44.1768 161.177 43.8838 161.931 43.5908 162.685C43.4228 163.127 43.2509 163.568 43.0791 164.005C42.9658 164.283 42.8564 164.56 42.747 164.834C41.6333 164.434 40.4793 164.156 39.3055 164.005L39.118 163.982C38.208 163.873 37.2877 163.88 36.3796 164.005C35.0206 164.164 33.7131 164.619 32.5493 165.339C31.3856 166.058 30.3941 167.025 29.645 168.17C27.7817 171.103 27.8051 175.299 30.4185 177.791C33.11 180.358 37.1844 180.338 40.3524 178.733C42.0313 177.824 43.4469 176.497 44.4619 174.881C44.8508 174.295 45.2081 173.688 45.5323 173.064C45.6143 173.119 45.6963 173.174 45.7784 173.232C46.0909 173.451 46.4034 173.674 46.712 173.893C48.5101 175.195 50.405 176.359 52.3802 177.373C56.6272 179.484 61.1988 180.867 65.9041 181.463C66.0095 181.475 66.1111 181.49 66.2166 181.502C66.7361 181.569 67.2596 181.619 67.783 181.662C75.2919 182.228 82.81 180.692 89.4947 177.225C90.0611 176.932 90.6223 176.624 91.1783 176.303C92.0416 175.803 92.8854 175.271 93.7097 174.709C94.1589 174.404 94.5964 174.096 95.03 173.771C96.9248 172.376 98.6911 170.814 100.308 169.103C100.921 168.459 101.508 167.793 102.069 167.107C102.6 166.546 102.906 165.809 102.929 165.037C102.926 164.684 102.86 164.335 102.733 164.005ZM38.0477 173.31C38.1297 173.252 38.2117 173.189 38.2899 173.127C38.2664 173.185 38.1531 173.252 38.0477 173.31ZM39.3016 172.049C39.2118 172.15 39.1297 172.252 39.0399 172.353C38.7665 172.659 38.4729 172.946 38.1609 173.213C38.118 173.252 38.0711 173.291 38.0242 173.326C38.0237 173.326 38.0232 173.326 38.0227 173.326C38.0222 173.327 38.0218 173.327 38.0214 173.327C38.0211 173.328 38.0208 173.328 38.0206 173.328C38.0204 173.329 38.0203 173.329 38.0203 173.33C37.9639 173.355 37.9091 173.384 37.8562 173.416C37.6883 173.518 37.5164 173.611 37.3406 173.697C36.9964 173.824 36.6423 173.922 36.282 173.99C36.0051 174.01 35.7272 174.013 35.4499 173.998H35.4421C35.2508 173.956 35.0617 173.903 34.8757 173.842C34.7819 173.795 34.6921 173.74 34.6022 173.685C34.5671 173.654 34.5358 173.623 34.5163 173.603C34.4781 173.569 34.4429 173.531 34.4109 173.49C34.4109 173.49 34.4108 173.489 34.4106 173.489C34.4104 173.488 34.4101 173.488 34.4097 173.487C34.4094 173.487 34.4089 173.487 34.4084 173.487C34.408 173.486 34.4075 173.486 34.4069 173.486C34.364 173.408 34.3171 173.33 34.2741 173.252C34.2719 173.25 34.2705 173.247 34.2702 173.244C34.239 173.146 34.2116 173.045 34.1882 172.943C34.1797 172.765 34.181 172.586 34.1921 172.408C34.2445 172.159 34.315 171.913 34.403 171.674C34.4821 171.504 34.5722 171.34 34.6726 171.181C34.6804 171.166 34.7195 171.103 34.7624 171.033C34.7663 171.029 34.7663 171.029 34.7663 171.025C34.8249 170.959 34.8835 170.889 34.946 170.826C35.0515 170.709 35.1648 170.607 35.2781 170.502C35.4984 170.358 35.7266 170.226 35.9617 170.107C36.3346 169.975 36.7173 169.872 37.1063 169.799C37.6798 169.753 38.2563 169.758 38.829 169.814C39.3714 169.908 39.9065 170.04 40.4306 170.209C40.113 170.825 39.7513 171.418 39.3485 171.982C39.3329 172.006 39.3173 172.029 39.3016 172.049ZM34.9577 170.763C34.9233 170.819 34.8827 170.87 34.8366 170.916C34.8676 170.858 34.9086 170.807 34.9577 170.763Z" />
+        <path d="M90.9908 124.11C90.9557 125.336 90.9205 126.563 90.8853 127.789C90.8111 130.512 90.7343 133.236 90.6549 135.962C90.5728 139.028 90.4869 142.093 90.3971 145.157C90.3541 146.739 90.3098 148.321 90.2642 149.903C90.1431 154.165 90.0233 158.426 89.9049 162.685C89.8931 163.127 89.8775 163.564 89.8658 164.005C89.8072 166.119 89.7486 168.232 89.69 170.346C89.6236 172.639 89.5585 174.932 89.4947 177.225C89.4478 178.943 89.3996 180.664 89.3501 182.385C88.9986 194.858 88.647 207.331 88.2954 219.804C88.2806 220.577 87.9671 221.313 87.4209 221.859C86.8746 222.406 86.138 222.719 85.3656 222.734C84.5905 222.728 83.849 222.417 83.3009 221.869C82.7528 221.321 82.4421 220.579 82.4359 219.804C82.6312 212.788 82.8291 205.772 83.0296 198.757C83.2054 192.413 83.3838 186.069 83.5648 179.725C83.6234 177.635 83.682 175.544 83.7406 173.451C83.8304 170.303 83.919 167.154 84.0062 164.005C84.0179 163.564 84.0336 163.127 84.0453 162.685C84.0531 162.298 84.0648 161.916 84.0765 161.529C84.2484 155.415 84.4203 149.301 84.5922 143.184C84.6625 140.778 84.7302 138.371 84.7953 135.962C84.8734 133.215 84.9516 130.47 85.0297 127.727C85.0648 126.52 85.0961 125.317 85.1313 124.11C85.1461 123.337 85.4596 122.601 86.0058 122.054C86.5521 121.508 87.2887 121.195 88.061 121.18C88.8361 121.186 89.5777 121.497 90.1258 122.045C90.6739 122.593 90.9846 123.335 90.9908 124.11Z" />
+        <path d="M251.71 124.923C248.638 136.556 244.966 148.022 240.709 159.276C239.535 162.38 238.333 165.478 237.049 168.539L237.344 167.839C236.771 169.297 236.038 170.687 235.16 171.984C235.101 172.068 235.04 172.151 234.978 172.233C235.282 171.845 235.339 171.768 235.151 172.003C235.052 172.12 234.954 172.238 234.851 172.352C234.578 172.658 234.284 172.946 233.973 173.213C233.894 173.28 233.815 173.346 233.734 173.41L234.1 173.125C234.058 173.226 233.759 173.359 233.666 173.415C233.365 173.597 233.051 173.756 232.727 173.891L233.427 173.596C232.895 173.81 232.34 173.962 231.774 174.05L232.553 173.945C231.996 174.022 231.432 174.028 230.874 173.963L231.653 174.067C231.196 174.005 230.749 173.884 230.322 173.709L231.022 174.005C230.795 173.905 230.576 173.788 230.367 173.655C230.261 173.585 229.935 173.339 230.361 173.664C230.803 174.002 230.418 173.693 230.326 173.603C230.251 173.528 230.182 173.447 230.108 173.371C229.763 173.018 230.497 173.979 230.263 173.566C230.138 173.358 230.023 173.145 229.92 172.926L230.215 173.626C230.081 173.293 229.985 172.945 229.931 172.59L230.035 173.369C229.979 172.928 229.979 172.481 230.034 172.039L229.93 172.818C230.001 172.325 230.132 171.842 230.318 171.38L230.023 172.08C230.153 171.77 230.307 171.469 230.483 171.182C230.564 171.034 230.659 170.894 230.768 170.764C230.787 170.77 230.272 171.355 230.545 171.06C230.617 170.982 230.683 170.901 230.756 170.824C230.871 170.702 230.995 170.59 231.117 170.474C231.525 170.085 230.546 170.851 231.017 170.544C231.358 170.319 231.718 170.123 232.091 169.958L231.391 170.253C232.017 169.996 232.672 169.821 233.342 169.73L232.564 169.835C233.403 169.738 234.251 169.748 235.087 169.864L234.309 169.76C235.368 169.92 236.403 170.212 237.391 170.627L236.691 170.332C238.797 171.236 240.662 172.578 242.523 173.893C244.321 175.195 246.215 176.358 248.19 177.373C252.437 179.484 257.009 180.867 261.714 181.464C268.463 182.291 275.311 181.409 281.63 178.901C287.949 176.393 293.538 172.337 297.882 167.107C298.412 166.545 298.717 165.808 298.74 165.036C298.734 164.26 298.427 163.517 297.882 162.964C296.807 161.977 294.776 161.699 293.738 162.964C292.755 164.165 291.697 165.304 290.572 166.373C290.046 166.872 289.507 167.355 288.954 167.822C288.637 168.09 288.317 168.351 287.992 168.608C287.839 168.729 287.36 169.053 288.095 168.531C287.927 168.65 287.765 168.781 287.599 168.904C285.138 170.717 282.472 172.234 279.656 173.421L280.356 173.126C277.334 174.394 274.16 175.263 270.914 175.713L271.693 175.608C268.353 176.048 264.97 176.043 261.632 175.594L262.411 175.698C259.074 175.24 255.81 174.351 252.701 173.054L253.401 173.349C250.401 172.021 247.554 170.372 244.91 168.43C243.534 167.411 242.083 166.498 240.569 165.698C238.805 164.797 236.895 164.217 234.929 163.984C231.242 163.55 227.484 164.986 225.457 168.172C223.592 171.103 223.616 175.298 226.228 177.791C228.919 180.359 232.994 180.337 236.164 178.731C239.218 177.184 241.052 173.971 242.342 170.941C245.245 164.122 247.815 157.146 250.21 150.134C252.579 143.197 254.727 136.19 256.655 129.113C256.893 128.236 257.129 127.359 257.36 126.48C257.752 125 256.868 123.23 255.314 122.876C254.565 122.684 253.771 122.789 253.099 123.171C252.426 123.553 251.928 124.181 251.71 124.923Z" />
+        <path d="M280.943 124.109L279.888 161.53L278.839 198.755L278.246 219.804C278.253 220.579 278.563 221.321 279.111 221.869C279.659 222.417 280.401 222.728 281.176 222.734C281.948 222.719 282.685 222.406 283.231 221.86C283.777 221.313 284.091 220.577 284.106 219.804L285.16 182.384L286.209 145.158L286.802 124.109C286.796 123.334 286.485 122.593 285.937 122.045C285.389 121.497 284.648 121.186 283.873 121.18C283.1 121.195 282.364 121.508 281.817 122.054C281.271 122.601 280.958 123.337 280.943 124.109Z" />
+        <path opacity={0.2} d="M179.534 209.357H180.444V167.933H201.666V167.025H180.444V149.546H196.833C196.593 149.241 196.346 148.939 196.091 148.641H180.444V137.097C180.143 136.969 179.839 136.845 179.534 136.728V148.641H161.7V133.85C161.395 133.864 161.094 133.885 160.791 133.91V148.641H146.564V137.605C146.258 137.741 145.957 137.883 145.659 138.032V148.641H133.699V149.546H145.659V167.025H133.699V167.933H145.659V209.357H146.564V167.933C148.432 167.932 150.282 168.3 152.009 169.015C153.735 169.73 155.303 170.778 156.625 172.099C157.946 173.42 158.994 174.989 159.708 176.715C160.423 178.441 160.791 180.291 160.791 182.16V209.357H161.7V167.933H179.534V209.357ZM146.564 167.025V149.546H160.791V167.025H146.564ZM161.7 167.025V149.546H162.057C164.353 149.547 166.625 149.999 168.746 150.877C170.866 151.756 172.793 153.043 174.416 154.666C176.038 156.289 177.326 158.216 178.204 160.337C179.082 162.457 179.534 164.73 179.534 167.025H161.7Z" />
+        <path d="M173.978 196.936C172.833 202.045 170.089 206.656 166.146 210.101C165.857 210.351 165.568 210.593 165.267 210.831C164.536 210.898 163.811 210.965 163.091 211.034C162.493 211.089 161.903 211.148 161.317 211.202L161.212 211.214L161.138 210.573L160.841 207.98C159.689 206.099 158.975 203.984 158.752 201.79C158.529 199.597 158.802 197.381 159.552 195.307C160.583 192.526 162.45 190.069 164.286 187.631C166.821 184.264 169.286 180.936 169.376 176.83C170.624 178.427 171.661 180.177 172.462 182.037C171.706 182.393 171.027 182.894 170.462 183.51C170.302 183.686 170.142 183.932 170.251 184.143C170.345 184.323 170.579 184.366 170.783 184.389C171.271 184.44 171.763 184.49 172.251 184.541C172.642 184.584 173.033 184.623 173.423 184.666C173.896 186.217 174.216 187.811 174.38 189.424C174.644 191.934 174.508 194.469 173.978 196.936Z" />
+      </g>
+      <g className="fill-destructive">
+        <path d="M186.947 186.698C184.642 188.373 183.295 190.784 182.248 193.44C181.175 193.783 180.21 194.4 179.447 195.229C179.287 195.405 179.127 195.651 179.236 195.862C179.33 196.042 179.564 196.085 179.767 196.108C180.256 196.159 180.748 196.21 181.236 196.26C180.189 199.401 179.228 202.651 177.377 205.304C176.145 207.055 174.54 208.511 172.677 209.566C172.169 209.855 171.645 210.115 171.107 210.343C169.122 210.495 167.176 210.658 165.267 210.831C164.536 210.898 163.811 210.965 163.091 211.034C162.493 211.089 161.903 211.148 161.317 211.202C161.313 210.988 161.313 210.773 161.317 210.558C161.441 204.834 163.546 199.331 167.275 194.987C167.45 194.784 167.63 194.585 167.814 194.385C169.702 192.368 171.924 190.69 174.38 189.424C178.251 187.412 182.59 186.47 186.947 186.698Z" />
+        <path d="M163.767 209.03L163.317 210.359L163.091 211.034C162.493 211.089 161.903 211.148 161.317 211.202L161.212 211.214C160.563 211.28 159.919 211.347 159.274 211.413C159.106 211.218 158.938 211.019 158.774 210.816C154.697 205.878 152.74 199.527 153.33 193.151C153.921 186.775 157.012 180.892 161.927 176.787C161.411 179.486 162.013 182.072 163.001 184.639C162.896 184.682 162.794 184.725 162.696 184.772C161.94 185.128 161.261 185.628 160.696 186.244C160.536 186.42 160.376 186.666 160.485 186.877C160.579 187.057 160.813 187.1 161.017 187.123C161.505 187.174 161.997 187.225 162.485 187.276C162.876 187.319 163.267 187.358 163.657 187.401C163.841 187.42 164.025 187.44 164.208 187.459C164.235 187.518 164.259 187.573 164.286 187.631C165.4 190.045 166.599 192.471 167.275 194.987C167.444 195.618 167.577 196.259 167.673 196.905C167.974 199.09 167.779 201.314 167.103 203.413C166.426 205.512 165.286 207.432 163.767 209.03Z" />
+      </g>
+      <g className="fill-foreground">
+        <path d="M203.088 152.372C199.725 145.813 194.515 140.294 188.387 136.238C182.24 132.187 175.186 129.721 167.854 129.058C166.893 128.971 165.93 128.919 164.964 128.904C163.823 128.887 146.656 133.839 140.905 137.882C135.158 141.876 130.43 147.165 127.103 153.323C123.782 159.514 122.148 166.47 122.366 173.493C122.651 180.558 124.62 187.452 128.11 193.601C131.552 199.731 136.439 204.926 142.346 208.737C148.338 212.56 154.356 222.696 161.431 223.054C168.558 223.415 176.687 213.853 183.187 210.95C189.688 208.022 195.308 203.442 199.487 197.666C203.548 192.005 206.175 185.444 207.143 178.545C208.148 171.481 207.68 164.196 205.267 157.444C204.648 155.709 203.92 154.015 203.088 152.372C202.392 151.003 200.355 150.499 199.079 151.321C198.422 151.726 197.946 152.368 197.75 153.115C197.554 153.862 197.654 154.655 198.028 155.33C198.436 156.134 198.816 156.951 199.167 157.782L198.872 157.082C200.2 160.276 201.103 163.63 201.558 167.059L201.453 166.28C201.937 169.999 201.928 173.767 201.427 177.484L201.532 176.705C201.025 180.422 200.033 184.057 198.581 187.516L198.876 186.816C198.129 188.581 197.258 190.291 196.27 191.933C195.769 192.762 195.238 193.572 194.676 194.363C194.429 194.71 194.175 195.051 193.918 195.391C193.584 195.835 194.374 194.812 194.029 195.247C193.97 195.321 193.911 195.395 193.852 195.469C193.675 195.691 193.495 195.911 193.312 196.128C192.095 197.581 190.765 198.938 189.337 200.185C188.981 200.495 188.62 200.799 188.252 201.095C188.069 201.243 187.888 201.397 187.697 201.535C187.704 201.529 188.314 201.066 187.953 201.335C187.84 201.419 187.727 201.505 187.613 201.59C186.856 202.151 186.078 202.684 185.28 203.188C183.442 204.346 181.515 205.353 179.515 206.201L180.215 205.906C176.767 207.357 173.142 208.349 169.435 208.856L170.214 208.751C166.509 209.252 162.753 209.258 159.046 208.771L159.825 208.875C156.455 208.423 153.16 207.532 150.022 206.225L150.721 206.52C148.904 205.753 147.151 204.84 145.481 203.79C144.654 203.269 143.849 202.716 143.065 202.13C142.953 202.047 142.842 201.962 142.731 201.878C142.373 201.608 142.988 202.077 142.993 202.08C142.785 201.931 142.585 201.772 142.393 201.602C142.015 201.294 141.642 200.978 141.276 200.656C139.808 199.364 138.438 197.966 137.176 196.472C136.861 196.099 136.551 195.72 136.249 195.336C136.118 195.169 135.879 194.831 136.407 195.542C136.338 195.449 136.266 195.357 136.195 195.264C136.027 195.041 135.861 194.816 135.697 194.589C135.123 193.795 134.578 192.982 134.061 192.149C132.893 190.264 131.874 188.291 131.012 186.247L131.307 186.947C129.898 183.593 128.934 180.068 128.44 176.463L128.545 177.242C128.099 173.919 128.093 170.552 128.526 167.228L128.421 168.007C128.865 164.787 129.731 161.641 130.997 158.647L130.702 159.347C131.498 157.474 132.438 155.664 133.513 153.935C134.05 153.069 134.62 152.225 135.223 151.401C135.359 151.214 135.498 151.028 135.638 150.844C135.764 150.676 136.112 150.26 135.518 150.995C135.577 150.923 135.633 150.849 135.69 150.776C136.02 150.358 136.359 149.946 136.705 149.54C138.017 148.005 139.438 146.566 140.957 145.235C141.341 144.899 141.731 144.569 142.127 144.247C142.307 144.101 142.488 143.956 142.67 143.812C142.743 143.755 142.817 143.699 142.889 143.641C142.109 144.262 142.673 143.81 142.85 143.677C143.666 143.066 144.504 142.485 145.364 141.934C147.275 140.712 149.286 139.653 151.374 138.767L150.674 139.063C153.706 137.79 167.136 134.785 169.579 135.113L168.8 135.009C172.39 135.51 175.9 136.479 179.238 137.892L178.538 137.597C180.23 138.315 181.874 139.141 183.46 140.07C184.253 140.534 185.03 141.024 185.791 141.539C186.152 141.783 186.508 142.033 186.861 142.287C187.037 142.415 187.212 142.544 187.387 142.674C187.484 142.746 187.58 142.819 187.676 142.892C188.082 143.196 187.117 142.451 187.543 142.788C188.967 143.907 190.32 145.114 191.593 146.402C192.218 147.039 192.822 147.696 193.404 148.373C193.703 148.721 193.995 149.073 194.282 149.431C194.424 149.608 194.909 150.251 194.315 149.464C194.46 149.656 194.607 149.848 194.75 150.041C195.984 151.712 197.081 153.481 198.028 155.33C198.729 156.696 200.757 157.206 202.037 156.381C202.694 155.977 203.17 155.334 203.366 154.587C203.562 153.841 203.462 153.047 203.088 152.372Z" />
+        <path d="M168.95 200.185C168.647 200.199 168.348 200.119 168.092 199.957C167.836 199.795 167.636 199.559 167.52 199.279C167.403 199 167.375 198.691 167.439 198.396C167.504 198.1 167.657 197.831 167.88 197.625C167.917 197.477 167.944 197.371 167.981 197.223C167.967 197.191 167.954 197.159 167.941 197.127C166.581 193.885 157.907 202.921 157.532 205.967C157.367 207.314 157.437 208.679 157.738 210.002C154.928 203.873 153.469 197.211 153.46 190.469C153.459 188.777 153.553 187.086 153.741 185.405C153.897 184.026 154.113 182.658 154.389 181.299C155.895 173.926 159.128 167.016 163.823 161.136C166.508 161.286 168.862 160.877 169.089 155.672C169.129 154.747 169.816 153.945 169.967 153.033C169.711 153.067 169.45 153.088 169.194 153.105C169.114 153.109 169.03 153.113 168.95 153.117L168.92 153.119C168.638 153.131 168.359 153.062 168.115 152.92C167.872 152.777 167.675 152.568 167.548 152.316C167.421 152.064 167.37 151.781 167.4 151.5C167.43 151.22 167.541 150.954 167.718 150.735C167.829 150.599 167.94 150.463 168.051 150.327C168.219 150.117 168.391 149.911 168.559 149.701C168.579 149.681 168.597 149.66 168.614 149.638C168.807 149.398 169.001 149.163 169.194 148.923C168.841 148.376 168.366 147.917 167.807 147.583C165.87 146.448 163.197 147.234 161.797 148.986C160.394 150.739 160.129 153.197 160.617 155.387C161.096 157.25 161.889 159.018 162.962 160.615C162.857 160.749 162.747 160.879 162.642 161.014C160.722 163.483 159.048 166.135 157.645 168.931C158.042 165.83 153.187 154.631 151.309 152.259C149.054 149.409 144.43 150.653 144.032 154.265C144.029 154.3 144.025 154.335 144.021 154.37C144.3 154.527 144.573 154.694 144.84 154.871C145.176 155.095 145.436 155.415 145.586 155.79C145.736 156.164 145.77 156.575 145.683 156.969C145.596 157.363 145.391 157.722 145.097 157.998C144.802 158.273 144.431 158.454 144.033 158.515L143.992 158.522C140.259 163.851 152.225 177.723 155.221 174.609C153.811 178.604 152.927 182.766 152.59 186.989C152.399 189.481 152.411 191.984 152.624 194.474L152.611 194.385C151.945 188.963 140.528 180.9 137.194 181.571C135.273 181.958 133.381 181.87 133.673 183.808C133.678 183.839 133.682 183.869 133.687 183.9C134.205 184.111 134.709 184.354 135.196 184.627C135.475 184.785 135.748 184.952 136.015 185.128C136.35 185.353 136.61 185.673 136.761 186.047C136.911 186.422 136.945 186.833 136.858 187.227C136.77 187.621 136.566 187.979 136.272 188.255C135.977 188.531 135.606 188.712 135.207 188.773L135.166 188.779C135.137 188.784 135.112 188.788 135.082 188.792C133.383 194.638 145.984 204.074 153.645 201.072H153.649C154.408 204.371 155.508 207.582 156.931 210.653H168.656C168.698 210.523 168.736 210.388 168.774 210.258C167.688 210.326 166.599 210.261 165.529 210.065C166.399 208.997 167.269 207.922 168.139 206.854C168.158 206.834 168.177 206.813 168.194 206.791C168.635 206.245 169.08 205.703 169.522 205.156L169.522 205.156C169.545 203.481 169.353 201.81 168.95 200.185L168.95 200.185ZM155.523 173.772L155.529 173.764L155.523 173.781V173.772ZM152.926 197.184L152.825 196.957C152.829 196.794 152.829 196.63 152.825 196.462C152.825 196.415 152.817 196.369 152.817 196.323C152.855 196.613 152.888 196.903 152.93 197.193L152.926 197.184Z" />
+        <path d="M37.2078 175.787C39.581 175.787 41.5048 173.863 41.5048 171.49C41.5048 169.117 39.581 167.193 37.2078 167.193C34.8346 167.193 32.9108 169.117 32.9108 171.49C32.9108 173.863 34.8346 175.787 37.2078 175.787Z" />
+        <path d="M88.772 222.664C91.1452 222.664 93.069 220.74 93.069 218.367C93.069 215.993 91.1452 214.07 88.772 214.07C86.3988 214.07 84.475 215.993 84.475 218.367C84.475 220.74 86.3988 222.664 88.772 222.664Z" />
+        <path d="M284.482 222.664C286.855 222.664 288.779 220.74 288.779 218.367C288.779 215.993 286.855 214.07 284.482 214.07C282.108 214.07 280.185 215.993 280.185 218.367C280.185 220.74 282.108 222.664 284.482 222.664Z" />
+        <path d="M295.029 167.974C297.402 167.974 299.326 166.051 299.326 163.677C299.326 161.304 297.402 159.38 295.029 159.38C292.656 159.38 290.732 161.304 290.732 163.677C290.732 166.051 292.656 167.974 295.029 167.974Z" />
+        <path d="M282.528 128.129C284.902 128.129 286.825 126.205 286.825 123.832C286.825 121.459 284.902 119.535 282.528 119.535C280.155 119.535 278.231 121.459 278.231 123.832C278.231 126.205 280.155 128.129 282.528 128.129Z" />
+        <path d="M103.226 163.677C103.223 164.775 102.799 165.83 102.04 166.623C101.282 167.416 100.247 167.888 99.1507 167.94C98.0543 167.991 96.9799 167.62 96.1499 166.902C95.3199 166.183 94.7977 165.174 94.6915 164.081C94.5853 162.989 94.9031 161.897 95.5793 161.033C96.2554 160.168 97.2381 159.596 98.324 159.436C99.4098 159.276 100.516 159.539 101.413 160.171C102.31 160.804 102.93 161.757 103.144 162.834C103.199 163.111 103.226 163.394 103.226 163.677Z" />
+        <path d="M189.166 140.63C191.539 140.63 193.463 138.706 193.463 136.333C193.463 133.959 191.539 132.036 189.166 132.036C186.793 132.036 184.869 133.959 184.869 136.333C184.869 138.706 186.793 140.63 189.166 140.63Z" />
+        <path d="M146.586 136.333C146.584 137.43 146.159 138.485 145.401 139.278C144.642 140.072 143.608 140.543 142.512 140.595C141.415 140.647 140.341 140.275 139.511 139.557C138.681 138.839 138.159 137.829 138.052 136.736C137.946 135.644 138.264 134.553 138.94 133.688C139.616 132.823 140.599 132.252 141.685 132.091C142.771 131.931 143.877 132.194 144.774 132.827C145.671 133.459 146.29 134.412 146.504 135.489C146.56 135.767 146.587 136.049 146.586 136.333Z" />
+        <path d="M91.1158 123.832C91.1133 124.93 90.6888 125.984 89.9303 126.778C89.1718 127.571 88.1373 128.043 87.0409 128.095C85.9445 128.146 84.8701 127.775 84.0401 127.057C83.2101 126.338 82.6879 125.329 82.5817 124.236C82.4755 123.144 82.7934 122.052 83.4695 121.187C84.1457 120.323 85.1283 119.751 86.2142 119.591C87.3 119.431 88.4059 119.694 89.3031 120.326C90.2002 120.959 90.8198 121.912 91.0338 122.988C91.0889 123.266 91.1164 123.549 91.1158 123.832Z" />
+        <path d="M234.089 177.35C236.463 177.35 238.386 175.426 238.386 173.053C238.386 170.679 236.463 168.756 234.089 168.756C231.716 168.756 229.792 170.679 229.792 173.053C229.792 175.426 231.716 177.35 234.089 177.35Z" />
+        <path d="M166.509 138.286C169.961 138.286 172.759 135.488 172.759 132.036C172.759 128.584 169.961 125.785 166.509 125.785C163.057 125.785 160.259 128.584 160.259 132.036C160.259 135.488 163.057 138.286 166.509 138.286Z" />
+      </g>
+      <g className="fill-muted-foreground">
+        <path d="M335.535 222.992L0.465125 223.112C0.404044 223.112 0.343559 223.1 0.287128 223.077C0.230696 223.053 0.179424 223.019 0.136233 222.976C0.0930425 222.933 0.0587775 222.881 0.0354028 222.825C0.0120281 222.769 2.41097e-06 222.708 2.41097e-06 222.647C2.41097e-06 222.586 0.0120281 222.525 0.0354028 222.469C0.0587775 222.413 0.0930425 222.361 0.136233 222.318C0.179424 222.275 0.230696 222.241 0.287128 222.217C0.343559 222.194 0.404044 222.182 0.465125 222.182L335.535 222.062C335.658 222.062 335.776 222.111 335.863 222.199C335.95 222.286 335.999 222.404 335.999 222.527C335.999 222.65 335.95 222.768 335.863 222.855C335.776 222.943 335.658 222.992 335.535 222.992Z" />
+      </g>
+    </svg>
+  )
+}
+
+export function ErrorStateIllustratedEmptyState({
+  locale = "en",
+  heading,
+  description,
+  primaryAction,
+  backLabel,
+  onBack,
+  showIllustration = true,
+  className,
+  ...props
+}: ErrorStateIllustratedEmptyStateProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const primary = primaryAction ?? copy.primaryAction
+  const back = backLabel ?? copy.backLabel
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn(
+        "flex min-h-[560px] items-center justify-center bg-background p-4 md:min-h-[600px] md:p-6 lg:min-h-[660px]",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex w-full max-w-[460px] flex-col items-center gap-5 text-center">
+        {showIllustration ? (
+          <div className="flex h-40 items-center justify-center md:h-[200px] lg:h-60">
+            <Illustration404 className="w-[234px] md:w-[280px] lg:w-[336px]" />
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col gap-2">
+          <h1 id={headingId} className="text-xl font-semibold text-foreground">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-sm text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <a href={primary.href} className={buttonVariants({ size: "sm" })}>
+            {primary.label}
+          </a>
+          {back ? (
+            <Button variant="outline" size="sm" onClick={onBack ?? (() => window.history.back())}>
+              {back}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateIllustratedEmptyStateCopy = COPY

package/registry/blocks/error-state-illustrated-empty-state/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateIllustratedEmptyState,
+  errorStateIllustratedEmptyStateCopy,
+  type ErrorStateIllustratedEmptyStateAction,
+  type ErrorStateIllustratedEmptyStateCopy,
+  type ErrorStateIllustratedEmptyStateProps,
+} from "./ErrorStateIllustratedEmptyState"

package/registry/blocks/error-state-layered-badge-centered/ErrorStateLayeredBadgeCentered.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Headset, SearchX } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Layered Badge Centered.
+ *
+ * A centred message under a small still life: an icon badge resting on two
+ * cards fanned out behind it. Then a retry, a way back to the start and a
+ * line about support. Mobile first: the base classes are Figma's Mobile
+ * (360), `md:` its Tablet (768) and `lg:` its Desktop (1440); on Mobile the
+ * badge group is drawn at 80%. Direction is the page's `dir`; every side is
+ * a logical one. In Arabic the cards swap sides but keep their tilt, so the
+ * fan opens the other way, as in Figma.
+ */
+
+export interface ErrorStateLayeredBadgeCenteredAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateLayeredBadgeCenteredCopy {
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button's label. It calls `onRetry`. */
+  retryLabel: React.ReactNode
+  /** The outline button beside it: back to the start. Hidden when null. */
+  secondaryAction: ErrorStateLayeredBadgeCenteredAction | null
+  /** The small line at the foot, beside a headset. Hidden when empty. */
+  supportNote: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateLayeredBadgeCenteredCopy> = {
+  en: {
+    heading: "Sorry, we couldn’t find that page",
+    description:
+      "The address may be mistyped, or the page may have been retired. Try again, or start from the beginning.",
+    retryLabel: "Try again",
+    secondaryAction: { label: "Start over", href: "/" },
+    supportNote: "Still stuck? Fasla support replies within an hour.",
+  },
+  ar: {
+    heading: "عذرًا، لم نتمكن من العثور على تلك الصفحة",
+    description: "قد يكون العنوان مكتوبًا بشكل خاطئ، أو تم إيقاف الصفحة. حاول مجددًا، أو ابدأ من البداية.",
+    retryLabel: "حاول مجددًا",
+    secondaryAction: { label: "ابدأ من جديد", href: "/" },
+    supportNote: "ما زلت عالقًا؟ دعم فاصلة يرد خلال ساعة.",
+  },
+}
+
+export interface ErrorStateLayeredBadgeCenteredProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateLayeredBadgeCenteredCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The glyph on the badge. Pass `null` to drop the whole badge group.
+   * @default a magnifier with a cross
+   */
+  icon?: React.ReactNode
+  /**
+   * Called by the solid button. Without it, the button reloads the page.
+   * @default reloads the page
+   */
+  onRetry?: () => void
+}
+
+export function ErrorStateLayeredBadgeCentered({
+  locale = "en",
+  heading,
+  description,
+  retryLabel,
+  secondaryAction,
+  supportNote,
+  icon,
+  onRetry,
+  className,
+  ...props
+}: ErrorStateLayeredBadgeCenteredProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const note = supportNote ?? copy.supportNote
+  const glyph = icon === undefined ? <SearchX className="size-[30px]" size={30} strokeWidth={1.5} absoluteStrokeWidth /> : icon
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-6 text-center md:max-w-none md:gap-7 lg:max-w-[560px]">
+        {glyph ? (
+          <div aria-hidden="true" className="flex h-24 w-40 shrink-0 items-center justify-center md:h-[120px] md:w-[200px]">
+            {/* Drawn at Desktop size and scaled down on Mobile, about its centre. */}
+            <div className="relative h-[120px] w-[200px] shrink-0 scale-[0.8] md:scale-100">
+              <div className="absolute start-[10.5px] top-[19px] h-[72px] w-24 -rotate-[8deg] rounded-lg border border-border bg-muted" />
+              <div className="absolute start-[92.5px] top-[32.3px] h-[72px] w-24 rotate-[8deg] rounded-lg border border-border bg-muted" />
+              <div className="absolute start-16 top-6 flex size-[72px] items-center justify-center rounded-full border border-border bg-card text-foreground shadow-md">
+                {glyph}
+              </div>
+            </div>
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col gap-2.5">
+          <h1 id={headingId} className="text-2xl font-semibold text-foreground md:text-3xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <Button type="button" onClick={onRetry ?? (() => window.location.reload())}>
+            {retryLabel ?? copy.retryLabel}
+          </Button>
+          {secondary ? (
+            <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+              {secondary.label}
+            </a>
+          ) : null}
+        </div>
+        {note ? (
+          <p className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+            <Headset aria-hidden="true" size={14} strokeWidth={1.5} absoluteStrokeWidth className="size-3.5 shrink-0" />
+            {note}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateLayeredBadgeCenteredCopy = COPY

package/registry/blocks/error-state-layered-badge-centered/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateLayeredBadgeCentered,
+  errorStateLayeredBadgeCenteredCopy,
+  type ErrorStateLayeredBadgeCenteredAction,
+  type ErrorStateLayeredBadgeCenteredCopy,
+  type ErrorStateLayeredBadgeCenteredProps,
+} from "./ErrorStateLayeredBadgeCentered"

package/registry/blocks/error-state-light-editorial/ErrorStateLightEditorial.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Light Editorial.
+ *
+ * A quiet, centred page in light weights: the code as a small label, a large
+ * light heading whose last words are in the destructive colour, and a row of
+ * underlined links in place of buttons. Mobile first: the base classes are
+ * Figma's Mobile (360), `md:` its Tablet (768) and `lg:` its Desktop (1440);
+ * the links wrap on Mobile. Direction is the page's `dir`; the block is
+ * centred, so only the order of the links mirrors in Arabic.
+ */
+
+export interface ErrorStateLightEditorialLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateLightEditorialCopy {
+  /** The small label above the heading: the status code. Hidden when empty. */
+  code: React.ReactNode
+  /**
+   * The page's heading, an `h1`. Figma colours its last words with the
+   * destructive colour: wrap them in `<span className="text-destructive">`.
+   */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The underlined links under the copy, in order. Each has a `label` and an `href`. Hidden when empty. */
+  links: ErrorStateLightEditorialLink[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateLightEditorialCopy> = {
+  en: {
+    code: "404",
+    heading: (
+      <>
+        Page <span className="text-destructive">not found</span>
+      </>
+    ),
+    description: "The page you were looking for moved, or it never existed at all. Try one of these instead.",
+    links: [
+      { label: "Home", href: "/" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "Docs", href: "#docs" },
+      { label: "Journal", href: "#journal" },
+      { label: "Contact", href: "#contact" },
+    ],
+  },
+  ar: {
+    code: "404",
+    heading: (
+      <>
+        الصفحة <span className="text-destructive">غير موجودة</span>
+      </>
+    ),
+    description: "الصفحة التي تبحث عنها انتقلت، أو لم تكن موجودة أصلًا. جرّب أحد هذه بدلًا منها.",
+    links: [
+      { label: "الرئيسية", href: "/" },
+      { label: "الأسعار", href: "#pricing" },
+      { label: "التوثيق", href: "#docs" },
+      { label: "المدونة", href: "#journal" },
+      { label: "تواصل", href: "#contact" },
+    ],
+  },
+}
+
+export interface ErrorStateLightEditorialProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateLightEditorialCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateLightEditorial({
+  locale = "en",
+  code,
+  heading,
+  description,
+  links,
+  className,
+  ...props
+}: ErrorStateLightEditorialProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const status = code ?? copy.code
+  const list = links ?? copy.links
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[620px] flex-col items-center gap-4 py-8 text-center md:max-w-none md:py-12 lg:max-w-[620px] lg:py-16">
+        {status ? <p className="text-xs text-destructive">{status}</p> : null}
+        <div className="flex w-full flex-col gap-4">
+          <h1 id={headingId} className="text-2xl font-light text-foreground md:text-5xl lg:text-6xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-lg font-light text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        {list.length > 0 ? (
+          <ul className="flex flex-wrap justify-center gap-x-5 gap-y-3 md:gap-x-6">
+            {list.map((link, index) => (
+              <li key={index} className="flex">
+                <a
+                  href={link.href}
+                  className="rounded-sm text-sm text-foreground underline hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateLightEditorialCopy = COPY

package/registry/blocks/error-state-light-editorial/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateLightEditorial,
+  errorStateLightEditorialCopy,
+  type ErrorStateLightEditorialCopy,
+  type ErrorStateLightEditorialLink,
+  type ErrorStateLightEditorialProps,
+} from "./ErrorStateLightEditorial"