@rdna/radiants 0.1.1 → 0.1.3

package/pixel-corners.generated.css

@@ -0,0 +1,215 @@
+/* AUTO-GENERATED FILE. DO NOT EDIT.
+   Source: scripts/pixel-corners.config.mjs
+   Run: pnpm --filter @rdna/radiants generate:pixel-corners
+   Calculator: https://pixelcorners.lukeb.co.uk/
+*/
+
+.pixel-rounded-xs::after,
+.pixel-rounded-xs--wrapper::after,
+.pixel-rounded-sm::after,
+.pixel-rounded-sm--wrapper::after,
+.pixel-rounded-md::after,
+.pixel-rounded-md--wrapper::after,
+.pixel-rounded-lg::after,
+.pixel-corners::after,
+.pixel-rounded-lg--wrapper::after,
+.pixel-corners--wrapper::after,
+.pixel-rounded-xl::after,
+.pixel-rounded-xl--wrapper::after,
+.pixel-rounded-t-sm-b-md::after,
+.pixel-rounded-l-sm::after,
+.pixel-rounded-sm-notl::after {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  z-index: 1;
+  background: var(--color-line);
+  display: block;
+  pointer-events: none;
+  margin: -1px;
+}
+
+/* position: relative is required for the ::after border pseudo-element.
+   Consumers that need absolute/fixed positioning (e.g. AppWindow) must
+   override with an inline style: style={{ position: 'absolute' }} */
+
+.pixel-rounded-xs,
+.pixel-rounded-xs--wrapper,
+.pixel-rounded-sm,
+.pixel-rounded-sm--wrapper,
+.pixel-rounded-md,
+.pixel-rounded-md--wrapper,
+.pixel-rounded-lg,
+.pixel-corners,
+.pixel-rounded-lg--wrapper,
+.pixel-corners--wrapper,
+.pixel-rounded-xl,
+.pixel-rounded-xl--wrapper,
+.pixel-rounded-t-sm-b-md,
+.pixel-rounded-l-sm,
+.pixel-rounded-sm-notl {
+  position: relative;
+}
+
+.pixel-rounded-xs,
+.pixel-rounded-sm,
+.pixel-rounded-md,
+.pixel-rounded-lg,
+.pixel-corners,
+.pixel-rounded-xl,
+.pixel-rounded-t-sm-b-md,
+.pixel-rounded-l-sm,
+.pixel-rounded-sm-notl {
+  border: 1px solid transparent;
+}
+
+.pixel-rounded-xs {
+  border-radius: 2px;
+}
+
+.pixel-rounded-sm {
+  border-radius: 6px;
+}
+
+.pixel-rounded-md {
+  border-radius: 6px;
+}
+
+.pixel-rounded-lg,
+.pixel-corners {
+  border-radius: 8px;
+}
+
+.pixel-rounded-xl {
+  border-radius: 16px;
+}
+
+.pixel-rounded-t-sm-b-md {
+  border-radius: 0;
+}
+
+.pixel-rounded-l-sm {
+  border-radius: 0;
+}
+
+.pixel-rounded-sm-notl {
+  border-radius: 0;
+}
+
+.pixel-rounded-xs--wrapper,
+.pixel-rounded-sm--wrapper,
+.pixel-rounded-md--wrapper,
+.pixel-rounded-lg--wrapper,
+.pixel-corners--wrapper,
+.pixel-rounded-xl--wrapper {
+  width: fit-content;
+  height: fit-content;
+}
+
+.pixel-rounded-xs--wrapper .pixel-rounded-xs,
+.pixel-rounded-sm--wrapper .pixel-rounded-sm,
+.pixel-rounded-md--wrapper .pixel-rounded-md,
+.pixel-rounded-lg--wrapper .pixel-rounded-lg,
+.pixel-corners--wrapper .pixel-corners,
+.pixel-rounded-xl--wrapper .pixel-rounded-xl {
+  display: block;
+}
+
+.pixel-rounded-xs,
+.pixel-rounded-xs--wrapper {
+  clip-path: polygon(0px calc(100% - 2px), 1px calc(100% - 2px), 1px calc(100% - 1px), 2px calc(100% - 1px), 2px 100%, calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 2px), 100% calc(100% - 2px), 100% 2px, calc(100% - 1px) 2px, calc(100% - 1px) 1px, calc(100% - 2px) 1px, calc(100% - 2px) 0px, 2px 0px, 2px 1px, 1px 1px, 1px 2px, 0px 2px);
+}
+
+.pixel-rounded-xs--wrapper .pixel-rounded-xs {
+  clip-path: polygon(1px 2px, 2px 2px, 2px 1px, calc(100% - 2px) 1px, calc(100% - 2px) 2px, calc(100% - 1px) 2px, calc(100% - 1px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 1px), 2px calc(100% - 1px), 2px calc(100% - 2px), 1px calc(100% - 2px));
+}
+
+.pixel-rounded-xs::after,
+.pixel-rounded-xs--wrapper::after {
+  clip-path: polygon(0px calc(100% - 2px), 1px calc(100% - 2px), 1px calc(100% - 1px), 2px calc(100% - 1px), 2px 100%, calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 2px), 100% calc(100% - 2px), 100% 2px, calc(100% - 1px) 2px, calc(100% - 1px) 1px, calc(100% - 2px) 1px, calc(100% - 2px) 0px, 2px 0px, 2px 1px, 1px 1px, 1px 2px, 0px 2px, 0px 50%, 1px 50%, 1px 2px, 2px 2px, 2px 1px, calc(100% - 2px) 1px, calc(100% - 2px) 2px, calc(100% - 1px) 2px, calc(100% - 1px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 1px), 2px calc(100% - 1px), 2px calc(100% - 2px), 1px calc(100% - 2px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-sm,
+.pixel-rounded-sm--wrapper {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, calc(100% - 5px) 100%, calc(100% - 5px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px), calc(100% - 3px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 3px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 5px), 100% calc(100% - 5px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px);
+}
+
+.pixel-rounded-sm--wrapper .pixel-rounded-sm {
+  clip-path: polygon(1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 1px), 5px calc(100% - 1px), 5px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 5px), 1px calc(100% - 5px));
+}
+
+.pixel-rounded-sm::after,
+.pixel-rounded-sm--wrapper::after {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, calc(100% - 5px) 100%, calc(100% - 5px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px), calc(100% - 3px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 3px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 5px), 100% calc(100% - 5px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px, 0px 50%, 1px 50%, 1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 1px), 5px calc(100% - 1px), 5px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 5px), 1px calc(100% - 5px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-md,
+.pixel-rounded-md--wrapper {
+  clip-path: polygon(0px calc(100% - 9px), 1px calc(100% - 9px), 1px calc(100% - 8px), 1px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 4px), 4px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 1px), 8px calc(100% - 1px), 9px calc(100% - 1px), 9px 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px), calc(100% - 6px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 6px), calc(100% - 1px) calc(100% - 6px), calc(100% - 1px) calc(100% - 8px), calc(100% - 1px) calc(100% - 9px), 100% calc(100% - 9px), 100% 9px, calc(100% - 1px) 9px, calc(100% - 1px) 8px, calc(100% - 1px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 5px, calc(100% - 3px) 5px, calc(100% - 3px) 4px, calc(100% - 4px) 3px, calc(100% - 5px) 3px, calc(100% - 5px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 1px, calc(100% - 8px) 1px, calc(100% - 9px) 1px, calc(100% - 9px) 0px, 9px 0px, 9px 1px, 8px 1px, 6px 1px, 6px 2px, 5px 2px, 5px 3px, 4px 3px, 3px 4px, 3px 5px, 2px 5px, 2px 6px, 1px 6px, 1px 8px, 1px 9px, 0px 9px);
+}
+
+.pixel-rounded-md--wrapper .pixel-rounded-md {
+  clip-path: polygon(1px 9px, 2px 9px, 2px 8px, 2px 6px, 3px 6px, 3px 5px, 4px 5px, 4px 4px, 5px 4px, 5px 3px, 6px 3px, 6px 2px, 8px 2px, 9px 2px, 9px 1px, calc(100% - 9px) 1px, calc(100% - 9px) 2px, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 3px, calc(100% - 5px) 3px, calc(100% - 5px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 5px, calc(100% - 3px) 5px, calc(100% - 3px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, calc(100% - 2px) 9px, calc(100% - 1px) 9px, calc(100% - 1px) calc(100% - 9px), calc(100% - 2px) calc(100% - 9px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 5px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 5px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 9px) calc(100% - 2px), calc(100% - 9px) calc(100% - 1px), 9px calc(100% - 1px), 9px calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 2px calc(100% - 9px), 1px calc(100% - 9px));
+}
+
+.pixel-rounded-md::after,
+.pixel-rounded-md--wrapper::after {
+  clip-path: polygon(0px calc(100% - 9px), 1px calc(100% - 9px), 1px calc(100% - 8px), 1px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 4px), 4px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 1px), 8px calc(100% - 1px), 9px calc(100% - 1px), 9px 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px), calc(100% - 6px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 6px), calc(100% - 1px) calc(100% - 6px), calc(100% - 1px) calc(100% - 8px), calc(100% - 1px) calc(100% - 9px), 100% calc(100% - 9px), 100% 9px, calc(100% - 1px) 9px, calc(100% - 1px) 8px, calc(100% - 1px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 5px, calc(100% - 3px) 5px, calc(100% - 3px) 4px, calc(100% - 4px) 3px, calc(100% - 5px) 3px, calc(100% - 5px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 1px, calc(100% - 8px) 1px, calc(100% - 9px) 1px, calc(100% - 9px) 0px, 9px 0px, 9px 1px, 8px 1px, 6px 1px, 6px 2px, 5px 2px, 5px 3px, 4px 3px, 3px 4px, 3px 5px, 2px 5px, 2px 6px, 1px 6px, 1px 8px, 1px 9px, 0px 9px, 0px 50%, 1px 50%, 1px 9px, 2px 9px, 2px 8px, 2px 6px, 3px 6px, 3px 5px, 4px 5px, 4px 4px, 5px 4px, 5px 3px, 6px 3px, 6px 2px, 8px 2px, 9px 2px, 9px 1px, calc(100% - 9px) 1px, calc(100% - 9px) 2px, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 3px, calc(100% - 5px) 3px, calc(100% - 5px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 5px, calc(100% - 3px) 5px, calc(100% - 3px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, calc(100% - 2px) 9px, calc(100% - 1px) 9px, calc(100% - 1px) calc(100% - 9px), calc(100% - 2px) calc(100% - 9px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 5px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 5px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 9px) calc(100% - 2px), calc(100% - 9px) calc(100% - 1px), 9px calc(100% - 1px), 9px calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 2px calc(100% - 9px), 1px calc(100% - 9px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-lg,
+.pixel-corners,
+.pixel-rounded-lg--wrapper,
+.pixel-corners--wrapper {
+  clip-path: polygon(0px calc(100% - 12px), 1px calc(100% - 12px), 1px calc(100% - 9px), 2px calc(100% - 9px), 2px calc(100% - 8px), 3px calc(100% - 8px), 3px calc(100% - 7px), 3px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 5px), 5px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 3px), 7px calc(100% - 3px), 8px calc(100% - 3px), 8px calc(100% - 2px), 9px calc(100% - 2px), 9px calc(100% - 1px), 12px calc(100% - 1px), 12px 100%, calc(100% - 12px) 100%, calc(100% - 12px) calc(100% - 1px), calc(100% - 9px) calc(100% - 1px), calc(100% - 9px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 7px), calc(100% - 3px) calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 9px), calc(100% - 1px) calc(100% - 9px), calc(100% - 1px) calc(100% - 12px), 100% calc(100% - 12px), 100% 12px, calc(100% - 1px) 12px, calc(100% - 1px) 9px, calc(100% - 2px) 9px, calc(100% - 2px) 8px, calc(100% - 3px) 8px, calc(100% - 3px) 7px, calc(100% - 3px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 5px, calc(100% - 5px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 3px, calc(100% - 7px) 3px, calc(100% - 8px) 3px, calc(100% - 8px) 2px, calc(100% - 9px) 2px, calc(100% - 9px) 1px, calc(100% - 12px) 1px, calc(100% - 12px) 0px, 12px 0px, 12px 1px, 9px 1px, 9px 2px, 8px 2px, 8px 3px, 7px 3px, 6px 3px, 6px 4px, 5px 4px, 4px 5px, 4px 6px, 3px 6px, 3px 7px, 3px 8px, 2px 8px, 2px 9px, 1px 9px, 1px 12px, 0px 12px);
+}
+
+.pixel-rounded-lg--wrapper .pixel-rounded-lg,
+.pixel-corners--wrapper .pixel-corners {
+  clip-path: polygon(1px 12px, 2px 12px, 2px 9px, 3px 9px, 3px 8px, 4px 8px, 4px 7px, 4px 6px, 5px 6px, 5px 5px, 6px 5px, 6px 4px, 7px 4px, 8px 4px, 8px 3px, 9px 3px, 9px 2px, 12px 2px, 12px 1px, calc(100% - 12px) 1px, calc(100% - 12px) 2px, calc(100% - 9px) 2px, calc(100% - 9px) 3px, calc(100% - 8px) 3px, calc(100% - 8px) 4px, calc(100% - 7px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 7px, calc(100% - 4px) 8px, calc(100% - 3px) 8px, calc(100% - 3px) 9px, calc(100% - 2px) 9px, calc(100% - 2px) 12px, calc(100% - 1px) 12px, calc(100% - 1px) calc(100% - 12px), calc(100% - 2px) calc(100% - 12px), calc(100% - 2px) calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 7px), calc(100% - 4px) calc(100% - 6px), calc(100% - 5px) calc(100% - 6px), calc(100% - 5px) calc(100% - 5px), calc(100% - 6px) calc(100% - 5px), calc(100% - 6px) calc(100% - 4px), calc(100% - 7px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px), calc(100% - 12px) calc(100% - 1px), 12px calc(100% - 1px), 12px calc(100% - 2px), 9px calc(100% - 2px), 9px calc(100% - 3px), 8px calc(100% - 3px), 8px calc(100% - 4px), 7px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 7px), 4px calc(100% - 8px), 3px calc(100% - 8px), 3px calc(100% - 9px), 2px calc(100% - 9px), 2px calc(100% - 12px), 1px calc(100% - 12px));
+}
+
+.pixel-rounded-lg::after,
+.pixel-corners::after,
+.pixel-rounded-lg--wrapper::after,
+.pixel-corners--wrapper::after {
+  clip-path: polygon(0px calc(100% - 12px), 1px calc(100% - 12px), 1px calc(100% - 9px), 2px calc(100% - 9px), 2px calc(100% - 8px), 3px calc(100% - 8px), 3px calc(100% - 7px), 3px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 5px), 5px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 3px), 7px calc(100% - 3px), 8px calc(100% - 3px), 8px calc(100% - 2px), 9px calc(100% - 2px), 9px calc(100% - 1px), 12px calc(100% - 1px), 12px 100%, calc(100% - 12px) 100%, calc(100% - 12px) calc(100% - 1px), calc(100% - 9px) calc(100% - 1px), calc(100% - 9px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 7px), calc(100% - 3px) calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 9px), calc(100% - 1px) calc(100% - 9px), calc(100% - 1px) calc(100% - 12px), 100% calc(100% - 12px), 100% 12px, calc(100% - 1px) 12px, calc(100% - 1px) 9px, calc(100% - 2px) 9px, calc(100% - 2px) 8px, calc(100% - 3px) 8px, calc(100% - 3px) 7px, calc(100% - 3px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 5px, calc(100% - 5px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 3px, calc(100% - 7px) 3px, calc(100% - 8px) 3px, calc(100% - 8px) 2px, calc(100% - 9px) 2px, calc(100% - 9px) 1px, calc(100% - 12px) 1px, calc(100% - 12px) 0px, 12px 0px, 12px 1px, 9px 1px, 9px 2px, 8px 2px, 8px 3px, 7px 3px, 6px 3px, 6px 4px, 5px 4px, 4px 5px, 4px 6px, 3px 6px, 3px 7px, 3px 8px, 2px 8px, 2px 9px, 1px 9px, 1px 12px, 0px 12px, 0px 50%, 1px 50%, 1px 12px, 2px 12px, 2px 9px, 3px 9px, 3px 8px, 4px 8px, 4px 7px, 4px 6px, 5px 6px, 5px 5px, 6px 5px, 6px 4px, 7px 4px, 8px 4px, 8px 3px, 9px 3px, 9px 2px, 12px 2px, 12px 1px, calc(100% - 12px) 1px, calc(100% - 12px) 2px, calc(100% - 9px) 2px, calc(100% - 9px) 3px, calc(100% - 8px) 3px, calc(100% - 8px) 4px, calc(100% - 7px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 7px, calc(100% - 4px) 8px, calc(100% - 3px) 8px, calc(100% - 3px) 9px, calc(100% - 2px) 9px, calc(100% - 2px) 12px, calc(100% - 1px) 12px, calc(100% - 1px) calc(100% - 12px), calc(100% - 2px) calc(100% - 12px), calc(100% - 2px) calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 7px), calc(100% - 4px) calc(100% - 6px), calc(100% - 5px) calc(100% - 6px), calc(100% - 5px) calc(100% - 5px), calc(100% - 6px) calc(100% - 5px), calc(100% - 6px) calc(100% - 4px), calc(100% - 7px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) calc(100% - 2px), calc(100% - 12px) calc(100% - 2px), calc(100% - 12px) calc(100% - 1px), 12px calc(100% - 1px), 12px calc(100% - 2px), 9px calc(100% - 2px), 9px calc(100% - 3px), 8px calc(100% - 3px), 8px calc(100% - 4px), 7px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 7px), 4px calc(100% - 8px), 3px calc(100% - 8px), 3px calc(100% - 9px), 2px calc(100% - 9px), 2px calc(100% - 12px), 1px calc(100% - 12px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-xl,
+.pixel-rounded-xl--wrapper {
+  clip-path: polygon(0px calc(100% - 19px), 1px calc(100% - 19px), 1px calc(100% - 16px), 2px calc(100% - 16px), 2px calc(100% - 15px), 2px calc(100% - 13px), 3px calc(100% - 13px), 3px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 11px), 4px calc(100% - 10px), 5px calc(100% - 10px), 5px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 8px), 7px calc(100% - 8px), 7px calc(100% - 7px), 8px calc(100% - 7px), 8px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 5px), 10px calc(100% - 5px), 10px calc(100% - 4px), 11px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 3px), 13px calc(100% - 3px), 13px calc(100% - 2px), 15px calc(100% - 2px), 16px calc(100% - 2px), 16px calc(100% - 1px), 19px calc(100% - 1px), 19px 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 1px), calc(100% - 16px) calc(100% - 1px), calc(100% - 16px) calc(100% - 2px), calc(100% - 15px) calc(100% - 2px), calc(100% - 13px) calc(100% - 2px), calc(100% - 13px) calc(100% - 3px), calc(100% - 12px) calc(100% - 3px), calc(100% - 12px) calc(100% - 4px), calc(100% - 11px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) calc(100% - 5px), calc(100% - 9px) calc(100% - 5px), calc(100% - 9px) calc(100% - 6px), calc(100% - 8px) calc(100% - 6px), calc(100% - 8px) calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) calc(100% - 8px), calc(100% - 6px) calc(100% - 8px), calc(100% - 6px) calc(100% - 9px), calc(100% - 5px) calc(100% - 9px), calc(100% - 5px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px), calc(100% - 4px) calc(100% - 11px), calc(100% - 4px) calc(100% - 12px), calc(100% - 3px) calc(100% - 12px), calc(100% - 3px) calc(100% - 13px), calc(100% - 2px) calc(100% - 13px), calc(100% - 2px) calc(100% - 15px), calc(100% - 2px) calc(100% - 16px), calc(100% - 1px) calc(100% - 16px), calc(100% - 1px) calc(100% - 19px), 100% calc(100% - 19px), 100% 19px, calc(100% - 1px) 19px, calc(100% - 1px) 16px, calc(100% - 2px) 16px, calc(100% - 2px) 15px, calc(100% - 2px) 13px, calc(100% - 3px) 13px, calc(100% - 3px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) 11px, calc(100% - 4px) 10px, calc(100% - 5px) 10px, calc(100% - 5px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 8px, calc(100% - 7px) 8px, calc(100% - 7px) 7px, calc(100% - 8px) 7px, calc(100% - 8px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 5px, calc(100% - 10px) 5px, calc(100% - 10px) 4px, calc(100% - 11px) 4px, calc(100% - 12px) 4px, calc(100% - 12px) 3px, calc(100% - 13px) 3px, calc(100% - 13px) 2px, calc(100% - 15px) 2px, calc(100% - 16px) 2px, calc(100% - 16px) 1px, calc(100% - 19px) 1px, calc(100% - 19px) 0px, 19px 0px, 19px 1px, 16px 1px, 16px 2px, 15px 2px, 13px 2px, 13px 3px, 12px 3px, 12px 4px, 11px 4px, 10px 4px, 10px 5px, 9px 5px, 9px 6px, 8px 6px, 8px 7px, 7px 7px, 7px 8px, 6px 8px, 6px 9px, 5px 9px, 5px 10px, 4px 10px, 4px 11px, 4px 12px, 3px 12px, 3px 13px, 2px 13px, 2px 15px, 2px 16px, 1px 16px, 1px 19px, 0px 19px);
+}
+
+.pixel-rounded-xl--wrapper .pixel-rounded-xl {
+  clip-path: polygon(1px 19px, 2px 19px, 2px 16px, 3px 16px, 3px 15px, 3px 13px, 4px 13px, 4px 12px, 5px 12px, 5px 11px, 5px 10px, 6px 10px, 6px 9px, 7px 9px, 7px 8px, 8px 8px, 8px 7px, 9px 7px, 9px 6px, 10px 6px, 10px 5px, 11px 5px, 12px 5px, 12px 4px, 13px 4px, 13px 3px, 15px 3px, 16px 3px, 16px 2px, 19px 2px, 19px 1px, calc(100% - 19px) 1px, calc(100% - 19px) 2px, calc(100% - 16px) 2px, calc(100% - 16px) 3px, calc(100% - 15px) 3px, calc(100% - 13px) 3px, calc(100% - 13px) 4px, calc(100% - 12px) 4px, calc(100% - 12px) 5px, calc(100% - 11px) 5px, calc(100% - 10px) 5px, calc(100% - 10px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 7px, calc(100% - 8px) 7px, calc(100% - 8px) 8px, calc(100% - 7px) 8px, calc(100% - 7px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 10px, calc(100% - 5px) 10px, calc(100% - 5px) 11px, calc(100% - 5px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) 13px, calc(100% - 3px) 13px, calc(100% - 3px) 15px, calc(100% - 3px) 16px, calc(100% - 2px) 16px, calc(100% - 2px) 19px, calc(100% - 1px) 19px, calc(100% - 1px) calc(100% - 19px), calc(100% - 2px) calc(100% - 19px), calc(100% - 2px) calc(100% - 16px), calc(100% - 3px) calc(100% - 16px), calc(100% - 3px) calc(100% - 15px), calc(100% - 3px) calc(100% - 13px), calc(100% - 4px) calc(100% - 13px), calc(100% - 4px) calc(100% - 12px), calc(100% - 5px) calc(100% - 12px), calc(100% - 5px) calc(100% - 11px), calc(100% - 5px) calc(100% - 10px), calc(100% - 6px) calc(100% - 10px), calc(100% - 6px) calc(100% - 9px), calc(100% - 7px) calc(100% - 9px), calc(100% - 7px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 7px), calc(100% - 9px) calc(100% - 7px), calc(100% - 9px) calc(100% - 6px), calc(100% - 10px) calc(100% - 6px), calc(100% - 10px) calc(100% - 5px), calc(100% - 11px) calc(100% - 5px), calc(100% - 12px) calc(100% - 5px), calc(100% - 12px) calc(100% - 4px), calc(100% - 13px) calc(100% - 4px), calc(100% - 13px) calc(100% - 3px), calc(100% - 15px) calc(100% - 3px), calc(100% - 16px) calc(100% - 3px), calc(100% - 16px) calc(100% - 2px), calc(100% - 19px) calc(100% - 2px), calc(100% - 19px) calc(100% - 1px), 19px calc(100% - 1px), 19px calc(100% - 2px), 16px calc(100% - 2px), 16px calc(100% - 3px), 15px calc(100% - 3px), 13px calc(100% - 3px), 13px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 5px), 11px calc(100% - 5px), 10px calc(100% - 5px), 10px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 7px), 8px calc(100% - 7px), 8px calc(100% - 8px), 7px calc(100% - 8px), 7px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 10px), 5px calc(100% - 10px), 5px calc(100% - 11px), 5px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 13px), 3px calc(100% - 13px), 3px calc(100% - 15px), 3px calc(100% - 16px), 2px calc(100% - 16px), 2px calc(100% - 19px), 1px calc(100% - 19px));
+}
+
+.pixel-rounded-xl::after,
+.pixel-rounded-xl--wrapper::after {
+  clip-path: polygon(0px calc(100% - 19px), 1px calc(100% - 19px), 1px calc(100% - 16px), 2px calc(100% - 16px), 2px calc(100% - 15px), 2px calc(100% - 13px), 3px calc(100% - 13px), 3px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 11px), 4px calc(100% - 10px), 5px calc(100% - 10px), 5px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 8px), 7px calc(100% - 8px), 7px calc(100% - 7px), 8px calc(100% - 7px), 8px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 5px), 10px calc(100% - 5px), 10px calc(100% - 4px), 11px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 3px), 13px calc(100% - 3px), 13px calc(100% - 2px), 15px calc(100% - 2px), 16px calc(100% - 2px), 16px calc(100% - 1px), 19px calc(100% - 1px), 19px 100%, calc(100% - 19px) 100%, calc(100% - 19px) calc(100% - 1px), calc(100% - 16px) calc(100% - 1px), calc(100% - 16px) calc(100% - 2px), calc(100% - 15px) calc(100% - 2px), calc(100% - 13px) calc(100% - 2px), calc(100% - 13px) calc(100% - 3px), calc(100% - 12px) calc(100% - 3px), calc(100% - 12px) calc(100% - 4px), calc(100% - 11px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) calc(100% - 5px), calc(100% - 9px) calc(100% - 5px), calc(100% - 9px) calc(100% - 6px), calc(100% - 8px) calc(100% - 6px), calc(100% - 8px) calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) calc(100% - 8px), calc(100% - 6px) calc(100% - 8px), calc(100% - 6px) calc(100% - 9px), calc(100% - 5px) calc(100% - 9px), calc(100% - 5px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px), calc(100% - 4px) calc(100% - 11px), calc(100% - 4px) calc(100% - 12px), calc(100% - 3px) calc(100% - 12px), calc(100% - 3px) calc(100% - 13px), calc(100% - 2px) calc(100% - 13px), calc(100% - 2px) calc(100% - 15px), calc(100% - 2px) calc(100% - 16px), calc(100% - 1px) calc(100% - 16px), calc(100% - 1px) calc(100% - 19px), 100% calc(100% - 19px), 100% 19px, calc(100% - 1px) 19px, calc(100% - 1px) 16px, calc(100% - 2px) 16px, calc(100% - 2px) 15px, calc(100% - 2px) 13px, calc(100% - 3px) 13px, calc(100% - 3px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) 11px, calc(100% - 4px) 10px, calc(100% - 5px) 10px, calc(100% - 5px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 8px, calc(100% - 7px) 8px, calc(100% - 7px) 7px, calc(100% - 8px) 7px, calc(100% - 8px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 5px, calc(100% - 10px) 5px, calc(100% - 10px) 4px, calc(100% - 11px) 4px, calc(100% - 12px) 4px, calc(100% - 12px) 3px, calc(100% - 13px) 3px, calc(100% - 13px) 2px, calc(100% - 15px) 2px, calc(100% - 16px) 2px, calc(100% - 16px) 1px, calc(100% - 19px) 1px, calc(100% - 19px) 0px, 19px 0px, 19px 1px, 16px 1px, 16px 2px, 15px 2px, 13px 2px, 13px 3px, 12px 3px, 12px 4px, 11px 4px, 10px 4px, 10px 5px, 9px 5px, 9px 6px, 8px 6px, 8px 7px, 7px 7px, 7px 8px, 6px 8px, 6px 9px, 5px 9px, 5px 10px, 4px 10px, 4px 11px, 4px 12px, 3px 12px, 3px 13px, 2px 13px, 2px 15px, 2px 16px, 1px 16px, 1px 19px, 0px 19px, 0px 50%, 1px 50%, 1px 19px, 2px 19px, 2px 16px, 3px 16px, 3px 15px, 3px 13px, 4px 13px, 4px 12px, 5px 12px, 5px 11px, 5px 10px, 6px 10px, 6px 9px, 7px 9px, 7px 8px, 8px 8px, 8px 7px, 9px 7px, 9px 6px, 10px 6px, 10px 5px, 11px 5px, 12px 5px, 12px 4px, 13px 4px, 13px 3px, 15px 3px, 16px 3px, 16px 2px, 19px 2px, 19px 1px, calc(100% - 19px) 1px, calc(100% - 19px) 2px, calc(100% - 16px) 2px, calc(100% - 16px) 3px, calc(100% - 15px) 3px, calc(100% - 13px) 3px, calc(100% - 13px) 4px, calc(100% - 12px) 4px, calc(100% - 12px) 5px, calc(100% - 11px) 5px, calc(100% - 10px) 5px, calc(100% - 10px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 7px, calc(100% - 8px) 7px, calc(100% - 8px) 8px, calc(100% - 7px) 8px, calc(100% - 7px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 10px, calc(100% - 5px) 10px, calc(100% - 5px) 11px, calc(100% - 5px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) 13px, calc(100% - 3px) 13px, calc(100% - 3px) 15px, calc(100% - 3px) 16px, calc(100% - 2px) 16px, calc(100% - 2px) 19px, calc(100% - 1px) 19px, calc(100% - 1px) calc(100% - 19px), calc(100% - 2px) calc(100% - 19px), calc(100% - 2px) calc(100% - 16px), calc(100% - 3px) calc(100% - 16px), calc(100% - 3px) calc(100% - 15px), calc(100% - 3px) calc(100% - 13px), calc(100% - 4px) calc(100% - 13px), calc(100% - 4px) calc(100% - 12px), calc(100% - 5px) calc(100% - 12px), calc(100% - 5px) calc(100% - 11px), calc(100% - 5px) calc(100% - 10px), calc(100% - 6px) calc(100% - 10px), calc(100% - 6px) calc(100% - 9px), calc(100% - 7px) calc(100% - 9px), calc(100% - 7px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 7px), calc(100% - 9px) calc(100% - 7px), calc(100% - 9px) calc(100% - 6px), calc(100% - 10px) calc(100% - 6px), calc(100% - 10px) calc(100% - 5px), calc(100% - 11px) calc(100% - 5px), calc(100% - 12px) calc(100% - 5px), calc(100% - 12px) calc(100% - 4px), calc(100% - 13px) calc(100% - 4px), calc(100% - 13px) calc(100% - 3px), calc(100% - 15px) calc(100% - 3px), calc(100% - 16px) calc(100% - 3px), calc(100% - 16px) calc(100% - 2px), calc(100% - 19px) calc(100% - 2px), calc(100% - 19px) calc(100% - 1px), 19px calc(100% - 1px), 19px calc(100% - 2px), 16px calc(100% - 2px), 16px calc(100% - 3px), 15px calc(100% - 3px), 13px calc(100% - 3px), 13px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 5px), 11px calc(100% - 5px), 10px calc(100% - 5px), 10px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 7px), 8px calc(100% - 7px), 8px calc(100% - 8px), 7px calc(100% - 8px), 7px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 10px), 5px calc(100% - 10px), 5px calc(100% - 11px), 5px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 13px), 3px calc(100% - 13px), 3px calc(100% - 15px), 3px calc(100% - 16px), 2px calc(100% - 16px), 2px calc(100% - 19px), 1px calc(100% - 19px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-t-sm-b-md {
+  clip-path: polygon(0px calc(100% - 9px), 1px calc(100% - 9px), 1px calc(100% - 8px), 1px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 4px), 4px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 1px), 8px calc(100% - 1px), 9px calc(100% - 1px), 9px 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px), calc(100% - 6px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 6px), calc(100% - 1px) calc(100% - 6px), calc(100% - 1px) calc(100% - 8px), calc(100% - 1px) calc(100% - 9px), 100% calc(100% - 9px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px);
+}
+
+.pixel-rounded-t-sm-b-md::after {
+  clip-path: polygon(0px calc(100% - 9px), 1px calc(100% - 9px), 1px calc(100% - 8px), 1px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 4px), 4px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 1px), 8px calc(100% - 1px), 9px calc(100% - 1px), 9px 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), calc(100% - 6px) calc(100% - 1px), calc(100% - 6px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 3px), calc(100% - 4px) calc(100% - 3px), calc(100% - 3px) calc(100% - 4px), calc(100% - 3px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 6px), calc(100% - 1px) calc(100% - 6px), calc(100% - 1px) calc(100% - 8px), calc(100% - 1px) calc(100% - 9px), 100% calc(100% - 9px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px, 0px 50%, 1px 50%, 1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) calc(100% - 9px), calc(100% - 2px) calc(100% - 9px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 5px), calc(100% - 4px) calc(100% - 5px), calc(100% - 4px) calc(100% - 4px), calc(100% - 5px) calc(100% - 4px), calc(100% - 5px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 9px) calc(100% - 2px), calc(100% - 9px) calc(100% - 1px), 9px calc(100% - 1px), 9px calc(100% - 2px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 3px), 5px calc(100% - 3px), 5px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 5px), 3px calc(100% - 5px), 3px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 2px calc(100% - 9px), 1px calc(100% - 9px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-l-sm {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, 100% 100%, 100% 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px);
+}
+
+.pixel-rounded-l-sm::after {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, 100% 100%, 100% 0px, 5px 0px, 5px 1px, 3px 1px, 3px 2px, 2px 2px, 2px 3px, 1px 3px, 1px 5px, 0px 5px, 0px 50%, 1px 50%, 1px 5px, 2px 5px, 2px 3px, 3px 3px, 3px 2px, 5px 2px, 5px 1px, 100% 1px, 100% calc(100% - 1px), 5px calc(100% - 1px), 5px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 5px), 1px calc(100% - 5px), 1px 50%, 0px 50%);
+}
+
+.pixel-rounded-sm-notl {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, calc(100% - 5px) 100%, calc(100% - 5px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px), calc(100% - 3px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 3px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 5px), 100% calc(100% - 5px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 0px 0px);
+}
+
+.pixel-rounded-sm-notl::after {
+  clip-path: polygon(0px calc(100% - 5px), 1px calc(100% - 5px), 1px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 1px), 5px calc(100% - 1px), 5px 100%, calc(100% - 5px) 100%, calc(100% - 5px) calc(100% - 1px), calc(100% - 3px) calc(100% - 1px), calc(100% - 3px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 3px), calc(100% - 1px) calc(100% - 3px), calc(100% - 1px) calc(100% - 5px), 100% calc(100% - 5px), 100% 5px, calc(100% - 1px) 5px, calc(100% - 1px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 1px, calc(100% - 5px) 1px, calc(100% - 5px) 0px, 0px 0px, 0px 50%, 1px 50%, 1px 1px, calc(100% - 5px) 1px, calc(100% - 5px) 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, calc(100% - 2px) 3px, calc(100% - 2px) 5px, calc(100% - 1px) 5px, calc(100% - 1px) calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) calc(100% - 1px), 5px calc(100% - 1px), 5px calc(100% - 2px), 3px calc(100% - 2px), 3px calc(100% - 3px), 2px calc(100% - 3px), 2px calc(100% - 5px), 1px calc(100% - 5px), 1px 50%, 0px 50%);
+}

package/registry/PropControls.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { PropDef, RenderMode } from "./types";
+import { Toggle } from "../components/core/Toggle/Toggle";
+import { ToggleGroup } from "../components/core/ToggleGroup/ToggleGroup";
+
+const SKIP_TYPES = new Set(["function", "array", "object"]);
+
+const CONTROLLED_UNCONTROLLED_PAIRS: Record<string, string> = {
+  checked: "defaultChecked",
+  pressed: "defaultPressed",
+  open: "defaultOpen",
+  value: "defaultValue",
+};
+
+/**
+ * Known semantic color values → CSS custom property for swatch rendering.
+ * A prop is considered "color-like" when the majority of its enum values
+ * appear in this map.
+ */
+const SEMANTIC_COLORS: Record<string, string> = {
+  accent: "var(--color-accent)",
+  danger: "var(--color-status-error)",
+  error: "var(--color-status-error)",
+  success: "var(--color-status-success)",
+  warning: "var(--color-status-warning)",
+  info: "var(--color-status-info)",
+  neutral: "var(--color-line)",
+  cream: "var(--color-page)",
+  white: "var(--color-inv)",
+  tinted: "var(--color-tinted)",
+};
+
+export interface PropControlsProps {
+  props: Record<string, PropDef>;
+  values: Record<string, unknown>;
+  onChange: (name: string, value: unknown) => void;
+  onReset: () => void;
+  controlledProps?: string[];
+  renderMode?: RenderMode;
+  className?: string;
+}
+
+function getEnumValues(prop: PropDef): Array<string | number> | undefined {
+  if (prop.options?.length) return prop.options;
+  if (prop.values?.length) return prop.values;
+
+  const legacyEnum = (prop as PropDef & { enum?: Array<string | number> }).enum;
+  if (legacyEnum?.length) return legacyEnum;
+
+  return undefined;
+}
+
+function shouldSkipProp(prop: PropDef): boolean {
+  const type = prop.type ?? "";
+  return SKIP_TYPES.has(type) || type.endsWith("[]") || type.includes("=>");
+}
+
+function isColorLikeEnum(values: Array<string | number>): boolean {
+  const matches = values.filter(
+    (v) => typeof v === "string" && v in SEMANTIC_COLORS,
+  ).length;
+  return matches > values.length / 2;
+}
+
+export function getControllableProps({
+  props,
+  controlledProps,
+  renderMode,
+}: Pick<PropControlsProps, "props" | "controlledProps" | "renderMode">): Array<
+  [string, PropDef]
+> {
+  return Object.entries(props).filter(([name, prop]) => {
+    if (shouldSkipProp(prop)) return false;
+
+    const uncontrolled = CONTROLLED_UNCONTROLLED_PAIRS[name];
+    if (uncontrolled && uncontrolled in props) return false;
+
+    if (
+      renderMode === "custom" &&
+      controlledProps &&
+      !controlledProps.includes(name)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+}
+
+// ── Controls ──────────────────────────────────────────────────────────────
+
+function BooleanControl({
+  name,
+  value,
+  onChange,
+}: {
+  name: string;
+  value: boolean;
+  onChange: (name: string, value: boolean) => void;
+}) {
+  return (
+    <Toggle
+      pressed={value}
+      onPressedChange={(pressed) => onChange(name, pressed)}
+      size="sm"
+      compact
+      quiet
+    >
+      {name}
+    </Toggle>
+  );
+}
+
+function EnumControl({
+  name,
+  value,
+  values,
+  onChange,
+}: {
+  name: string;
+  value: string | number;
+  values: Array<string | number>;
+  onChange: (name: string, value: string | number) => void;
+}) {
+  const colorLike = isColorLikeEnum(values);
+  const hasNumeric = values.some((v) => typeof v === "number");
+
+  return (
+    <ToggleGroup
+      value={[String(value)]}
+      onValueChange={(next) => {
+        if (next.length === 0) return;
+        const raw = next[0];
+        onChange(name, hasNumeric && !Number.isNaN(Number(raw)) ? Number(raw) : raw);
+      }}
+      size="sm"
+      compact
+    >
+      {values.map((optionValue) => {
+        const label = String(optionValue);
+        const colorVar =
+          colorLike && typeof optionValue === "string"
+            ? SEMANTIC_COLORS[optionValue]
+            : undefined;
+
+        return (
+          <ToggleGroup.Item key={label} value={label} aria-label={label}>
+            {colorVar && (
+              <span
+                className="inline-block h-2.5 w-2.5 shrink-0 rounded-full border border-line"
+                style={{ backgroundColor: colorVar }}
+              />
+            )}
+            {label}
+          </ToggleGroup.Item>
+        );
+      })}
+    </ToggleGroup>
+  );
+}
+
+function StringControl({
+  name,
+  value,
+  onChange,
+}: {
+  name: string;
+  value: string;
+  onChange: (name: string, value: string) => void;
+}) {
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={(event) => onChange(name, event.target.value)}
+      placeholder={name}
+      className="w-full rounded-xs border border-line bg-page px-1.5 py-0.5 font-mono text-[10px] text-main outline-none placeholder:text-mute focus:border-main"
+    />
+  );
+}
+
+function NumberControl({
+  name,
+  value,
+  onChange,
+}: {
+  name: string;
+  value: number;
+  onChange: (name: string, value: number) => void;
+}) {
+  const [raw, setRaw] = useState(String(value));
+
+  useEffect(() => {
+    setRaw(String(value));
+  }, [value]);
+
+  return (
+    <input
+      type="number"
+      value={raw}
+      onChange={(event) => {
+        setRaw(event.target.value);
+        const nextValue = Number(event.target.value);
+
+        if (event.target.value !== "" && !Number.isNaN(nextValue)) {
+          onChange(name, nextValue);
+        }
+      }}
+      onBlur={() => setRaw(String(value))}
+      className="w-full rounded-xs border border-line bg-page px-1.5 py-0.5 font-mono text-[10px] text-main outline-none focus:border-main"
+    />
+  );
+}
+
+function ReactNodeControl({
+  name,
+  value,
+  onChange,
+}: {
+  name: string;
+  value: string;
+  onChange: (name: string, value: string) => void;
+}) {
+  return (
+    <textarea
+      value={value}
+      onChange={(event) => onChange(name, event.target.value)}
+      placeholder={name}
+      rows={2}
+      className="w-full resize-none rounded-xs border border-line bg-page px-1.5 py-0.5 font-mono text-[10px] text-main outline-none placeholder:text-mute focus:border-main"
+    />
+  );
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────
+
+export function PropControls({
+  props,
+  values,
+  onChange,
+  onReset,
+  controlledProps,
+  renderMode,
+  className,
+}: PropControlsProps) {
+  const controllable = getControllableProps({
+    props,
+    controlledProps,
+    renderMode,
+  });
+
+  if (controllable.length === 0) {
+    return (
+      <div className="px-2 py-3">
+        <span className="font-mono text-[10px] text-mute">
+          No controllable props
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={[
+        "nodrag nopan flex flex-col gap-0 overflow-y-auto bg-page text-main",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="flex items-center justify-between border-b border-line px-2 py-1.5">
+        <span className="font-mono text-[9px] uppercase tracking-wide text-mute">
+          Props
+        </span>
+        <button
+          type="button"
+          onClick={onReset}
+          className="cursor-pointer font-mono text-[9px] text-mute transition-colors hover:text-main"
+          title="Reset to defaults"
+        >
+          reset
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-1.5 px-2 py-2">
+        {/* Enum + string + number controls */}
+        {controllable
+          .filter(([, prop]) => prop.type !== "boolean")
+          .map(([name, prop]) => {
+            const enumValues = getEnumValues(prop);
+            return (
+              <div key={name} className="flex flex-col gap-0.5">
+                <label className="font-mono text-[10px] text-mute">
+                  {name}
+                </label>
+                {enumValues ? (
+                  <EnumControl
+                    name={name}
+                    value={values[name] as string | number ?? prop.default ?? enumValues[0]}
+                    values={enumValues}
+                    onChange={onChange}
+                  />
+                ) : prop.type === "number" ? (
+                  <NumberControl
+                    name={name}
+                    value={Number(values[name] ?? prop.default ?? 0)}
+                    onChange={onChange}
+                  />
+                ) : prop.type === "node" || prop.type === "ReactNode" ? (
+                  <ReactNodeControl
+                    name={name}
+                    value={String(values[name] ?? prop.default ?? "")}
+                    onChange={onChange}
+                  />
+                ) : (
+                  <StringControl
+                    name={name}
+                    value={String(values[name] ?? prop.default ?? "")}
+                    onChange={onChange}
+                  />
+                )}
+              </div>
+            );
+          })}
+
+        {/* Boolean toggles — compact flow layout */}
+        {controllable.some(([, prop]) => prop.type === "boolean") && (
+          <div className="flex flex-wrap gap-1 pt-1">
+            {controllable
+              .filter(([, prop]) => prop.type === "boolean")
+              .map(([name, prop]) => (
+                <BooleanControl
+                  key={name}
+                  name={name}
+                  value={Boolean(values[name] ?? prop.default ?? false)}
+                  onChange={onChange}
+                />
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}